Echarts柱状图堆叠显示总数
网上看了很多方法不是我想要的,自己简单的想了想并记录一下.
直接上代码。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//堆叠用stack 相同即可堆叠 顶部显示数据可以自己定义 { name: 'N上', color: '#77a5d3', type: 'bar', stack: 'N', data: this.ElectrodeUpN, }, { name: 'N下', color: '#77a5d3', type: 'bar', stack: 'N', data: this.ElectrodeDownN, itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: 'black', fontSize: 10, }, formatter: function (params) { if (that.count > 11) { that.count = 0 } else { that.count++ } if (params.value !== '') { params.value = Number(params.value) } if (that.ElectrodeUpN[that.count - 1] !== '') { that.ElectrodeUpN[that.count - 1] = Number( that.ElectrodeUpN[that.count - 1] ) } return params.value + that.ElectrodeUpN[that.count - 1] }, }, }, }, },
两个数据都是属于堆栈N的,formatter属性中的方法经过实验会循环调用的次数是根据你的data数组的长度,思路就是用一个计数器count每次进入这个方法就加一,用params.value加上另一个的数据即arr[count] 这样就可以显示总和了.计数器需要清零,这边直接赋值给1,这边定义的数据都是字符串,目的是为了当总数为0的时候不显示总数.美化效果.如果不是堆叠图,将formatter属性删除即可.