ECharts堆叠柱状图label显示总和
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显示总和的更多相关文章
- echarts堆叠柱状图在最上面的柱子显示总和
需求 柱子需设置barMinHeight 在堆叠柱状图的最上面显示当前堆叠的总和 直接上代码吧 需要注意:设置barMinHeight时为了让0不显示,只能将0设置为null; 设置为null的柱子l ...
- echarts 堆叠柱状图 + 渐变柱状图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- echarts堆叠图添加总量
echarts在使用中往往会遇到需要展示总量信息的情况,比较典型的就是3维统计的堆叠柱状图 堆叠是在柱状图的基础上,给几项设置同一stack来实现的.不考虑在tips中实现总和,有两种方式可以实现总和 ...
- [Python Study Notes]堆叠柱状图绘制
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...
- echarts —— tooltip 鼠标悬浮显示提示框属性
最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...
- UltraChart画柱状图上面显示数值
http://www.cnblogs.com/kevin-h-wang/archive/2013/06/05/UltraChart.html 1.柱状图上显示数值 ? //第一种方法 this.Ult ...
- [置顶]
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- echarts x轴文字显示不全解决办法
标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694
- Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距
Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
随机推荐
- nginx secure_link_module 访问包含
server { listen 80; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/log/host.acce ...
- python基础语法16 面向对象3 组合,封装,访问限制机制,内置装饰器property
组合: 夺命三问: 1.什么是组合? 组合指的是一个对象中,包含另一个或多个对象. 2.为什么要用组合? 减少代码的冗余. 3.如何使用组合? 耦合度: 耦: 莲藕 ---> 藕断丝连 - 耦合 ...
- MongoDB在windows及linux环境下安装
linux下安装配置 整理中... windows下安装配置 1.下载: https://www.mongodb.com/download-center?jmp=nav 2.解压到D盘 3.D:\下创 ...
- ABP 从core降到级.net framework
后台: Application层得先写接口 再写实现,不然 abp.services.app 这个里面就没有该service.并且service保留的接口,就是interface里面定义的接口. 文件 ...
- selenium--单选框和复选框的操作
单选框操作 from selenium import webdriver import unittest class Test_radio(unittest.TestCase): def test_S ...
- 4.28(TG模拟赛)总结
1.挖地雷 题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N≤20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之后,某人可以从任 ...
- 从$a_n=f(n)$的角度理解数列中的表达式$a_{n+1}=\frac{k}{a_n}$
函数周期性 前面我们学习过函数的周期性的给出方式: \(f(x+a)=f(x)\) \(\hspace{2cm}\) \(T=a\) \(f(x+a)=-f(x)\) \(\hspace{2cm}\) ...
- VueCli3新特性
升级VueCli3的理由: 1.构建速度大大加快,之前看到一个升级的例子是2的3倍速度,具体可以在自己迁移一个项 目测试下,这里的优化有默认开启了多核构建.缓存 并行和缓存 2.webpack被内置到 ...
- 基于web公交查询系统---搭建mvc连接数据库(我的毕业设计,进度继续)
建立一个spring的项目:我在已经做过的项目基础下做的,所以接口连接数据库挺快. 搭建好的.对应好数据库: 前几天进度已经完成简单的设计: 完成登录,用户管理(修改删除). 继续的数据库的信息获取, ...
- Gamma阶段项目展示
Gamma阶段项目展示 一. 团队成员介绍 姓名 Gamma职责 个人博客 张圆宁 PM,后端 个人博客 王文珺 后端 个人博客 牛宇航 后端 个人博客 申化文 后端 个人博客 汪慕澜 测试,部署 个 ...