echarts在使用中往往会遇到需要展示总量信息的情况,比较典型的就是3维统计的堆叠柱状图
堆叠是在柱状图的基础上,给几项设置同一stack来实现的。不考虑在tips中实现总和,有两种方式可以实现总和显示。
第一种:
原理:在原本堆叠的柱状图基础上,再堆叠一项,其值是各项之和。显然,这样就会变成多出一个与下边高度相等的柱形。然后我们设置这一项的label的position为insideBotton(如果是左右横向分布则是insideLeft),这样总量就显示在了原始项的顶部。最后,我们设置总和项的颜色透明(rgba(128, 128, 128, 0))即可。
优化:该方法会把原先的坐标给拉长两倍,即会有一半的区域是空白的没有图像的。比如,原先的总和是100,现在再加上一个100,就是一共200的刻度了。可以使用缩进,使图表整体向上(横向则是向右)缩进50%。对应的设置项是
grid: {
left: "3%",
right: "8%",
bottom: "3%",
containLabel: true
}
第二种:
原理:在原本堆叠的柱状图的旁边,再起一个总和的柱形,显然这个柱形和原本的柱形的高度是相同的,然后我们将其平移(barGap: '-100%'),使其与原本的柱形重合,这样,最终的效果就是一个柱形了,高度也不会加倍。
优化:对于echarts的渲染,我们知道,是根据配置项绘制的canvas,而绘制的顺序就是我们代码书写的顺序。也就是说,如果我们将总和放在后边,那么就会是总和的柱形覆盖原本的柱形,原本柱形的颜色就看不到了。解决办法有2个: