Echarts堆叠图显示总数

本文介绍如何在柱状堆叠图中不仅显示每个柱内部的数据,还在每个柱上方显示总数的方法。通过新增一个不显示堆叠效果的‘柱’,并利用label的formatter属性来实现总数的动态计算与展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

遇到一个需求:柱状堆叠图除了每个“柱”内部显示数据,还要在每个“柱”上方显示总数。类似下图:

解决:堆叠图新增一个总数的“柱”,此“柱”的对应data全置为0,则不会显示总数的堆叠图,再使用label的formatter显示计算出的数据总数。

基本代码:

...
const totalStackBar = {
    name: '',
    type: 'bar',
    stack: 'stack',
    itemStyle: {
        normal:{
            label: {
                show: true,
                position: 'top' //数据显示在上方
            }
        }
    }
}
....
//获取到stack1 和 stack2的值后
totalStackBar.itemStyle.normal.label.formatter = (param) => {
    const data = stack1[param.dataIndex] + stack2[param.dataIndex];
    return data;
}
this.option.series.push(totalStackBar);
....

 

### 如何在 ECharts 堆叠柱状图显示总数 为了实现在 ECharts堆叠柱状图显示每组数据的总和,在配置项 `series` 中可以利用 `label` 属性来设置标签样式以及通过自定义 formatter 函数计算并展示数值。具体实现方式如下: 对于希望显示总数的情况,可以在最后一个系列的数据上应用特定的 label 配置[^1]。 ```javascript // 定义图表 option 对象 var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name:'Series A', type:'bar', stack: 'total', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'Series B', type:'bar', stack: 'total', data:[220, 82, 91, 154, 190, 230, 210], itemStyle:{ color:'#ec7c3b' } }, { // 这里是用于显示总数的特殊序列 name:'Total', type:'bar', stack: 'total', label: { show: true, position: 'top', formatter:function(params){ var total = 0; for (let i=0;i<params.dataIndex;i++){ total += params.seriesData[i].value; } return total + params.value; } }, data:[0, 0, 0, 0, 0, 0, 0], // 数据全部设为零,仅作为占位符 emphasis: { focus: 'none' // 不高亮此条目 }, tooltip:{show:false} // 关闭提示框组件 } ] }; ``` 上述代码片段展示了如何创建一个额外的序列专门用来放置总计数,并且设置了该序列中的每一根柱子的高度都为0,这样就不会影响到实际图形的表现形式;与此同时,借助于 `formatter` 方法动态获取对应位置上的累计求和结果,最终达到顶部标注的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值