Echarts堆叠图显示总数

最新推荐文章于 2025-05-30 08:59:48 发布

Hello_my_new_world

最新推荐文章于 2025-05-30 08:59:48 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/start_XUEBA/article/details/113774312

echarts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在柱状堆叠图中不仅显示每个柱内部的数据，还在每个柱上方显示总数的方法。通过新增一个不显示堆叠效果的‘柱’，并利用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);
....