ECharts 提供了很多互動元件：例元件 legend、标題元件 title、視覺映射元件 visualMap、資料區域縮放元件 dataZoom、時間線元件 timeline。
接下來的内容我們将介紹如何使用資料區域縮放元件 dataZoom。
dataZoom
dataZoom 元件可以實作通過滑鼠滾輪滾動，放大縮小圖表的功能。
預設情況下 dataZoom 控制 x 軸，即對 x 軸進行資料視窗縮放和資料視窗平移操作。
執行個體
option = {
xAxis: {
type: 'value'
},
yAxis: {
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: 'inside' 的配置資訊：
...,
},
{ // 這個dataZoom元件，也控制x軸。
type: 'inside', // 這個 dataZoom 元件是 inside 型 dataZoom 元件
...
當然我們可以通過 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 < 500; i++) {
data1.push([random(15), random(10), random(1)]);
data2.push([random(10), random(10), random(1)]);
data3.push([random(15), random(10), random(1)]);
animation: false,
legend: {
data: ['scatter', 'scatter2', 'scatter3']
tooltip: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
type: 'slider',
show: true,
xAxisIndex: [0],
start: 1,
end: 35
yAxisIndex: [0],
left: '93%',
start: 29,
end: 36
type: 'inside',
name: 'scatter',
type: 'scatter',
normal: {
opacity: 0.8
}
data: data1
name: 'scatter2',
data: data2
name: 'scatter3',
opacity: 0.8,
data: data3