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. Spring Cloud Turbine 知识点

    Turbine 默认使用 Eureka 作为注册中心:如果使用 Consul 作为注册中心,需要排除掉 Eureka:pom.xml 如下: <dependency> <groupI ...

  2. unity客户端自动断开连接

    问题描述: 当unity失去焦点一段时间后,与photon服务器端断开连接 问题根源: 默认unity失去焦点后会暂停运行,导致连接超时,服务器端超时断开连接 解决方案: 连接服务器后,填加一句代码让 ...

  3. UiPath: Studio 快捷键

    以下是 UiPath Studio 键盘快捷键的完整列表: 文件管理 Ctrl + Shift + N - 创建一个新的项目 Ctrl + O - 打开此前创建的工作流文件.仅仅支持扩展名为 .xam ...

  4. CentOS7配置本地Yum源

    从CentOS7官网下载DVD中存在需要的大部分软件,所以在没有网络的情况下可以配置yum源为本地的DVD,下载速度快,软件稳定.1. 如果使用虚拟机,那么就在虚拟机中挂载DVD的iso文件.2. 使 ...

  5. c语言定义的几种易错的说明

    int p; //一个整数 int p [5]; //一个包含5个整数的数组 int * p; //指向整数的指针 int * p [10]; //一个包含10个整数指针的数组 int ** p; / ...

  6. qhclass

    http://www.qhclass.com/classroom/62/courses

  7. Ajax 与 Django

    目录 Django与AJAX orm优化查询: MTV 与 MVC模型 choices 参数 update 与 save的区别 AJAX导入: Jquery 实现AJAX ajax基本语法结构 原生J ...

  8. awesome-RecSys

    https://github.com/jihoo-kim/awesome-RecSys?fbclid=IwAR1m6OebmqO9mfLV1ta4OTihQc9Phw8WNS4zdr5IeT1X1OL ...

  9. Java 集合系列之四:Queue基本操作

    1. Java Queue 1. Java Queue 重要观点 Java Queue接口是Java Collections Framework的成员. Queue 实现通常不允许插入 null 元素 ...

  10. Redis与Mysql双写一致性方案解析

    一 前言 首先,缓存由于其高并发和高性能的特性,已经在项目中被广泛使用.在读取缓存方面,大家没啥疑问,都是按照下图的流程来进行业务操作 但是在更新缓存方面,对于更新完数据库,是更新缓存呢,还是删除缓存 ...