情况描述:在堆叠柱状图上,要展示列数据的总和,用户的操作上可能存在取消某个或多个图例,查看剩余图例的列数据总和。
最开始的做法是:将最后一类的label用formatter函数处理作为数据总和展示,使用参考如下:
这个做法呢,首先它是不能动态的计算列数据的总和的,而且当用户取消最后一类对应的图例时,最后一类的label也会一起隐藏(数据和便跟着消失了)。
所以要解决这个问题,我的思路是:绑定echats的图例的legendselectchanged事件,每次图例change都重新计算数据的总和(实现数据动态计算),封装的函数如下:
但是做到这里会发现,光给到计算动态是不够的,如果只给到最上面的柱子label,当用户取消了对应的图例,label就消失了,我立即想到,给列中的每一个数据都加上label,且计算从第一项到本身的总和,然后控制label的显隐来在效果上实现需求。
第一个重点:series中的每一个对象都要加上label(不加的话之后更新label更新不上),formatter函数随便写一个,默认给最上层的数据label的show为true,其他为false。
第二个重点:legendselectchanged事件,可以监听到图例变化时的已勾选图例list,利用已勾选的图例,可以知道哪个需要展示label,哪些不需要展示label。
第三个重点:legendselectchanged事件处理数据之后,重新setOption,更新到视图上去。
代码没有全部贴出来,由于我的需求还有目标值这一项(是在series的最后一个),所以部分for循环根据自身的情况做了一些调整。可参考下边的这篇文章。
思路来源:https://www.cnblogs.com/huaxiaguyuan/p/11097474.html