echarts不同维度图表的click事件互相的影响，高亮错位问题解决方案

不同维度图表中的 echarts 点击事件独立化

在使用 echarts 绘制图表时，我们经常需要处理不同图表中数据项点击事件的交互问题。如果图表之间存在关联，例如同一维度的数据映射，那么点击其中一个图表中的数据项可能会意外地触发另一个图表中相关数据项的突出显示。这可能导致混乱和误解，因此我们有必要寻求一种解决方案来解决这个问题。

问题剖析：echarts 的全局 click 事件

默认情况下，echarts 中的 click 事件是全局性的，这意味着当你在任何图表中点击任何数据项时，都会触发 click 事件，并且所有其他图表都会收到该事件。这使得在涉及多个维度图表的仪表板中很难隔离点击事件。

解决方案：使用 dispatchAction 设置局部 click 事件

为了将 click 事件设置为局部事件，我们需要使用 echarts 的 dispatchAction 方法。此方法允许我们向特定图表发送自定义事件，而不会影响其他图表。通过向图表发送一个指示忽略其他图表 click 事件的自定义事件，我们可以有效地隔离 click 事件。

以下是如何在不同维度图表中实现局部 click 事件：

// 创建散点图
const scatterChart = echarts.init(document.getElementById('scatter-chart'));

// 创建条形图
const barChart = echarts.init(document.getElementById('bar-chart'));

// 为散点图添加 click 事件监听器
scatterChart.on('click', function (params) {
  // 向条形图发送自定义事件，指示忽略点击事件
  barChart.dispatchAction({
    type: 'customEvent',
    data: {
      ignore: true
    }
  });
});

// 为条形图添加自定义事件监听器
barChart.on('customEvent', function (params) {
  // 检查是否需要忽略点击事件
  if (params.data.ignore) {
    return;
  }

  // 处理条形图的 click 事件
});

通过这种方法，当我们点击散点图中的数据项时，条形图将忽略 click 事件，反之亦然。

结论：提升图表交互体验

使用局部 click 事件可以大大提升不同维度图表中的交互体验。它允许我们隔离 click 事件，避免意外的高亮和干扰，从而创建更清晰、更直观的仪表板。

常见问题解答

1. 为什么我不能在 echarts 文档中找到 dispatchAction 方法？
   dispatchAction 方法是 echarts 的高级特性，因此没有在主要文档中介绍。但是，它可以在 echarts API 参考中找到。

2. 我可以将 dispatchAction 方法用于哪些类型的事件？
   dispatchAction 方法可以用于任何类型的自定义事件。它特别适用于需要在不同图表之间进行通信的场景。

3. 除了 click 事件，我还可以使用 dispatchAction 方法隔离哪些事件？
   dispatchAction 方法可以用于隔离任何类型的事件，包括 hover、legendselect 和 datazoom 事件。

4. 我需要使用自定义事件名称吗？
   对于 dispatchAction 方法，使用自定义事件名称不是必需的。但是，它有助于避免与其他事件的冲突，特别是当使用多个图表时。

5. 如何确保 dispatchAction 方法只发送到特定图表？
   dispatchAction 方法接受一个 instance 参数，它指定要发送事件到的图表实例。使用此参数，我们可以确保事件仅发送到所需的图表。