目标样子
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版权协议,转载请附上原文出处链接和本声明。