如何实现ECharts多图表联动显示垂直hover标线？

云原生阿岚

2026-7-13

实现ECharts双图表Hover同步垂直标线

我用ECharts绘制了两个上下布局的图表，当前鼠标hover时只有单个图表显示垂直标线，想要实现hover时两个图表同步显示基于X轴的垂直标线。

原始配置代码如下：

data = [
    [1,82.60277,"VO",1441.74],
    [2,82.60302,"VI",1441.87],
    [3,82.60327,"VA",1441.97],
    [4,82.60352,"VO",1442.07],
    [5,82.60377,"VO",1442.19],
    [6,82.60402,"VO",1442.24],
    [7,82.60427,"VI",1442.25],
    [8,82.60452,"VO",1442.22],
    [9,82.60477,"VO",1442.13],
    [10,82.60502,"VO",1442.09],
    [11,82.60527,"VO",1442.17],
    [12,82.60552,"VO",1442.19],
    [13,82.60577,"VO",1442.16],
    [14,82.60602,"VO",1442.19],
    [15,82.60627,"VO",1442.19],
    [16,82.60652,"VO",1442.17],
    [17,82.60677,"VO",1442.06],
    [18,82.60702,"VO",1441.98],
    [19,82.60727,"VO",1442],
    [20,82.60752,"VR",1442.15]
]

option = {
  width: '100%',
  grid: [
    {
      left: 22,
      right: 0,
      top: 60,
      bottom: '52%',
    },
    {
      left: 22,
      right: 0,
      top: '52%',
      bottom: 60,
    },
  ],
  dataset: [
    {
      dimensions: ['sscount', 'pk', 'severity', 'value'],
      source: data,
    },
    {
      transform: {
        type: 'sort',
        config: { dimension: 'pk', order: 'asc' },
      },
    },
    {
      transform: {
        type: 'sort',
        config: { dimension: 'pk', order: 'asc' },
      },
    },
  ],
  xAxis: [
    {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      axisLabel: {
        show: false,
        color: 'red',
        showMaxLabel: false,
        margin: 5
      },
      axisTick: { show: true },
      axisLine: { show: false },
      alignTicks: true
    },
    {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      gridIndex: 1,
      axisLabel: {
        show: true,
        formatter: (value) => Number(value).toFixed(3),
        color: 'gray',
        showMaxLabel: false,
        showMinLabel: false,
        margin: 8
      },
      axisTick: { show: false },
      axisLine: { show: true },
      alignTicks: true
    },
  ],
  yAxis: [
    {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
    },
    {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      gridIndex: 1,
    },
  ],
  dataZoom: [
    {
      type: 'inside',
      xAxisIndex: [0, 1],
      maxSpan: 100,
      minSpan: 0.05,
    },
    {
      type: 'slider',
      xAxisIndex: [0, 1],
      show: true,
      height: 40,
      left: 0,
      top: 4,
      filterMode: 'none',
    },
  ],
  series: [
    {
      type: 'line',
      datasetIndex: 1,
      xAxisIndex: 0,
      yAxisIndex: 0,
      showSymbol: true,
      symbolSize: 1,
      hoverAnimation: false,
      animation: false,
      encode: {
        tooltip: [0, 1, 2, 3],
        x: 'pk',
        y: 'value',
      },
      lineStyle: {
        width: 1,
      },
    },
    {
      type: 'line',
      datasetIndex: 2,
      xAxisIndex: 1,
      yAxisIndex: 1,
      showSymbol: true,
      symbolSize: 1,
      hoverAnimation: false,
      animation: false,
      encode: {
        tooltip: [0, 1, 2, 3],
        x: 'pk',
        y: 'value',
      },
      lineStyle: {
        width: 1,
      },
    },
    
  ],
  tooltip: {
    trigger: 'axis',
  },
}

解决方案

要实现双图表同步垂直标线，核心是利用ECharts的axisPointer的link属性关联两个X轴，同时调整相关配置，具体修改后的完整代码如下：

