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

最新推荐文章于 2024-05-30 15:07:12 发布

旮旯里的程序员

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量666

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/xjh18831423051/article/details/125621693

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

目标样子

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'
        }
    }
},

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