{{target: data-zoom}}
Apache EChartsTM provides many interaction components besides chart. For example:
legend component
legend、title component
title、visualmap component
visualMap、datazoom component
dataZoom、dataline component
timeline
Following is an example of datazoom component
dataZoom as an introduction of how to add this kind of component.
Data overview by default, and detail by requirement is a basic interaction need of data visualization. dataZoom
component can implement this function in rectangular coordinate (grid) and polar coordinate (polar.
**For example: ** ~600x400
dataZoom
component operates data window zoom and data window translation on axis
.Use dataZoom.xAxisIndex, dataZoom.yAxisIndex to specify which axis
dataZoom
controls.
Multiple dataZoom
components can exist at the same time to control function together. Components controling the same axis will be connected automatically. The example below explains in detail.
Operation principle of dataZoom
achieves data window zooming through data filtering.
Different settings of data filtering modes lead to different data window zooming effects, please see: dataZoom.filterMode.
Setting of dataZoom
data window range supports two formats currently:
Percentage: see dataZoom.start and dataZoom.end.
Absolute value: see dataZoom.startValue and dataZoom.endValue.
**dataZoom component supports several child components: **
Inside data zoom component (dataZoomInside): inside coordinates.
Slider data zoom component (dataZoomSlider): has seperate slide option.
Select data zoom component (dataZoomSelect): full-screen box for zoom data area. Entrance and configuration item are both in toolbox
.
First, only add dataZoom component to x-axis. Following examples shows the code.
option = { xAxis: { type: 'value' }, yAxis: { type: 'value' }, dataZoom: [ { // This dataZoom component controls x-axis by dafault type: 'slider', // this dataZoom component is dataZoom component of slider start: 10, // the left is located at 10% end: 60 // the right is located at 60% } ], series: [ { type: 'scatter', // this is scatter chart 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"]] } ] }
which will show the following result: ~600x300
The chart above can only change window by dragging dataZoom component. If you want to drag in coordinate, or use mouse wheel (or slides with two fingers on mobile) to zoom, then another inside dataZoom component needs to be added. You can just add in the option.dataZoom
above:
option = { ..., dataZoom: [ { // this dataZoom component controls x-axis by dafault type: 'slider', // this dataZoom component is dataZoom component of slider start: 10, // the left is located at 10% end: 60 // the right is located at 60% }, { // This dataZoom component controls x-axis by dafault type: 'inside', // this dataZoom component is dataZoom component of inside start: 10, // the left is located at 10% end: 60 // the right is located at 60% } ], ... }
Following results can be seen (you can now slide or use mouse wheel to zoom in coordinate) : ~600x300
If you want to enable zooming on y-axis, then you need to add dataZoom componet on y-axis:
option = { ..., dataZoom: [ { type: 'slider', xAxisIndex: 0, start: 10, end: 60 }, { type: 'inside', xAxisIndex: 0, start: 10, end: 60 }, { type: 'slider', yAxisIndex: 0, start: 30, end: 80 }, { type: 'inside', yAxisIndex: 0, start: 30, end: 80 } ], ... }
Following result can be seen: ~600x300