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

转载于:https://www.cnblogs.com/yzhihao/p/10701834.html