目录
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 对象中，用于后面 计算总数判断 和 updateOptionlegendSelectedArr[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);});}<!-- 饼图 --><divecharts[options]="option"(chartInit)="onChartInitPie($event)"(click)="ChartsChange()"></div>
4.问题描述：
饼图点击图例事件第一次没反应，第二次才执行
原因分析：
我觉得是第一次点击时，点击方法没有被图表实例对象注册
5.解决方案：
图表初始化时，调用一下点击事件的方法
onChartInitPie(ec: any) {this.echartsIntance = ec;this.updateEchartsIntanceOption();// chart 初始化的时候也初始化方法，否则方法第一次触发失效this.ChartsChange();}
参考：vue使用ECharts点击事件不能执行的坑（点击第一次没反应第二次才执行）_拷贝忍者 卡卡西的博客-CSDN博客
