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


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
})
})


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM