echart柱状图堆叠总计显示

本文主要记录一下使用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

echart柱状图堆叠总计显示相关推荐

excel柱状图堆叠图显示总和_Excel 的堆积柱形图上，怎样才能显示堆积图的总和？...
我发现很多同学在学习 Excel 的过程中,还不习惯用专业术语来描述问题,这就会导致提的问题,专业人士听不懂:专业人士的问答,他又听不懂. 比如,今天的标题,什么是"堆积柱形图"? ...
excel柱状图堆叠图显示总和_如何在Excel堆积柱形图中显示合计值
在Excel中,用堆积柱形图可以比较相交于类别轴上的每一数值占总数值的大小.对于普通的簇状柱形图,我们可以在每个柱形系列的顶端放置一个数据标志,如数值,来反映各系列数据的大小.对于堆积柱形图,Exce ...
excel柱状图堆叠图显示总和_Excel堆积柱形图同时显示合计值和构成值的方法介绍...
Excel堆积柱形图如何同时显示合计值和构成值?我们制作堆积柱形图时,往往只能看到各个组成部分的值或占比,但无法形象地体现出整体部分.作者这里介绍的就是通过设置柱形图的格式,将合计值.构成值同时显示的 ...
Echart柱状图-柱子顶部显示数值/显示图标
柱子顶部显示数值效果柱子顶部显示数值+图标 import EchartInit from '@/components/EchartInit';const IMG = ['https://scpic. ...
echart柱状图Y轴最小间隔问题,Y轴不显示小数
今天来说说echart 柱状图 Y轴的最小值.间隔问题. 最近项目中用到柱状图,数据量少的时候,Y轴会出现小数,但是我们产品小哥哥说不能出现小数,好了,那就开干! option = {xAxis: { ...
Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图
目录 Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图 1.基本图表绘制 plt.plot() ts.plot() 由Seri ...
echart 柱状图横坐标文字过长，如何旋转
echart 柱状图横坐标文字过长,如何旋转有时候,在用柱状图表的时候,如果横坐标文字过长,某些文字就会消失不显示,我们可以将其旋转一下,调整到合适的角度,就能正常显示横坐标文字了. 比如下面这样, ...
python横向柱状图-python画柱状图--不同颜色并显示数值的方法
用python画柱状图容易,但是如何对不同柱子使用不同颜色呢?同时在柱子顶端显示精确数值? 主要用的方法为: atplotlib.pyplot.bar(left, height, width=0.8, ...
python画柱形图显示数值_python画柱状图--不同颜色并显示数值的方法
用python画柱状图容易,但是如何对不同柱子使用不同颜色呢?同时在柱子顶端显示精确数值? 主要用的方法为: atplotlib.pyplot.bar(left, height, width=0.8, ...

echart柱状图堆叠总计显示

echart柱状图堆叠总计显示相关推荐

最新文章

热门文章