HighCharts中如何点击被上层面积图遮挡的下层系列面积图？

这个问题我之前做项目时也碰到过，其实主流图表库基本都有现成的配置可以解决这种上层元素遮挡底层点击的问题，给你几个实用的思路：

1. 让上层系列不拦截点击事件 #

这是最直接的解决方案，给覆盖在上方的绿色面积图设置一个属性，让它忽略鼠标交互，这样点击事件就会“穿透”到下层的蓝色系列上。

比如在Highcharts中，你可以给绿色系列添加pointerEvents: 'none'配置：

series: [
  {
    type: 'area',
    color: 'green',
    data: [/* 你的数据 */],
    pointerEvents: 'none' // 关键：让该系列不响应鼠标事件
  },
  {
    type: 'area',
    color: 'blue',
    data: [/* 你的数据 */],
    point: {
      events: {
        click: function() {
          alert('Hello World');
        }
      }
    }
  }
]

如果用的是ECharts，则可以给绿色系列设置silent: true，效果是一样的：

option = {
  series: [
    {
      type: 'area',
      color: 'green',
      data: [/* 你的数据 */],
      silent: true // 禁止该系列响应鼠标事件
    },
    {
      type: 'area',
      color: 'blue',
      data: [/* 你的数据 */],
      onClick: function() {
        alert('Hello World');
      }
    }
  ]
}

2. 手动检测点击位置对应的系列 #

如果你的图表库不支持上述配置，还可以通过监听图表容器的点击事件，手动获取点击坐标，再调用图表库的API判断该位置下的所有系列，找到蓝色系列后触发弹窗逻辑。

比如某些库提供了getPointsAtPosition或类似方法，能返回点击坐标对应的所有数据点，你只需要筛选出蓝色系列的点，再执行你的弹窗代码即可。

3. 调整系列绘制顺序（可选） #

如果视觉上允许，你可以把蓝色系列的绘制顺序调整到绿色系列上方，这样蓝色系列就不会被遮挡，点击自然能触发。不过这个方法只适用于绿色系列不需要始终在上层的场景，要是视觉要求绿色必须覆盖蓝色，就不建议用这个方案。

不同图表库的具体配置名称可能略有差异，但核心思路都是围绕“让上层元素不拦截点击”或者“手动识别点击目标”展开的，你可以去对应图表库的官方文档里搜索「pointer events」「silent」「交互穿透」这类关键词，就能找到更贴合你使用场景的配置。

内容的提问来源于stack exchange，提问作者João Vitor Corrêa