echarts中的区域缩放组件dataZoom,主动触发选区缩放点击事件

时间:2022-07-14 13:53:56

options设置

toolbox: { // 工具栏
feature: {
dataZoom : { // 选时间缩放功能
show : true, // show为true时,才能触发takeGlobalCursor事件
            yAxisIndex: 'none',
},
}
}
启动或关闭 toolbox 中 dataZoom 的刷选状态。 echarts对应文档链接https://echarts.baidu.com/api.html#action.dataZoom.takeGlobalCursor
 
折线图html
<ve-line :ref="'lineChart' + i"></ve-line>

通过refs获取对应下标的echarts图表
myChart = this.$refs[`lineChart${chartIndex}`][0].echarts
this.$nextTick(() => { // 通过nextTick获取,防止图表dom未渲染完成  如果还未激活刷选光标,则尝试setTimeout(()=>{},1000)选取更长的渲染延时触发
    myChart.dispatchAction({ // 默认启动 toolbox 中 dataZoom 的刷选状态
type: "takeGlobalCursor",
key: "dataZoomSelect",
dataZoomSelectActive: true
})
})