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

ECh ar ts 是一个基于 Ja vaScri p t 的开源可视化库，用于创建各种交互式图表和地图。ECh ar t s 支持多种交互方式，包括点击事件和高亮事件。

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

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

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

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

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,
          });
        }
      });