Echarts 折线图点击折线区域(包含圆点)触发事件

和上一篇相关，这次是对于折线图的处理，也是基于 getZr() 这个方法来使用的

需求分析

产品想要在折线图上点击某个折线，触发事件，不止是在折线图的拐点，那处理方法我想了两种，如下：

1. 获取点击位置，判断点击位置是否在某条折线的集合上

此方法有实践过，但没有成功，因为我拿不到某条折线的所有点的集合，或者说点太多了，所以思路也不是很正确

2. 获取点击位置，返回这个点的信息，在这些信息里找，看有没有属于这条折线的信息

所以最终的实现确实是这种方式，当然，是基于getZr()获取点击坐标的方式

那myChart.on('click', function(){}) 这个方法不是也可以点击获取信息吗，怎么不行呢，没错，其实就是不行，这个事件点击获取的都是 圆点的 信息，拿不到折线的信息，所以，我们还是要基于 getZr() 方法实现

实现

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['邮件营销', '联盟广告']
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
    ]
};
myChart.getZr().on('click', function(params) {
  // 获取像素坐标点
  const pointInPixel = [params.offsetX, params.offsetY]
  const { target, topTarget } = params
  // 判断点击的点在  点击在折线的拐点 || 折线上
  if (target?.z === 2 || topTarget?.z === 2) {
  // 获取这条折线的 信息 也就是 index
  // 如果是拐点，直接读取 target.seriesIndex
  // 如果是折线上的点，读取 topTarget 对象下的继续寻找parent的信息的index
    const axs = target
      ? target.seriesIndex
      : topTarget.parent?.parent?.__ecComponentInfo?.index
    console.log(axs)
  }
})
// 将可以响应点击事件的范围内，鼠标样式设为pointer--------------------
myChart.getZr().on('mousemove', function(params) {
  const { topTarget } = params
  // 给折线的鼠标悬浮 变为 小手
  if (topTarget?.z === 2) {
    myChart.getZr().setCursorStyle('pointer')
  }
})

其实代码中注释也说的比较清楚了，步骤如下：

1. 找到点击点的坐标点
2. 判断在图表内 && 在折线或折线拐点上

这一步并不好判断，我也是不停打点击，在控制台拿到params，对比折线点和非折线点，发现的不同点，
这里要详细说一下topTarget这个属性，不只有折线点才有，而是所有的线都有，比如x轴，y轴，图表中的基准线，
target.z === 2 表示拐点
并且还要满足topTarget.z === 2 这个才是折线上的点，就排除了基准线的点

3. 确定了折线&折线拐点， 接下来就是获取这个点的所处折线的index信息

如果是拐点，直接读取 target.seriesIndex；
如果是折线上的点，读取 topTarget 对象下的继续寻找parent的信息的index。这个折线上的点的 信息真的是很难找，我也是把每个属性都展开，仔细看，才发现的。

4. 找到了就可以做一些业务上的操作
5. 设置折线的鼠标悬浮为 小手 这个判断条件弱一些，因为拐点本身就是有 pointer 标志的

我最终就是这么处理的，因为在网上也没有找到更好的方法，所以就自己查找属性，发现了不同点。

或许还有其他的解决方法，如果有小可爱们有更好的方法，欢迎留言哦~