Echarts v5.5.0折线图区域点击事件不生效问题

需求：如图，点击折线图蓝色区域，触发点击事件

正常情况，直接给Echarts实例绑定click事件就完事了：

const bindChartEvents = () => {
  if (!myChart.value) return

  // 清除所有事件
  myChart.value.off('click')

  // 重新绑定点击事件
  myChart.value.on('click', handleClick)
}

之前在单系类图表中，一直这么写的，没问题，但在这个多轴系列中这么写就是不生效。

原因不明，可能是Echarts版本配置问题

方案一：

const bindChartEvents = () => {
  if (!myChart.value) return
  myChart.value.getZr().on('click', handleClick)
}

const handleClick = (params: any) => {
  // 点击坐标
  const pointInPixel = [params.offsetX, params.offsetY]
  // 判断点击是否在power系列上
  if (myChart.value?.containPixel({ seriesName: 'power' }, pointInPixel)) {
    // 获取点击位置对应的x轴数据
    const xIndex = myChart.value?.convertFromPixel({ seriesIndex: 0 }, [
      params.offsetX,
      params.offsetY
    ])[0]

    // 业务操作...
    console.log('Clicked on grid', xIndex)
  }
}

问题： 点击网格内的所有区域都会触发事件, 需求是点击网格中空白区域不触发

方案二：

triggerLineEvent: true // 线条和区域面积是否触发事件

完事儿!!!

正常绑定click事件就行, 查询/问AI搞半天, 最后1行代码, 差点裂开😭