echarts 如何设置（dataZoom）多个图表的数据区域，使其在链接响应中一起缩放
最编程
2024-04-10 07:11:49
...
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 为当前操作的时间范围结束值
});
})
})
}