ECharts 交互组件

精华

小牛编辑

178浏览

2023-03-14

ECharts 提供了很多交互组件：例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline。

接下来的内容我们将介绍如何使用数据区域缩放组件 dataZoom。

dataZoom

dataZoom 组件可以实现通过鼠标滚轮滚动，放大缩小图表的功能。

默认情况下 dataZoom 控制 x 轴，即对 x 轴进行数据窗口缩放和数据窗口平移操作。

实例

option = {
xAxis : {
type : 'value'
} ,
yAxis : {
type : 'value'
} ,
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' 的配置信息：

实例

option = {
... ,
dataZoom : [
{ // 这个dataZoom组件，默认控制x轴。
type : 'slider' , // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start : 10 , // 左边在 10% 的位置。
end : 60 // 右边在 60% 的位置。
} ,
{ // 这个dataZoom组件，也控制x轴。
type : 'inside' , // 这个 dataZoom 组件是 inside 型 dataZoom 组件
start : 10 , // 左边在 10% 的位置。
end : 60 // 右边在 60% 的位置。
}
] ,
...
}

当然我们可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。

实例