总和"/>
echarts 堆叠柱状图顶部显示总和
用echarts实现了一个堆叠图要求能够在每个柱状图上显示总数,参考了网上的一些办法,也踩了一些坑
方法一
代码
series: [{name: n[0], //完成,type: 'bar',barMaxWidth: 50, //最大宽度stack: 'sum',itemStyle: {normal: {color: '#15c7bd'}},data: data1},{name: n[1], //未完成type: 'bar',stack: 'sum',itemStyle: {normal: {color: '#999999'}},data: data2},{name: '总数', // 总数显示,生成一个总数的柱状图,将颜色设为透明, type: 'bar', // label将位置设备内部底部,造成一个总数显示在stack: 'sum', // 柱状图上方的假象label: {normal: {offset: ['50', '80'],show: true,position: 'insideBottom',formatter: '{c}', // 显示的总数textStyle: { color: '#000' }}},itemStyle: {normal: {color: 'rgba(128, 128, 128, 0)' // 柱状图颜色设为透明}},data: data3}]
效果如下
有个问题,虽然实现了效果,但是柱状图只是透明,而实际上还在,导致了y轴自适应的坐标为最大值的2倍,不是很好
网上找了优化的方法,试了一下,有一定效果但是不知道是不是我的问题,还是有问题,写出来大家参考一下
优化方法一:该方法会把原先的坐标给拉长两倍,即会有一半的区域是空白的没有图像的。比如,原先的总和是100,现在再加上一个100,就是一共200的刻度了。可以使用缩进,使图表整体向上(横向则是向右)缩进50%。对应的设置项是
效果如下
可以看到,问题就是虽然缩进了,但是y轴时不闭合的,实现了效果,但是不完美
方法二:
原理:在原本堆叠的柱状图的旁边,再起一个总和的柱形,显然这个柱形和原本的柱形的高度是相同的,然后我们将其平移(barGap: '-100%'),使其与原本的柱形重合,这样,最终的效果就是一个柱形了,高度也不会加倍。
优化:对于echarts的渲染,我们知道,是根据配置项绘制的canvas,而绘制的顺序就是我们代码书写的顺序。也就是说,如果我们将总和放在后边,那么就会是总和的柱形覆盖原本的柱形,原本柱形的颜色就看不到了。解决办法有2个:
1.将总和放在前边绘制,使用堆叠来覆盖总和的柱形;
2.总和在后边,设置总和的柱形的颜色为透明(同第一种方法中的设置)。
除此之外,对于总和文字的显示,如果我们设置显示在外部,那么就可能会出现超出可见区域的现象,处理方法同第一种方案中,调整grid。另外,对于总和的label和原始数据的label,要设置不同的position来避免重叠。如果想要总和看起来明显一些,可以给总和的柱形添加一个border。对于数据个数比较多又容易出现0导致重叠的问题,可以采用下边的0不显示或者如果position已经没办法比较重叠时,可以使用拼接换行符、值先按比例放大以扩大图形争取到空间,在显示文字的时候再按同比例缩小以争取现在来解决。
(参考了博客.html)
series: [{name: n[0],//完成,type: 'bar',barMaxWidth: 50,//最大宽度stack: 'sum', itemStyle: {normal: {color: '#15c7bd'}},data: data1},{name: n[1],//未完成type: 'bar',stack: 'sum',itemStyle: {normal: {color: '#999999'}},data: data2},{name: '总数', type: 'bar', barGap: '-100%', // 左移100%,stack不再与上面两个在一列label: { normal: {show: true,position: 'top', // 位置设为topformatter: '{c}',textStyle: { color: '#000' }}},itemStyle: {normal: {color: 'rgba(128, 128, 128, 0)' // 仍为透明}},data: data3}]
就是新增一总数列,上面放一个label显示总数,position设为top,再左移,由于颜色为透明,因此不会覆盖原有的,当然如果放在完成,已完成的前面,颜色可以不为透明
可以·看到,有效果,但是有个问题是我的x轴不是固定的,柱状图宽度会随着数量多少进行改变,所以需要把柱状图设为固定宽度,所以这种方法也不适合我,当然由于是找的方法,所以我也没仔细研究,应该可以优化
方法三
series: [{name: n[0],//完成,type: 'bar',barMaxWidth: 50,//最大宽度stack: 'sum',itemStyle: {normal: {color: '#15c7bd'}},data: data1},{name: n[1],//未完成type: 'bar', stack: 'sum',itemStyle: {normal: {color: '#999999'}},data: data2},{name: '总数',type: 'bar',stack: 'sum', // 与上面为一列label: {normal: {show: true,position: 'top',formatter: '{c}',textStyle: { color: '#000' }}},itemStyle: {normal: {color: 'rgba(128, 128, 128, 0)'}},data:[["1",0], ["2",0], ["3",0], ["4",0], ["5",0], ["6",0],["7",0], ["8",0], ["9",0], ["10",0],["11",0], ["12",0]] // 数据默认值为0}]
// 使用刚指定的配置项和数据显示图表。var series = option["series"];var fun = function (params) {var data4 = 0;for (var i = 0, l = series.length; i < l; i++) {data4 += series[i].data[params.dataIndex]}return data4}//加载页面时候替换最后一个series的formatterseries[series.length - 1]["label"]["normal"]["formatter"] = fun
解释一下,将总数一列所有数据设为0(根据x轴参数,这里只是举例,写死了各项数据),然后采用function给每一项赋值,替换fomatter,参考博客,详细看原博客,试过,可行,另一个类似的博客
.html 都可以借鉴
这里的数据由于项目上的数据是字符串,转一下就好了,同时我的数据中已经有了总数,所以数据有些对不上,但是方法是可行的
方法四
由方法三启示得来的,既然可以方法四重新赋值,那么干脆直接给未完成重新赋值一个label为总数,去掉总数这一列
用echarts中label的formatter属性就可以实现了,formatter采用回调函数的格式,有一个参数是params,这是个对象,有一个指向当前数据索引的dataIndex属性,根据这个属性可以找到堆积柱状图中的数据
series: [{name: n[0],//完成,type: 'bar',barMaxWidth: 50,//最大宽度stack: 'sum',itemStyle: {normal: {color: '#15c7bd'}},data: data1},{name: n[1],//未完成 type: 'bar',stack: 'sum',label: {normal: { // 重写未完成label,通过计算属性重新给formatter赋值,返回show: true, // 计算的总数position: 'top',formatter: function (params) {return params.value + data1[params.dataIndex]},textStyle: { color: '#000' }}},itemStyle: {normal: {color: '#999999'}},data: data2}]
效果如下
四种方法,仅供参考,个人感觉方法四较为便捷
更多推荐
echarts 堆叠柱状图顶部显示总和
发布评论