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

options设置html

toolbox: { // 工具栏
feature: {
dataZoom : { // 选时间缩放功能
show : true, // show为true时,才能触发takeGlobalCursor事件
            yAxisIndex: 'none',
},
}
}

启动或关闭  中  的刷选状态。 echarts对应文档连接https://echarts.baidu.com/api.html#action.dataZoom.takeGlobalCursortoolboxdataZoom
 
折线图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    })})
相关文章
相关标签/搜索