echarts点击与高亮事件经验小结

ECharts 是一个基于 JavaScript 的开源可视化库，用于创建各种交互式图表和地图。ECharts 支持多种交互方式，包括点击事件和高亮事件。

 点击事件可以在用户单击图表中的元素时触发，例如单击某个数据点或者某个 Legend 图例项时。下面是一个使用 ECharts 点击事件的示例代码：

myChart.on('click', function (params) {
    console.log(params);
});

上面的代码中，myChart 是 ECharts 实例的名称，on 方法是 ECharts 提供的绑定事件的方法。当用户单击图表中的元素时，该方法会自动触发回调函数，并传递一个参数 params，该参数包含了用户点击的元素的相关信息，例如数据值、坐标等。

 高亮事件则可以在用户将鼠标悬停在图表中的元素上时触发，例如将鼠标悬停在某个数据点或者某个 Legend 图例项上时。下面是一个使用 ECharts 高亮事件的示例代码：

myChart.on('mouseover', 'series', function (params) {
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: params.seriesIndex,
        dataIndex: params.dataIndex
    });
});

上面的代码中，使用 dispatchAction 方法来触发高亮操作，使得用户悬停的元素被高亮显示。 

需求：点击饼图，点击的部分高亮（最多只会有一块区域是处于高亮状态）。并将数据传递到下拉框。点击选中下拉框某个值，并将数据传递给饼图。实现数据的上钻和下钻。

代码实现（部分代码）：

1.点击饼图

  this.myChart.off("click"); //点击前先取消之前的点击事件
      //   echarts中this指向的问题
      // echarts点击事件里的this指向的是echarts，但我们需要的是vue实例里的数据，因此不改变this指向是取不到值的
      let that = this;
      that.myChart.on("click", function (params) {
        console.log(params.dataIndex, "pppppppp");
        // 数据下钻
        that.value1 = params.dataIndex;
        // 需求：饼图只能有一块是高亮的，点击前找到一个高亮的就把他还原
        let _index = that.list.findIndex((item) => {
          return item.hightLight === true;
        });
        if (_index > -1) {
          that.myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: _index,
          });
        }
        that.list.forEach((item, index) => {
          if (item.id === params.dataIndex) {
            if (item.hightLight === true) {
              (item.hightLight = false),
                that.myChart.dispatchAction({
                  type: "downplay",
                  seriesIndex: 0,
                  dataIndex: params.dataIndex,
                });
            } else {
              (item.hightLight = true),
                that.myChart.dispatchAction({
                  type: "highlight",
                  seriesIndex: 0,
                  dataIndex: params.dataIndex,
                });
            }
          } else {
            item.hightLight = false;
          }
        });
      });

2.点击选择器

this.list.forEach((item, index) => {
        let _index = this.list.findIndex((item) => {
          return item.hightLight === true;
        });
        if (_index > -1) {
          this.list[_index].hightLight = false;
          this.myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: _index,
          });
        }
        if (item.hightLight === false) {
          this.list[this.value1].hightLight = true;
          this.myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: this.value1,
          });
        }
      });

需要注意的点： echarts中this指向的问题

在 ECharts 中，this 的指向会根据不同的上下文发生变化。在事件处理函数中，this 会指向当前被触发事件的组件实例。而在一般的 JavaScript 代码中，this 则指向调用当前函数的对象。

解决的方法：

方法一：如果需要在事件处理函数中使用外部的变量或方法，可以使用闭包或者使用 ES6 的箭头函数来解决上下文问题。箭头函数没有自己的 this，所以在箭头函数中使用 this 时，其指向与外层作用域相同。

方法二：如果使用普通函数，则需要在事件处理函数内部保存外部的 this。如上图

最终的效果

饼图点击联动