echarts在代码加入dataZoom组件

Echarts绘图echarts在代码加入dataZoom组件实例一实例二实例一/01先只在单独的一个横轴上加上dataZoom组件，代码示例如下：option={xAxis:{type:'value'},yAxis:{type:'value'},dataZoom:[{//这个dataZoom组件，默认控制x轴。单独的一个横轴加上dataZoom组件type:'slider',//这个dataZoom组件是slider型dataZoom组件start:10,//左边在10%的位置。end:60//右边在60%的位置。}],series:[{type:'scatter',//这是个『散点图』itemStyle:{normal:{opacity:0.8

单独的一个横轴加上dataZoom组件

单独的一个横轴加上dataZoom组件symbolSize:function(val){returnval[2]*40;},data:[["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]}]}结果显示如下：

单独的一个横轴加上dataZoom组件图：单独的一个横轴上加上dataZoom组件实例二/02

接下来我们来实现在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放，方法很简单：再加上一个inside型的dataZoom组件即可。具体的实现是直接在上面的option.dataZoom中增加：option={...,dataZoom:[{//这个dataZoom组件，默认控制x轴。type:'slider',//这个dataZoom组件是slider型dataZoom组件],...}

加dataZoom组件实现拖动滚轮缩放操作

执行上述代码就能在坐标系中进行滑动，以及使用滚轮缩放了。加dataZoom组件实现拖动滚轮缩放操作

图：效果图

如果想y轴也能够缩放，那么在y轴上也加上dataZoom组件：option={...,dataZoom:[{type:'slider',xAxisIndex:0,start:10,end:60加dataZoom组件实现拖动滚轮缩放操作

},{type:'inside',xAxisIndex:0,start:10,end:60},{type:'slider',yAxisIndex:0,start:30,end:80},{加dataZoom组件实现拖动滚轮缩放操作

type:'inside',yAxisIndex:0,star