data = [
    [1,82.60277,"VO",1441.74],
    [2,82.60302,"VI",1441.87],
    [3,82.60327,"VA",1441.97],
    [4,82.60352,"VO",1442.07],
    [5,82.60377,"VO",1442.19],
    [6,82.60402,"VO",1442.24],
    [7,82.60427,"VI",1442.25],
    [8,82.60452,"VO",1442.22],
    [9,82.60477,"VO",1442.13],
    [10,82.60502,"VO",1442.09],
    [11,82.60527,"VO",1442.17],
    [12,82.60552,"VO",1442.19],
    [13,82.60577,"VO",1442.16],
    [14,82.60602,"VO",1442.19],
    [15,82.60627,"VO",1442.19],
    [16,82.60652,"VO",1442.17],
    [17,82.60677,"VO",1442.06],
    [18,82.60702,"VO",1441.98],
    [19,82.60727,"VO",1442],
    [20,82.60752,"VR",1442.15]
]

option = {
  width: '100%',
  grid: [
    {
      left: 22,
      right: 0,
      top: 60,
      bottom: '52%',
    },
    {
      left: 22,
      right: 0,
      top: '52%',
      bottom: 60,
    },
  ],
  dataset: [
    {
      dimensions: ['sscount', 'pk', 'severity', 'value'],
      source: data,
    },
    {
      transform: {
        type: 'sort',
        config: { dimension: 'pk', order: 'asc' },
      },
    },
    {
      transform: {
        type: 'sort',
        config: { dimension: 'pk', order: 'asc' },
      },
    },
  ],
  xAxis: [
    {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      axisLabel: {
        show: false,
        color: 'red',
        showMaxLabel: false,
        margin: 5
      },
      axisTick: { show: true },
      axisLine: { show: false },
      alignTicks: true,
      // 配置X轴垂直标线样式
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#ccc',
          width: 1,
          type: 'solid'
        }
      }
    },
    {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      gridIndex: 1,
      axisLabel: {
        show: true,
        formatter: (value) => Number(value).toFixed(3),
        color: 'gray',
        showMaxLabel: false,
        showMinLabel: false,
        margin: 8
      },
      axisTick: { show: false },
      axisLine: { show: true },
      alignTicks: true,
      // 配置X轴垂直标线样式
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#ccc',
          width: 1,
          type: 'solid'
        }
      }
    },
  ],
  yAxis: [
    {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
    },
    {
      type: 'value',
      min: 'dataMin',
      max: 'dataMax',
      gridIndex: 1,
    },
  ],
  dataZoom: [
    {
      type: 'inside',
      xAxisIndex: [0, 1],
      maxSpan: 100,
      minSpan: 0.05,
    },
    {
      type: 'slider',
      xAxisIndex: [0, 1],
      show: true,
      height: 40,
      left: 0,
      top: 4,
      filterMode: 'none',
    },
  ],
  // 核心：关联两个X轴的指示器，实现同步标线
  axisPointer: {
    link: [
      {
        xAxisIndex: [0, 1]
      }
    ]
  },
  series: [
    {
      type: 'line',
      datasetIndex: 1,
      xAxisIndex: 0,
      yAxisIndex: 0,
      showSymbol: true,
      symbolSize: 1,
      hoverAnimation: false,
      animation: false,
      encode: {
        tooltip: [0, 1, 2, 3],
        x: 'pk',
        y: 'value',
      },
      lineStyle: {
        width: 1,
      },
    },
    {
      type: 'line',
      datasetIndex: 2,
      xAxisIndex: 1,
      yAxisIndex: 1,
      showSymbol: true,
      symbolSize: 1,
      hoverAnimation: false,
      animation: false,
      encode: {
        tooltip: [0, 1, 2, 3],
        x: 'pk',
        y: 'value',
      },
      lineStyle: {
        width: 1,
      },
    },
    
  ],
  tooltip: {
    trigger: 'axis',
    // 可选：设置交叉标线，同时显示水平和垂直指示
    axisPointer: {
      type: 'cross'
    }
  },
}

关键修改说明

全局axisPointer.link配置：添加该配置将两个X轴（索引0和1）关联，实现hover时标线同步显示。
X轴单独配置axisPointer：给每个X轴设置统一的垂直标线样式，可根据需求调整颜色、宽度等参数。
Tooltip优化：将axisPointer.type设为cross，可同时显示水平和垂直标线，若只需垂直标线可改为line。

修改完成后，鼠标hover任意一个图表时，两个图表会同步显示基于X轴的垂直标线，达到预期效果。

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

如何实现ECharts多图表联动显示垂直hover标线？

解决方案 #

关键修改说明 #

解决方案

关键修改说明