ECharts 提供了很多交互组件：例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline。

接下来的内容我们将介绍如何使用数据区域缩放组件 dataZoom。

dataZoom

dataZoom 组件可以实现通过鼠标滚轮滚动，放大缩小图表的功能。

默认情况下 dataZoom 控制 x 轴，即对 x 轴进行数据窗口缩放和数据窗口平移操作。

option = {     xAxis: {         type: 'value'     },     yAxis: {         type: 'value'     },     dataZoom: [         {   // 这个dataZoom组件，默认控制x轴。             type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件             start: 10,      // 左边在 10% 的位置。             end: 60         // 右边在 60% 的位置。         }     ],     series: [         {             type: 'scatter', // 这是个『散点图』             itemStyle: {                 opacity: 0.8             },             symbolSize: function (val) {                 return val[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"]]         }     ] }

  轮（或移动触屏上的两指滑动）进行缩放，那么需要 再再加上一个 inside 型的 dataZoom 组件。

在以上实例基础上我们再增加 type: 'inside' 的配置信息： 

 当然我们可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。 

 ​