Echarts本身没提供现成的解决方案。

option = {
title: {
text: '分类销量'
},
legend: {
y: "bottom",
data: ['百货', '电子', '服装']
},
xAxis: [
{
type: "category",
data: [
20190612,
20190613,
20190614,
20190615
]
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "百货",
type: "bar",
stack: "1",
data: [
10,
14,
17,
8
],
},
{
name: "电子",
type: "bar",
stack: "1",
data: [
16,
12,
9,
22
]
},
{
name: "服装",
type: "bar",
stack: "1",
data: [
18,
8,
13,
20
],
label: {
show: true,
position: 'top',
color: 'black',
formatter: function (params){
return params.value
}
}
}
]
}

思路: 将最后一类的label用formatter函数处理为总和。

js处理将fun绑定到最后一个series上

var series = option["series"];
var fun = function (params) {
var datavalue = 0;
for (var i = 0; i < series.length; i++) {
datavalue += series[i].data[params.dataIndex]
}
return datavalue;
}
series[series.length - 1]["label"]["formatter"] = fun;

一般的方案到这里就结束了,忽略了ECharts的图例选择取消功能,如果user将最后一个图例做取消显示时就会存在问题,

所以还需要进一步处理

myChart.on("legendselectchanged", function (obj) {
var b = obj.selected, d = [];
for (var key in b) {
if (b[key]) {
for (var i = 0, l = series.length; i < l; i++) {
var changename = series[i]["name"];
if (changename == key) {
d.push(i);
}
}
}
}
var fun = function (params) {
var datavalue = 0;
for (var i = 0; i < d.length; i++) {
for (var j = 0; j < series.length; j++) {
if (d[i] == j) {
datavalue += series[j].data[params.dataIndex]
}
}
}
return datavalue
}
for (var i = 0; i < series.length; i++) {
series[i]["label"]["show"] = false;
}
for (var i = series.length - 1; i >= 0; i--) {
var name = series[i]["name"];
if (obj["selected"][name]) {
series[i]["label"]["formatter"] = fun1
series[i]["label"]["show"] = true
break;
}
}
myChart.setOption(option);
})

  

效果:

ECharts堆叠柱状图label显示总和的更多相关文章

  1. echarts堆叠柱状图在最上面的柱子显示总和

    需求 柱子需设置barMinHeight 在堆叠柱状图的最上面显示当前堆叠的总和 直接上代码吧 需要注意:设置barMinHeight时为了让0不显示,只能将0设置为null; 设置为null的柱子l ...

  2. echarts 堆叠柱状图 + 渐变柱状图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. echarts堆叠图添加总量

    echarts在使用中往往会遇到需要展示总量信息的情况,比较典型的就是3维统计的堆叠柱状图 堆叠是在柱状图的基础上,给几项设置同一stack来实现的.不考虑在tips中实现总和,有两种方式可以实现总和 ...

  4. [Python Study Notes]堆叠柱状图绘制

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  5. echarts —— tooltip 鼠标悬浮显示提示框属性

    最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...

  6. UltraChart画柱状图上面显示数值

    http://www.cnblogs.com/kevin-h-wang/archive/2013/06/05/UltraChart.html 1.柱状图上显示数值 ? //第一种方法 this.Ult ...

  7. [置顶] echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

  8. echarts x轴文字显示不全解决办法

    标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694

  9. Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距

    Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...

随机推荐

  1. NGUI里的sprite和label有白色的边框

    问题描述:NGUI里的sprite和label有白色的边框,而原图一切正常 如图: 解决方案: 给Sprite 边缘左右更增加1,这样拉伸的时候就忽略了左右1的位置,图片就不会显示白色边框了

  2. 水晶报表 VS2010 应用

    VS.NET2010水晶报表安装部署[VS2010]   欢迎C#高手加盟QQ群:9340166 水晶报表VS2010版IDE安装标准版SAP Crystal Reports, version for ...

  3. The happy secret to better work,https://www.ted.com/talks/shawn_achor_the_happy_secret_to_better_work/transcript#t-100352

    When I was seven years old and my sister was just five years old, we were playing on top of a bunk b ...

  4. 讲题专用——线段树——优化DP

    题目链接:http://codevs.cn/problem/3342/ 题解: 最小化最大值:二分 二分最长空题段 令f[i]表示抄第i道题所花费的最小时间 状态转移方程:f[i]=min(f[j]) ...

  5. 【数位DP】【P4317】花神的数论题

    [数位DP][P4317]花神的数论题 Description 给定 \(n\),求 \(n\) 以内所有正整数二进制下 \(1\) 的个数的乘积,答案对 \(10^7 + 7\) 取模 Limita ...

  6. GitHub 干货 | 各大数据竞赛 Top 解决方案开源汇总

    AI 科技评论编者按:现在,越来越多的企业.高校以及学术组织机构通过举办各种类型的数据竞赛来「物色」数据科学领域的优秀人才,并借此激励他们为某一数据领域或应用场景找到具有突破性意义的方案,也为之后的数 ...

  7. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

  8. quick如何打开工程或者示例

    quick如何打开工程或者示例 1. 那里打开工程 cc.ui.UIPushButton.new(images, {scale9 = true}) :setButtonSize(buttonWidth ...

  9. Unittest 类方法

    import unittest,time from selenium import webdriver class TestClass(unittest.TestCase): @classmethod ...

  10. 远程windows

    1. 起因 因为经常用teamviewer,所以断定我是商业用户,不允许我用了.想买一个授权,结果太贵了,1700多.使用了很多其他的,向日葵卡顿,有的窗口点不到,vnc慢,效果差,卡顿,还收费,等等 ...