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. The By default The above example can only be dragged On the basis of the above examples, we will add Of course we can pass. dataZoom . 9.8.1. DataZoom ¶
dataZoom component can realize the function of scrolling through themouse wheel to zoom in and out of the chart. 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"]]
}
]
}
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. 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.
}
],
...
}
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
}
]
}