深入理解 ECharts 中的点击事件监听器-摩杜云开发者社区

ECharts（百度开源的可视化图表库）是一款强大的数据可视化工具，广泛用于 Web 开发中。本文将深入探讨 ECharts 中的点击事件监听器，并解释一段代码的功能，该代码用于在点击图表时触发相应的操作。

1. ECharts 点击事件介绍

ECharts 提供了丰富的事件系统，其中之一就是点击事件。通过点击事件，开发者可以捕获用户与图表交互的瞬间，从而实现一些定制化的功能。在 ECharts 中，通过 getZr() 方法获取画布实例，然后使用 .on('click', callback) 方法添加点击事件监听器。

2. 理解代码功能

让我们来逐行解释上述代码的功能：

// 添加点击事件监听器
oneEchart.getZr().on('click', params => {
  const { target } = params
  // 判断点击的点在点击在折线的拐点 || 折线上
  if (target && target.z === 3) {
    const parent = params.target.parent.parent
    const seriesIndex = parent.__ecComponentInfo
      ? parent.__ecComponentInfo.index
      : parent.parent.__ecComponentInfo.index
    console.log(seriesIndex)
  }
})

oneEchart.getZr().on('click', params => {...}): 获取 ECharts 实例 oneEchart 的画布实例，并添加点击事件监听器。当用户点击图表时，将触发回调函数，参数 params 包含了事件相关的信息。
const { target } = params: 从 params 中解构出 target，表示用户点击的目标元素。
if (target && target.z === 3) {...}: 判断点击的点是否在折线的拐点或者折线上。这里通过检查 target.z 的值是否为 3，来判断用户点击的是否是折线图的拐点。
const parent = params.target.parent.parent: 获取点击元素的父级元素的父级元素，用于后续操作。这里的具体层级结构需要根据实际情况调整。
const seriesIndex = ...: 获取折线图系列的索引。通过访问父级元素的 __ecComponentInfo 属性，获取系列的索引信息。如果直接访问父级的父级元素仍无法获取索引，就访问更高层次的父级，直到找到包含索引信息的父级。
console.log(seriesIndex): 打印折线图系列的索引，以便开发者进行调试和进一步处理。

3. 总结

获取点击了折线图的哪条折线，echart版本5.1.2。网上大部分的代码都是不好用的，这个代码鼓捣了半天才出来，实测好用。