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

  1. option = {
  2. title: {
  3. text: '分类销量'
  4. },
  5. legend: {
  6. y: "bottom",
  7. data: ['百货', '电子', '服装']
  8. },
  9. xAxis: [
  10. {
  11. type: "category",
  12. data: [
  13. 20190612,
  14. 20190613,
  15. 20190614,
  16. 20190615
  17. ]
  18. }
  19. ],
  20. yAxis: [
  21. {
  22. type: "value"
  23. }
  24. ],
  25. series: [
  26. {
  27. name: "百货",
  28. type: "bar",
  29. stack: "1",
  30. data: [
  31. 10,
  32. 14,
  33. 17,
  34. 8
  35. ],
  36. },
  37. {
  38. name: "电子",
  39. type: "bar",
  40. stack: "1",
  41. data: [
  42. 16,
  43. 12,
  44. 9,
  45. 22
  46. ]
  47. },
  48. {
  49. name: "服装",
  50. type: "bar",
  51. stack: "1",
  52. data: [
  53. 18,
  54. 8,
  55. 13,
  56. 20
  57. ],
  58. label: {
  59. show: true,
  60. position: 'top',
  61. color: 'black',
  62. formatter: function (params){
  63. return params.value
  64. }
  65. }
  66. }
  67. ]
  68. }

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

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

  1. var series = option["series"];
  2. var fun = function (params) {
  3. var datavalue = 0;
  4. for (var i = 0; i < series.length; i++) {
  5. datavalue += series[i].data[params.dataIndex]
  6. }
  7. return datavalue;
  8. }
  9. series[series.length - 1]["label"]["formatter"] = fun;

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

所以还需要进一步处理

  1. myChart.on("legendselectchanged", function (obj) {
  2. var b = obj.selected, d = [];
  3. for (var key in b) {
  4. if (b[key]) {
  5. for (var i = 0, l = series.length; i < l; i++) {
  6. var changename = series[i]["name"];
  7. if (changename == key) {
  8. d.push(i);
  9. }
  10. }
  11. }
  12. }
  13. var fun = function (params) {
  14. var datavalue = 0;
  15. for (var i = 0; i < d.length; i++) {
  16. for (var j = 0; j < series.length; j++) {
  17. if (d[i] == j) {
  18. datavalue += series[j].data[params.dataIndex]
  19. }
  20. }
  21. }
  22. return datavalue
  23. }
  24. for (var i = 0; i < series.length; i++) {
  25. series[i]["label"]["show"] = false;
  26. }
  27. for (var i = series.length - 1; i >= 0; i--) {
  28. var name = series[i]["name"];
  29. if (obj["selected"][name]) {
  30. series[i]["label"]["formatter"] = fun1
  31. series[i]["label"]["show"] = true
  32. break;
  33. }
  34. }
  35. myChart.setOption(option);
  36. })

  

效果:

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. Alibaba Cloud SDK for Java,知识点

    资料 网址 Alibaba Cloud SDK for Java https://help.aliyun.com/document_detail/52740.html?spm=a2c4g.111742 ...

  2. Kinect v2控制鼠标原理分析和源码

    https://blog.csdn.net/baolinq/article/details/54381284 此程序为利用Kinect v2实现用手指隔空控制鼠标,是我另一个项目的一部分,因为在另外那 ...

  3. MySQL基于 amoeba.xml的读写分离

    1.准备两台服务器  centos7 192.168.52.35 192.168.52.36 2.关闭防火墙 [root@localhost ~]# systemctl stop firewalld ...

  4. Pandas | 26 疏离数据

    当任何匹配特定值的数据(NaN/缺失值,尽管可以选择任何值)被省略时,稀疏对象被“压缩”. 一个特殊的SparseIndex对象跟踪数据被“稀疏”的地方. 这将在一个例子中更有意义. 所有的标准Pan ...

  5. 洛谷p3353在你窗外闪耀的星星题解

    题目 首先被题目甜到了 本来搜标签搜的线段树,结果发现这题目很吸引我我果断点开 觉得前缀和就能A啊 于是乎 要注意 窗户旁边是可以看到的 所以前缀和的时候是不用再-1的 //前缀和 //注意坑点 // ...

  6. 数据结构与算法系列——排序(4)_Shell希尔排序

    1. 工作原理(定义) 希尔排序,也称递减增量排序算法,是插入排序的一种更高效的改进版本.但希尔排序是非稳定排序算法. 希尔排序的基本思想是:先将整个待排序的记录序列分割成为若干子序列分别进行直接插入 ...

  7. 应用JWT进行用户认证及Token的刷新

    本文将通过实际的例子来演示如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新方案(ASP.NET Core 系列目录) 一.什么是JWT? JWT(json web token ...

  8. 《HeadFirts设计模式》笔记

    定义 在某种情境下,针对某些问题的某种解决方案. 设计模式 1.可拓展性强,方便维护,能够应付变化. 何时使用设计模式 设计之前,还有在重构的时候. OOP 可复用,可扩充,可维护 设计模式原则 1. ...

  9. IE浏览器卡死提示是否停止运行此脚本的解决办法

    IE浏览器经常卡死,报是否停止运行此脚本,严重影响使用体验,下面小编教大家怎么解决这个问题,供大家参考! 1.启动IE浏览器,点击上方菜单栏位的工具,如下图所示 2.在工具栏位选择internet选项 ...

  10. 设计高性能大并发WEB系统架构注意点

    设计高性能大并发WEB系统架构注意点 第01:大型架构的演进之路第02(上):分布式缓存第02(下):分布式缓存第03:分布式消息队列第04:分布式数据存储第05:分布式服务框架第06:高性能系统架构 ...