echarts无需手点缩放按钮,鼠标选中图表部分显示部分详情

目标样子

1.鼠标选中图表

 2.选完后

 实现:

import * as echarts from 'echarts/core';

import { ToolboxComponent } from 'echarts/components';

echarts.use([ ToolboxComponent ]);

// 无需手点缩放
this.myChart.dispatchAction({
    type: 'takeGlobalCursor',
    key: 'dataZoomSelect',
    dataZoomSelectActive: true
})

// 缩放时触发
this.chartCanvas.on('dataZoom', (key) => {
    console.log('缩放', key)
})


toolbox: {
    feature: {
        restore: {}, // 还原按钮 此行删除不显示还原按钮
        dataZoom: {
            show: true,
            iconStyle: {
                opacity: 1 
            },
            yAxisIndex: 'none'
        }
    }
},

如果点击还原后自动选择将失效, 可以自定义一个还原按钮 初始图表

 


版权声明:本文为xjh18831423051原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。