ECharts縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。

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"]]
       }
   ]
}

上面的實例只能拖動 dataZoom 組件來縮小或放大圖表。如果想在坐標系內進行拖動，以及用鼠標滾輪（或移動觸屏上的兩指滑動）進行縮放，那么需要 再再加上一個 inside 型的 dataZoom 組件。 在以上實例基礎上我們再增加 type: 的配置信息： 

實例

option = {
   ...,
   dataZoom: [
       {   // 這個dataZoom組件，默認控制x軸。
           type: 'slider', // 這個 dataZoom 組件是 slider 型 dataZoom 組件
           start: 10,      // 左邊在 10% 的位置。
           end: 60         // 右邊在 60% 的位置。
       },
       {   // 這個dataZoom組件，也控制x軸。
           type: 'inside', // 這個 dataZoom 組件是 inside 型 dataZoom 組件
           start: 10,      // 左邊在 10% 的位置。
           end: 60         // 右邊在 60% 的位置。
       }
   ],
   ...
}

當然我們可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個或哪些數軸。 

實例

var data1 = [];
var data2 = [];
var data3 = [];

var random = function (max) {
   return (Math.random() * max).toFixed(3);
};for (var i = 0; i false,
   legend: {
       data: ['scatter', 'scatter2', 'scatter3']
   },
   tooltip: {
   },
   xAxis: {
       type: 'value',
       min: 'dataMin',
       max: 'dataMax',
       splitLine: {
           show: true       }
   },
   yAxis: {
       type: 'value',
       min: 'dataMin',
       max: 'dataMax',
       splitLine: {
           show: true       }
   },
   dataZoom: [
       {
           type: 'slider',
           show: true,
           xAxisIndex: [0],
           start: 1,
           end: 35
       },
       {
           type: 'slider',
           show: true,
           yAxisIndex: [0],
           left: '93%',
           start: 29,
           end: 36
       },
       {
           type: 'inside',
           xAxisIndex: [0],
           start: 1,
           end: 35
       },
       {
           type: 'inside',
           yAxisIndex: [0],
           start: 29,
           end: 36
       }
   ],
   series: [
       {
           name: 'scatter',
           type: 'scatter',
           itemStyle: {
               normal: {
                   opacity: 0.8
               }
           },
           symbolSize: function (val) {
               return val[2] * 40;
           },
           data: data1
       },
       {
           name: 'scatter2',
           type: 'scatter',
           itemStyle: {
               normal: {
                   opacity: 0.8
               }
           },
           symbolSize: function (val) {
               return val[2] * 40;
           },
           data: data2
       },
       {
           name: 'scatter3',
           type: 'scatter',
           itemStyle: {
               normal: {
                   opacity: 0.8,
               }
           },
           symbolSize: function (val) {
               return val[2] * 40;
           },
           data: data3
       }
   ]
}