echarts饼图点击图例事件第一次没反应，第二次才执行（angular版本）【问题笔记】

目录

1.需求描述：

2.实现方式： 

3.angular 具体实现：

4.问题描述：

5.解决方案：

---

1.需求描述：

点击饼图的图标，饼图中间的总数随着选中的图标动态变化。

2.实现方式： 

// 切换图例选中状态后的事件
chart.on('legendselectchanged', function (obj) {}

官方文档：Documentation - Apache ECharts

3.angular 具体实现：

ChartsChange() {
    let thisOption = this.option;
    let thisEchartsInstance = this.echartsIntance;

    // 解决重复触发
    thisEchartsInstance.off("legendselectchanged");

    // 切换图例选中状态后的事件
    thisEchartsInstance.on("legendselectchanged", function (params) {
      let total = 0;
      const legendSelectedArr = {};
      thisOption?.data?.forEach(element => {
        // 获取图例的选中状态，并存储在 legendSelectedArr 对象中，用于后面 计算总数判断 和 updateOption
        legendSelectedArr[element.name] = params.selected[element.name];
        // 计算被选择的总数
        if (params.selected[element.name]) {
          total += element.value;
        }
      });
      // 赋值总数
      thisOption.graphic.elements[0].style.text = total;
      // 赋值状态，否则更新option后，图例的选中状态会失效
      thisOption.legend.selected = legendSelectedArr;
      thisEchartsInstance.setOption(thisOption, true);
    });
  }
  
  <!-- 饼图 -->
<div
  echarts
  [options]="option"
  (chartInit)="onChartInitPie($event)"
  (click)="ChartsChange()"
></div>

4.问题描述：

饼图点击图例事件第一次没反应，第二次才执行

原因分析：

我觉得是第一次点击时，点击方法没有被图表实例对象注册

5.解决方案：

图表初始化时，调用一下点击事件的方法

onChartInitPie(ec: any) {
  this.echartsIntance = ec;
  this.updateEchartsIntanceOption();

  // chart 初始化的时候也初始化方法，否则方法第一次触发失效
  this.ChartsChange();
}

 参考：vue使用ECharts点击事件不能执行的坑（点击第一次没反应第二次才执行）_拷贝忍者 卡卡西的博客-CSDN博客