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. [KCOJ3393]上马

    题目描述 Description Chicken在IEC(International Equestrianism Competition(国际马术表演赛))惨跪,没有成功的上到马,他深刻的记得他的选手 ...

  2. Windbg Memory(内存)窗口的使用

    在 WinDbg 中,可以查看和编辑内存,通过输入命令或通过使用内存窗口. 内存窗口的打开 通过菜单View-->Memory 通过快捷键Alt+5 通过工具栏 使用内存窗口 通过上面方式打开的 ...

  3. 学习-jdk8 特性

    jdk8新特性 Lambda 表达式 Lambda允许把函数作为一个方法的参数(函数作为参数传递进方法中.方法引用 − 方法引用提供了非常有用的语法,可以直接引用已有Java类或对象(实例)的方法或构 ...

  4. vue+ typescript 使用parcel 构建

    parcel 是一个零配置的前端构建工具,相比webpack 更快,同时使用简单以下是 一个简单的使用typescript 开发vue 应用,同时使用parcel 构建,同时集成了docker 构建, ...

  5. 这里有一个url=https://www/.baidu.com/s?id=111&name=yourname,写一个函数获取query的参数和值存放在一个对象

    console.log(getJson(url)); function getJson(url){ var obj={}; var arr=url.split("?")[1].sp ...

  6. ES6新增的数组方法

    ES6新增:(IE9级以上支持) 1.forEach():遍历数组,无返回值,不改变原数组. 2.map():遍历数组,返回一个新数组,不改变原数组. 3.filter():过滤掉数组中不满足条件的值 ...

  7. jQuery高级案例

    一.广告的自动显示与隐藏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. 用JQuery内置animate方法实现数字递增动画

    平时使用animate只用于dom节点的动画,无意间发现JQuery内置的animate方法可实现数字动画,JQ还是挺强大的! 动画效果为从0一步步跳到84,代码如下: $({ // 起始值 coun ...

  9. 【Gamma阶段】第九次Scrum Meeting

    冰多多团队-Gamma阶段第九次Scrum会议 工作情况 团队成员 已完成任务 待完成任务 卓培锦 美化前端及编辑器界面,编辑器风格切换(添加夜间模式) UI界面手势切换 牛雅哲 添加scp工具,添加 ...

  10. No module named 'paddle.fluid'

    问题 win10笔记本,安装了paddlepadde,但是仍然报错,No module named 'paddle.fluid'. 解决 在py文件中,我先下载并且引入了paddle,后来又安装.引入 ...