9.8. ECharts interaction component

ECharts provides many interactive components: example components legend , title component title , visual mapping component visualMap , data area scaling component dataZoom , timeline components timeline .

In the following content, we will show you how to use the data region scaling component. dataZoom .

9.8.1. DataZoom ¶

The dataZoom component can realize the function of scrolling through themouse wheel to zoom in and out of the chart.

By default dataZoom control the x-axis, that is, zoom and pan the data window on the x-axis.

Example ¶

option = { xAxis: { type: 'value' }, yAxis: { type: 'value' }, dataZoom: [ { // This dataZoom component controls the x-axis by default. type: 'slider', // This dataZoom component is a slider type dataZoom component start: 10, // The left side is at 10% position. end: 60 // The right side is at 60% position. } ], series: [ { type: 'scatter', // This is a scatter plot 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"]] } ] } 

The above example can only be dragged dataZoom component to zoom out orenlarge the chart. If you want to drag in the coordinate system and zoom with the mouse wheel (or move two fingers on the touch screen), you need to add another inside type a dataZoom module.

On the basis of the above examples, we will add type: 'inside' configuration information for:

Example ¶

option = { ..., dataZoom: [ { // This dataZoom component controls the x-axis by default. type: 'slider', // This dataZoom component is a slider type dataZoom component start: 10, // The left side is at 10% position. end: 60 // The right side is at 60% position. }, { // This dataZoom component also controls the x-axis. type: 'inside', // This dataZoom component is an inside type dataZoom component start: 10, // The left side is at 10% position. end: 60 // The right side is at 60% position. } ], ... } 

Of course we can pass. dataZoom.xAxisIndex or dataZoom.yAxisIndex to specify dataZoom controls which axis or axes.

Example ¶

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)]); } option = { animation: 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 } ] } 