如何在ECharts中实现点击折线非数据点位置选中对应折线图

你当前调用的myChart.getZr()获取的是ECharts的全局ZRender渲染层，可以监听到整个画布的所有点击事件，不受数据点位置限制，刚好可以满足你的需求。

具体实现逻辑和可直接复用的代码如下：

myChart.getZr().on('click', params => {
  // 获取点击位置的画布像素坐标
  const clickPoint = [params.offsetX, params.offsetY]
  // 先判断点击位置是否在折线图的网格坐标系内
  if (myChart.containPixel('grid', clickPoint)) {
    const seriesList = myChart.getOption().series
    // 遍历所有折线系列，匹配点击位置归属的折线
    for (let seriesIdx = 0; seriesIdx < seriesList.length; seriesIdx++) {
      // 校验当前点击位置是否属于第seriesIdx条折线的触发范围
      const matchSeries = myChart.containPixel({ seriesIndex: seriesIdx }, clickPoint)
      if (matchSeries) {
        // 触发和官方悬停完全一致的高亮效果
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: seriesIdx
        })
        // 可选：置灰其他未选中的折线
        for (let otherIdx = 0; otherIdx < seriesList.length; otherIdx++) {
          if (otherIdx !== seriesIdx) {
            myChart.dispatchAction({
              type: 'downplay',
              seriesIndex: otherIdx
            })
          }
        }
        break
      }
    }
  }
})

// 可选扩展：点击坐标系外的空白区域，取消所有折线的选中高亮
myChart.getZr().on('click', params => {
  const clickPoint = [params.offsetX, params.offsetY]
  if (!myChart.containPixel('grid', clickPoint)) {
    myChart.dispatchAction({
      type: 'downplay'
    })
  }
})

核心逻辑说明：

• containPixel是ECharts内置的坐标匹配API，会自动根据折线的默认触发阈值判断点击位置是否落在折线范围内，不需要手动计算折线路径坐标
• dispatchAction调用内置的highlight和downplay交互行为，效果和原生的鼠标悬停聚焦效果完全一致，不需要额外写样式配置

如果你需要固定选中状态、不被后续的鼠标悬停覆盖，可以额外声明一个变量存储当前选中的系列索引，监听全局的mouseover事件判断如果有已选中的系列，就阻止默认的高亮逻辑即可。

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