如何捕获ECharts堆叠折线图中areaStyle区域的点击事件

嗨，我之前也遇到过这个问题，折腾了一阵终于找到几个靠谱的解决办法，分享给你：

• 方案一：利用全局画布点击事件 + 坐标转换判断
  ECharts默认的series点击事件只会响应数据点，我们可以直接给图表的底层画布绑定点击事件，再通过坐标转换判断点击位置是否落在area区域内：

  const chart = echarts.init(document.getElementById('main'));
  // 绑定画布点击事件
  chart.getZr().on('click', (event) => {
    // 把像素坐标转换为对应系列的逻辑坐标
    const [xValue, yValue] = chart.convertFromPixel({ seriesIndex: 0 }, [event.offsetX, event.offsetY]);
    // 这里可以根据转换后的坐标，结合你的数据范围判断是否在area区域内
    // 比如对比当前xValue对应的系列数据y值，以及下方堆叠系列的y值（如果是堆叠图）
    console.log('点击位置对应的坐标：', xValue, yValue);
    // 进一步处理逻辑...
  });
  

  这个方法的好处是不需要修改原有图表配置，灵活性高，适合动态数据的场景。

• 方案二：给area区域添加透明markArea绑定事件
  我们可以在对应的series里添加一个完全透明的markArea，覆盖整个area区域，然后给markArea绑定点击事件：

  option = {
    // ...其他配置
    series: [{
      type: 'line',
      data: [/* 你的数据 */],
      areaStyle: { /* 原有区域样式 */ },
      markArea: {
        silent: false, // 必须设为false才能响应点击
        itemStyle: {
          color: 'rgba(0, 0, 0, 0)' // 完全透明，不影响原图表显示
        },
        // 设置markArea的范围，覆盖整个折线的area区域
        data: [[
          { xAxis: '第一个x轴值', yAxis: 0 }, // 左下角点
          { xAxis: '最后一个x轴值', yAxis: 'max' } // 右上角点，'max'会自动取该系列的最大值
        ]],
        emphasis: {
          itemStyle: {
            color: 'rgba(0, 0, 0, 0)' // 高亮状态也保持透明
          }
        }
      }
    }]
  };
  // 绑定markArea点击事件
  chart.on('markareaClick', (params) => {
    console.log('点击了area区域', params);
    // 这里可以根据params获取点击的系列、数据等信息
  });
  

  这个方法更直观，配置好后就能直接触发事件，不过如果是动态更新数据的话，需要重新计算markArea的范围。

• 方案三：自定义判断点击点是否在area路径内
  如果你需要更精确的判断，可以通过ECharts的API获取系列的绘制路径，然后判断点击点是否在路径内：

  chart.getZr().on('click', (event) => {
    const seriesIndex = 0;
    const seriesModel = chart.getModel().getSeriesByIndex(seriesIndex);
    const data = seriesModel.getData();
    // 获取系列的area绘制路径
    const areaPath = data.getLayout('areaPath');
    if (areaPath) {
      // 创建临时的Canvas路径对象，判断点击点是否在路径内
      const path = new echarts.graphic.Path();
      path.setPath(areaPath);
      const isInArea = path.containPoint([event.offsetX, event.offsetY]);
      if (isInArea) {
        console.log('点击到area区域了！');
      }
    }
  });
  

  这个方法精度最高，但需要注意不同ECharts版本的API可能略有差异，需要测试适配。

备注：内容来源于stack exchange，提问作者eKelvin