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调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
随机推荐
- Alibaba Cloud SDK for Java,知识点
资料 网址 Alibaba Cloud SDK for Java https://help.aliyun.com/document_detail/52740.html?spm=a2c4g.111742 ...
- Kinect v2控制鼠标原理分析和源码
https://blog.csdn.net/baolinq/article/details/54381284 此程序为利用Kinect v2实现用手指隔空控制鼠标,是我另一个项目的一部分,因为在另外那 ...
- MySQL基于 amoeba.xml的读写分离
1.准备两台服务器 centos7 192.168.52.35 192.168.52.36 2.关闭防火墙 [root@localhost ~]# systemctl stop firewalld ...
- Pandas | 26 疏离数据
当任何匹配特定值的数据(NaN/缺失值,尽管可以选择任何值)被省略时,稀疏对象被“压缩”. 一个特殊的SparseIndex对象跟踪数据被“稀疏”的地方. 这将在一个例子中更有意义. 所有的标准Pan ...
- 洛谷p3353在你窗外闪耀的星星题解
题目 首先被题目甜到了 本来搜标签搜的线段树,结果发现这题目很吸引我我果断点开 觉得前缀和就能A啊 于是乎 要注意 窗户旁边是可以看到的 所以前缀和的时候是不用再-1的 //前缀和 //注意坑点 // ...
- 数据结构与算法系列——排序(4)_Shell希尔排序
1. 工作原理(定义) 希尔排序,也称递减增量排序算法,是插入排序的一种更高效的改进版本.但希尔排序是非稳定排序算法. 希尔排序的基本思想是:先将整个待排序的记录序列分割成为若干子序列分别进行直接插入 ...
- 应用JWT进行用户认证及Token的刷新
本文将通过实际的例子来演示如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新方案(ASP.NET Core 系列目录) 一.什么是JWT? JWT(json web token ...
- 《HeadFirts设计模式》笔记
定义 在某种情境下,针对某些问题的某种解决方案. 设计模式 1.可拓展性强,方便维护,能够应付变化. 何时使用设计模式 设计之前,还有在重构的时候. OOP 可复用,可扩充,可维护 设计模式原则 1. ...
- IE浏览器卡死提示是否停止运行此脚本的解决办法
IE浏览器经常卡死,报是否停止运行此脚本,严重影响使用体验,下面小编教大家怎么解决这个问题,供大家参考! 1.启动IE浏览器,点击上方菜单栏位的工具,如下图所示 2.在工具栏位选择internet选项 ...
- 设计高性能大并发WEB系统架构注意点
设计高性能大并发WEB系统架构注意点 第01:大型架构的演进之路第02(上):分布式缓存第02(下):分布式缓存第03:分布式消息队列第04:分布式数据存储第05:分布式服务框架第06:高性能系统架构 ...