echart柱状图堆叠总计显示

最新推荐文章于 2024-07-31 14:40:54 发布
最新推荐文章于 2024-07-31 14:40:54 发布
阅读量3.6k 收藏 2
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a15206087013/article/details/108706372
版权

本文主要记录一下使用echart的柱状图堆叠时，需要在柱状图顶部显示总计数值的问题。参考一篇文章的实现，它的实现方式是替换最后一列的formater属性来达到实现总计的方式。我的实现方式是使用再堆叠一个柱状图的形式来显示标签，具体为 颜色为透明色，标签位于内部下方(insideBottom)，然后是重写tooltip的formatter(使其不显示总计的数值)，最后就是在触发legend切换时，更换option.缺点是切换legend触发事件时需要重新设置option并更改总计数值的逻辑。
一.结果
在这里插入图片描述

二.代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts1</title>
    <!-- 引入 echarts.js -->
     <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.0.0/echarts.min.js"></script>
	  <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
	
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1600px;height:800px;"></div>
     <script type="text/javascript">    
	 
	  function formatNum(strNum) {
            if (strNum.length <= 3) {
                return strNum;
            }
            if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
                return strNum;
            }
            var a = RegExp.$1,
                b = RegExp.$2,
                c = RegExp.$3;
            var re = new RegExp();
            re.compile("(\\d)(\\d{3})(,|$)");
            while (re.test(b)) {
                b = b.replace(re, "$1,$2$3");
            }
            return a + "" + b + "" + c;
        }

	 
		var heavyIn = [100,200,300,400,500];
		var heavyOut = [600,400,200,100,460];
		var emptyIn = [300,100,200,200,300];
		var emptyOut = [420,230,280,320,480];
		var sumIn =[];
		var sumOut =[];
		for(var i in heavyIn)
			sumIn.push(heavyIn[i]+emptyIn[i]);
		for(var i in heavyOut)
			sumOut.push(heavyOut[i]+emptyOut[i]);
        var myChart7 = echarts.init(document.getElementById("main"));
                var colorList = ['#5ad9a6', '#cef2e4', '#ceddfe', '#7babff']
              

                var left = '7.85%';
                var right = '3%';
              


                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params) {
                            var res = '<div><p>' + params[0].name + '</p ></div>';
                            for (var i = 0; i < params.length; i++) {

                                if (i == 4 || i == 5)
                                    ;
                                else {
                                    res += "<p><font color=" + params[i].color + ">● " + "</font>" + params[i].seriesName + ':' + params[i].data + '</p >';
                                }
                            }
                            return res;
                        }
                    },
                    legend: {
                        data: ['进口重箱', '进口空箱', '出口重箱', '出口空箱'],
                        right: '2%',
                    },
                    grid: {
                        left: left,
                        right: right,
                        top: '15%',
                        bottom: '10%',
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                color: '#666666'
                            },
                            axisTick: {
                                show: false
                            }
                        }
                    ],
                    series: [
                        {
                            name: '进口重箱',
                            type: 'bar',
                            data: heavyIn,
                            stack: '进口',
                            color: colorList[3],

                            barGap: '80%'
                        },
                        {
                            name: '进口空箱',
                            type: 'bar',
                            stack: '进口',
                            data: emptyIn,
                            color: colorList[2],

                            barGap: '80%'
                        },
                        {
                            name: '出口重箱',
                            type: 'bar',
                            stack: '出口',
                            data: heavyOut,
                            color: colorList[0],

                            barGap: '80%'
                        },
                        {
                            name: '出口空箱',
                            type: 'bar',
                            stack: '出口',
                            data: emptyOut,
                            color: colorList[1],

                            barGap: '80%'
                        },
                        {
                            name: '进口总量',
                            type: 'bar',
                            stack: '进口',
                            data: sumIn,
                            color: 'transparent',
                            label: {
                                position: 'insideBottom',
                                show: true,

                                color: '#666666',
                                formatter: function (param) {

                                    return formatNum(param.value);

                                }
                            },


                        },
                        {
                            name: '出口总量',
                            type: 'bar',
                            stack: '出口',
                            data: sumOut,
                            color: 'transparent',
                            label: {
                                show: true,
                                position: 'insideBottom',
                                color: '#666666',
                                formatter: function (param) {

                                    return formatNum(param.value);

                                }
                            },




                        },

                    ]
                };


                myChart7.on("legendselectchanged", function (obj) {
                    var selected = obj.selected;



                    sumIn = [];
                    sumOut = [];

                    if (selected.进口重箱 == false && selected.进口空箱 == false) {
                        for (var i in emptyIn) {
                            sumIn.push(0);
                        }
                    }

                    if (selected.进口重箱 == true && selected.进口空箱 == false) {
                        for (var i in emptyIn) {
                            sumIn.push(heavyIn[i]);
                        }
                    }

                    if (selected.进口重箱 == false && selected.进口空箱 == true) {
                        for (var i in emptyIn) {
                            sumIn.push(emptyIn[i]);
                        }
                    }

                    if (selected.进口重箱 == true && selected.进口空箱 == true) {
                        for (var i in emptyIn) {
                            sumIn.push(emptyIn[i] + heavyIn[i]);
                        }
                    }


                    if (selected.出口重箱 == false && selected.出口空箱 == false) {
                        for (var i in emptyOut) {
                            sumOut.push(0);
                        }
                    }

                    if (selected.出口重箱 == true && selected.出口空箱 == false) {
                        for (var i in emptyOut) {
                            sumOut.push(heavyOut[i]);
                        }
                    }

                    if (selected.出口重箱 == false && selected.出口空箱 == true) {
                        for (var i in emptyOut) {
                            sumOut.push(emptyOut[i]);
                        }
                    }

                    if (selected.出口重箱 == true && selected.出口空箱 == true) {
                        for (var i in emptyOut) {
                            sumOut.push(emptyOut[i] + heavyOut[i]);
                        }
                    }





                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            },
                            formatter: function (params) {
                                var res = '<div><p>' + params[0].name + '</p ></div>';
                                for (var i = 0; i < params.length; i++) {

                                    if (i == 4 || i == 5)
                                        ;
                                    else {
                                        res += "<p><font color=" + params[i].color + ">● " + "</font>" + params[i].seriesName + ':' + params[i].data + '</p >';
                                    }
                                }
                                return res;
                            }
                        },
                        legend: {
                            data: ['进口重箱', '进口空箱', '出口重箱', '出口空箱'],
                            right: '2%',
                        },
                        grid: {
                            left: left,
                            right: right,
                            top: '15%',
                            bottom: '10%',
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisLine: {
                                    show: false
                                },
                                axisLabel: {
                                    color: '#666666'
                                },
                                axisTick: {
                                    show: false
                                }
                            }
                        ],
                        series: [
                            {
                                name: '进口重箱',
                                type: 'bar',
                                data: heavyIn,
                                stack: '进口',
                                color: colorList[3],

                                barGap: '80%'
                            },
                            {
                                name: '进口空箱',
                                type: 'bar',
                                stack: '进口',
                                data: emptyIn,
                                color: colorList[2],

                                barGap: '80%'
                            },
                            {
                                name: '出口重箱',
                                type: 'bar',
                                stack: '出口',
                                data: heavyOut,
                                color: colorList[0],

                                barGap: '80%'
                            },
                            {
                                name: '出口空箱',
                                type: 'bar',
                                stack: '出口',
                                data: emptyOut,
                                color: colorList[1],

                                barGap: '80%'
                            },
                            {
                                name: '进口总量',
                                type: 'bar',
                                stack: '进口',
                                data: sumIn,
                                color: 'transparent',
                                label: {
                                    position: 'insideBottom',
                                    show: true,

                                    color: '#666666',
                                    formatter: function (param) {

                                        return formatNum(param.value);

                                    }
                                },


                            },
                            {
                                name: '出口总量',
                                type: 'bar',
                                stack: '出口',
                                data: sumOut,
                                color: 'transparent',
                                label: {
                                    show: true,
                                    position: 'insideBottom',
                                    color: '#666666',
                                    formatter: function (param) {

                                        return formatNum(param.value);

                                    }
                                },




                            },

                        ]
                    };
                    myChart7.setOption(option);

                })
                myChart7.setOption(option);
                window.addEventListener("resize", function () {
               

                    var left = '7.85%';
                    var right = '3%';
   
				option = {

                     
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            },
                            formatter: function (params) {
                                var res = '<div><p>' + params[0].name + '</p ></div>';
                                for (var i = 0; i < params.length; i++) {

                                    if (i == 4 || i == 5)
                                        ;
                                    else {
                                        res += "<p><font color=" + params[i].color + ">● " + "</font>" + params[i].seriesName + ':' + params[i].data + '</p >';
                                    }
                                }
                                return res;
                            }
                        },
                        legend: {
                            data: ['进口重箱', '进口空箱', '出口重箱', '出口空箱'],
                            right: '2%',
                        },
                        grid: {
                            left: left,
                            right: right,
                            top: '15%',
                            bottom: '10%',
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisLine: {
                                    show: false
                                },
                                axisLabel: {
                                    color: '#666666'
                                },
                                axisTick: {
                                    show: false
                                }
                            }
                        ],
                        series: [
                            {
                                name: '进口重箱',
                                type: 'bar',
                                data: heavyIn,
                                stack: '进口',
                                color: colorList[3],

                                barGap: '80%'
                            },
                            {
                                name: '进口空箱',
                                type: 'bar',
                                stack: '进口',
                                data: emptyIn,
                                color: colorList[2],

                                barGap: '80%'
                            },
                            {
                                name: '出口重箱',
                                type: 'bar',
                                stack: '出口',
                                data: heavyOut,
                                color: colorList[0],

                                barGap: '80%'
                            },
                            {
                                name: '出口空箱',
                                type: 'bar',
                                stack: '出口',
                                data: emptyOut,
                                color: colorList[1],

                                barGap: '80%'
                            },
                            {
                                name: '进口总量',
                                type: 'bar',
                                stack: '进口',
                                data: sumIn,
                                color: 'transparent',
                                label: {
                                    posion: 'insideBottom',
                                    show: true,

                                    color: '#666666',
                                    formatter: function (param) {

                                        return formatNum(heavyIn[param.dataIndex] + emptyIn[param.dataIndex]);

                                    }
                                },


                            },
                            {
                                name: '出口总量',
                                type: 'bar',
                                stack: '出口',
                                data: sumOut,
                                color: 'transparent',
                                label: {
                                    show: true,
                                    posion: 'insideBottom',
                                    color: '#666666',
                                    formatter: function (param) {
                                        return formatNum(heavyOut[param.dataIndex] + emptyOut[param.dataIndex]);

                                    }
                                },




                            },

                        ]
                    };

                    myChart7.setOption(option);
                    myChart7.resize();
                });
    </script>
