echarts 如何设置（dataZoom）多个图形的数据区域一起联动缩放响应

本文主要是介绍echarts 如何设置（dataZoom）多个图形的数据区域一起联动缩放响应，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

数据区域联动缩放需要用到 dataZoom 的专属事件 dispatchAction

实现多个数据区域联动缩放功能

<div style="width:100%;height:320px;" id="test01"></div>
<div style="width:100%;height:320px;" id="test02"></div>
<div style="width:100%;height:320px;" id="test03"></div>

let option = {title:{text:'测试'},tooltip: {trigger: 'axis',backgroundColor: 'rgba(17,21,43,0.75)',textStyle:{color:'#FFFFFF'},axisPointer: {type: 'cross'},},legend: {right:'5%',data: ['测试']},grid: {left: '2%',right: '4%',bottom: 50,containLabel: true},dataZoom: [{show: true,height: 20}],xAxis: [{type: 'category',axisLine: { show: false },axisTick: { show: false },boundaryGap: ['20%', '20%'],data:[12,32,52,72,92]}],yAxis: [{type: 'value',name: '测试',axisLine: { show: false },axisTick: { show: false }}],series: [{name: '测试',type: 'line',symbol: 'circle',data: [12,13,43,56,78],xAxisIndex:0,}            ]}
let test1 = echarts.init(document.getElementById('test01'));
let test2 = echarts.init(document.getElementById('test02'));
let test3 = echarts.init(document.getElementById('test03'));option && test1.setOption(option);
option && test2.setOption(option);
option && test3.setOption(option);this.linkageZoom(test1,[test2,test3])linkageZoom(test1, arr){test1.on('datazoom', function(params) {arr.forEach(item => {item && item.dispatchAction({ // 触发 dataZoom 事件type: 'dataZoom',zoomLock: true, // 锁定整个图表的缩放功能xAxisIndex: params.xAxisIndex, // xAxisIndex 为当前操作的 xAxisIndex,用于确定对应的 xAxis 对象yAxisIndex: params.yAxisIndex, // yAxisIndex 为当前操作的 yAxisIndex,用于确定对应的 yAxis 对象start: params.start, // start 为当前操作的时间范围起始值end: params.end // end 为当前操作的时间范围结束值});})})
}