ECharts使用dataZoom控制多个grid

发表于 分类于 / / Changyan：

项目中有个横柱图，需要用一个 dataZoom 去控制多轴数据范围，根据 官方文档 查询到解决方案，在此记录下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const option = [
  xAxis: [
    {...},
    {..., gridIndex: 1 }
  ],
  yAxis: [
    {...},
    {..., gridIndex: 1 }
  ],
  grid: [
    {...},
    {...}
  ],
  dataZoom: {
    ...,
    yAxisIndex: [0, 1], // 如果只有一条数据时柱体没有垂直居中时，记得吧所有y轴gridIndex索引都放进此数组中
  },
  series: [
    {...},
    {...},
    {..., xAxisIndex: 1, yAxisIndex: 1 }
  ]
]