Echarts多图表配置DataZoom仅第一个生效如何解决？

问题原因 #

你的dataZoom配置未指定关联的坐标轴索引，默认仅关联索引为0的x轴，因此只对第一个图表生效。

解决方法 #

根据使用需求选择以下两种配置方案即可：

方案1：四个图表同步缩放（滑动一个图表其余同步变动） #

仅需保留1个dataZoom配置，指定关联所有x轴即可：

dataZoom: [
  {
    type: 'inside',
    xAxisIndex: [0, 1, 2, 3]
  }
]

方案2：四个图表独立缩放（每个图表的缩放操作互不影响） #

每个dataZoom配置单独指定对应关联的坐标轴索引：

dataZoom: [
  {
    type: 'inside',
    xAxisIndex: 0,
    yAxisIndex: 0
  },
  {
    type: 'inside',
    xAxisIndex: 1,
    yAxisIndex: 1
  },
  {
    type: 'inside',
    xAxisIndex: 2,
    yAxisIndex: 2
  },
  {
    type: 'inside',
    xAxisIndex: 3,
    yAxisIndex: 3
  }
]

补充说明 #

xAxisIndex 是dataZoom的核心配置项，用来声明当前缩放组件控制的x轴索引，传数字表示控制单个坐标轴，传数组表示同时控制多个坐标轴。未配置时默认值为0，因此只会作用于第一个x轴对应的图表。

内容的提问来源于stack exchange，提问作者Jaeyeon HONG