</body>
</html>

三.参考文章
1.https://blog.csdn.net/qq_36612779/article/details/78810107

凛冬将至弋
关注
使用 Echarts 制作堆叠柱状图并在顶部显示总数值的技巧
RknePython的博客
09-17 2660
在数据可视化中，堆叠柱状图是一种常见的图表类型，它可以同时展示多个维度的数据，并通过堆叠的方式呈现数据之间的关系。首先，确保你已经引入了 Echarts 库，并创建了一个 HTML 容器来显示图表。当你在浏览器中打开包含上述代码的 HTML 文件时，就会看到一个堆叠柱状图，并在每个柱子的顶部显示了对应的总数值。在最后一部分代码中，我们计算了每个数据对象的总值，并定义了一个样式对象。在上面的代码中，我们首先定义了一个包含三个维度数据的数组。在上面的模板中，我们引入了 Echarts 库，并在。
echarts柱状图堆叠效果
weixin_45372418的博客
12-26 332
【代码】echarts柱状图堆叠效果。
echarts 数据格式化
朝阳39的博客
08-12 991
实现如图格式的提示框效果，使用formatter回调函数实现。
echarts柱状图——堆叠、多柱堆叠，并在顶部展示总和
最新发布
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
07-31 1693
主要介绍echarts柱状图实现堆叠、多柱堆叠，并在顶部展示总和
Echarts 堆叠柱状图显示总数
热门推荐
qq_44879525的博客
10-12 1万+
Echarts 堆叠柱状图显示总数使用echarts 堆叠组装图顶部显示总数效果如图解决办法 ：改变series中的项目顺序 将总数的柱子放在最前面代码：效果如图完美解决 使用echarts 堆叠组装图顶部显示总数 直接上代码，原理是在原柱状图旁边在建一个柱子，让他的高度等于堆叠总数，然后向左偏移100%，并设置为透明色； yjczZzt:{ tit...
echarts柱状图堆叠顶部显示总数方法
a3223sdf的博客
07-31 1866
position: 'top', // 数值在上方显示。fontSize: '12px', // 字体大小。color: '#000', // 字体颜色。show: true, // 开启显示数值。textStyle: { // 数值样式。series里面新增一个总数项，设置barGap: '-100%'name: '总数',如果不想在tooltip显示总数项。
echarts 堆叠柱状图-顶部显示总和
samo9527的博客
07-24 872
【代码】echarts 堆叠柱状图-顶部显示总和。
echarts 堆叠柱状图label显示总和
weixin_43719310的博客
01-27 5023
记录一下使用echart的柱状图堆叠时，需要在柱状图顶部显示总计数值的问题。参考文章的实现，再堆叠一个透明的柱状图来显示总和数据标签，最后就是在触发legend切换时，更换option.缺点是切换legend触发事件时需要重新设置option并更改总计数值的逻辑。 chartRender(dom, Xdata, Ydata) { let that = this; let ledata = []; // let total = [] Ydata.forEach(ele...
echarts堆叠柱状图显示总数
08-12
- *2* [echart柱状图堆叠总计显示](https://blog.csdn.net/a15206087013/article/details/108706372)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...
echarts bar stack 在顶部显示总数（2021-04更新点击legend重新计算）
u012565113的博客
05-05 7103
echarts显示stack总数 基本思路是在stack的最顶上（最后）一个bar上面添加label,通过formatter计算总数。 公司项目，不方便贴源码，截了核心部分。 { name: '化工仓', type: 'bar', stack: 'total', //最顶上的那个bar，设置label label: { normal: { ...
Echarts图表中tooltip实现各序列叠加
Mo的博客
08-09 1615
在使用Echarts制图过程中，遇到需要将各个序列的值进行逐层叠加显示在tooltip中的情况，查找API，是可以通过formatter的标准化函数方法执行一些操作实现的。先上最终效果： 其回调函数形式： (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => strin...
echarts 堆叠柱状图 在顶部显示数据总数
细节怪的博客
09-07 7185
echarts 在堆叠柱状图顶部 显示该柱条所有数据的总和。
echart堆叠柱状图，顶部显示堆叠柱总数的技巧
hongsir的博客
01-20 1万+
有这么些堆叠柱状图，想要在每个堆叠柱的顶端显示总数，这时我们可以在series里面再push一个bar，这个bar的值为前面柱子数据的总数和，因此高度是等高的。 记得这个新push的bar的stack属性值是和前面相同同stack的堆叠柱是不同的值，然后设置z为-1，barGap为’-100%’，这样就能够把总计的柱子给隐藏到堆叠柱的后面了。 代码 //各子公司不同设备工单分布统计表 let data = [ {公司: '寿险',硬件设备: 5,操作系统: 15,数据库中间件: 25,安全: 5,.
echarts柱形图显示总数
m0_73263473的博客
06-26 862
【代码】echarts柱形图显示总数。
Echarts堆叠图显示总数
start_XUEBA的博客
02-09 3142
遇到一个需求：柱状堆叠图除了每个“柱”内部显示数据，还要在每个“柱”上方显示总数。类似下图： 解决：堆叠图新增一个总数的“柱”，此“柱”的对应data全置为0，则不会显示总数的堆叠图，再使用label的formatter显示计算出的数据总数。 基本代码： ... const totalStackBar = { name: '', type: 'bar', stack: 'stack', itemStyle: { normal:{
echarts 多个堆叠柱状图 在顶部显示总数、合计、自定义合计值
DarlingYL的博客
09-21 4584
echarts 多个堆叠柱状图 在顶部显示总数、合计、自定义合计值
Echart——堆叠柱状加折线图
qq_43264596的博客
06-12 5513
效果如下： 代码如下: app.title = '堆叠柱状图'; option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'sh...
echarts 堆叠柱状图 顶部添加合计
Z_Gleng的博客
07-21 5719
echarts 堆叠柱状图 顶部添加合计
echart柱状图堆叠
09-06
echart柱状图堆叠是一种图表类型，用于展示不同类别数据之间的比较关系。堆叠柱状图将多个数据系列按照柱子堆叠在一起，形成一列高度不断叠加的柱子。 每个数据系列代表一个类别，可以通过不同颜色来区分。柱子的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值