先来个效果图
如果你刚好需要实现这种效果,那么可以瞅一瞅了
我要开始水文了
如图所示,图中顶部部分文字乍一看好像是独立于柱状图,显示在最顶上,其实它也是由柱状图模拟而成. 只是吧图形相关属性做了隐藏,视觉上达到独立于图外
代码正文来了
{
// 不给name赋值,legend不会显示
// name:'',
type: 'bar',
// 隐藏当前数据在tootip中的显示,外层需要给tootip才能生效
tooltip: {
show: false
},
emphasis: {
focus: 'series'
},
label: {
show: true,
// label位置显示内部靠下
position: 'insideBottom',
color: '#fff',
fontSize: 12,
formatter: (params) => {
// 此处是重点,根据自己的需求,获取需要显示的总数
// return sum[params.name];
return '';
}
},
itemStyle: {
// 底色保持跟图形背景色一致,达到视觉上像独立于外面
color: '#090C15'
},
// 放在相关的组上
stack: 'a',
// 数值随便给就行,为了宽度最小建议给1,这样渲染出来就不会占什么位子
data: [1, 1]
}
通过js将上文的相关配置项放到series中相应的位置即可,如:是一条的堆叠柱状图,直接push在最后即可,多条的堆叠柱状图,需注意要放在显示的堆叠图的最上面一个
总结下吧
echarts本身是没提供显示多个label的,但通过相关技巧,是可以实现类似效果的,只看你能不能想到了