YouTipEcharts Interaction
ECharts provides many interaction components: legend component, title component, visualMap component, dataZoom component, and timeline component.
In the following content, we will introduce how to use the dataZoom component.
### dataZoom
The dataZoom component can implement the function of zooming in and out of the chart by scrolling the mouse wheel.
By default, dataZoom controls the x-axis, that is, performing **data window zoom** and **data window pan** operations on the x-axis.
## Example
option ={
xAxis:{
type:'value'
},
yAxis:{
type:'value'
},
dataZoom:[
{// this dataZoom component, controls x-axis by default.
type:'slider',// this dataZoom component is slider type dataZoom component
start:10,// the left side is at 10%.
end:60// the right side is at 60%.
}
],
series:[
{
type:'scatter',// this is a 'scatter plot'
itemStyle:{
opacity:0.8
},
symbolSize:function(val){
return val*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"]]
}
]
}
[Try it »](#)
The above example can only drag the dataZoom component to zoom in or out of the chart. If you want to drag within the coordinate system and zoom with the mouse wheel (or two-finger slide on mobile touch screen), then you need to add another inside type dataZoom component.
On the basis of the above example, we add the configuration information of type: 'inside':
## Example
option ={
...,
dataZoom:[
{// this dataZoom component, controls x-axis by default.
type:'slider',// this dataZoom component is slider type dataZoom component
start:10,// the left side is at 10%.
end:60// the right side is at 60%.
},
{// this dataZoom component, also controls x-axis.
type:'inside',// this dataZoom component is inside type dataZoom component
start:10,// the left side is at 10%.
end:60// the right side is at 60%.
}
],
...
}
[Try it »](#)
Of course, we can use dataZoom.xAxisIndex or dataZoom.yAxisIndex to specify which axis or axes the dataZoom controls.
## 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:,
start:1,
end:35
},
{
type:'slider',
show:true,
yAxisIndex:,
left:'93%',
start:29,
end:36
},
{
type:'inside',
xAxisIndex:,
start:1,
end:35
},
{
type:'inside',
yAxisIndex:,
start:29,
end:36
}
],
series:[
{
name:'scatter',
type:'scatter',
itemStyle:{
normal:{
opacity:0.8
}
},
symbolSize:function(val){
return val*40;
},
data: data1
},
{
name:'scatter2',
type:'scatter',
itemStyle:{
normal:{
opacity:0.8
}
},
symbolSize:function(val){
return val*40;
},
data: data2
},
{
name:'scatter3',
type:'scatter',
itemStyle:{
normal:{
opacity:0.8,
}
},
symbolSize:function(val){
return val*40;
},
data: data3
}
]
}
[Try it »](#)