ECharts.dataZoom使用笔记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_32475739/article/details/79099898

1.功能

1.有inslide和slide两种dataZoom，也分X,Y轴 
2.可以对dataZoom缩放进行监听

2.两种dataZoom

dataZoom : [
        {  
             type: 'slider',//图表下方的伸缩条
             show : true,  //是否显示
             realtime : true,  //
             start : 0,  //伸缩条开始位置（1-100），可以随时更改
             end : 100,  //伸缩条结束位置（1-100），可以随时更改
        },
        {  
                 type: 'inside',  //鼠标滚轮
                 realtime : true,  
                 //还有很多属性可以设置，详见文档
        },
     ],

3.监听事件

myChart.on('datazoom', function (params){
    //params里面有什么，可以打印出来看一下就明白
    console.log(params);
    //可以通过params获取缩放的起止百分比，但是鼠标滚轮和伸缩条拖动触发的params格式不同，所以用另一种方法
    //获得图表数据数组下标
    var startValue = myChart.getModel().option.dataZoom[0].startValue;
    var endValue = myChart.getModel().option.dataZoom[0].endValue;
    //获得起止位置百分比
    var startPercent = myChart.getModel().option.dataZoom[0].start;
    var endPercent = myChart.getModel().option.dataZoom[0].end;

    ...

})