echarts 多个柱状堆叠图顶部显示总数

本文介绍: 好多博主用的都是echarts中 b arGap 为 ‘-100%’ 让两个系列的柱子重叠从而实现顶部显示总数但是这种方法只适合这一个X轴只有一个堆叠柱状图我的需求是一个X轴项有两个堆叠柱状图用了这种方法后并不适用该项目，这种方法的思路是单独出一个数据然后移动该数据的位置从而实现重叠显示，既然这种思路不适用该项目转变思路直接改变他显示的lable不就可以了有想法了就去实践。左边的柱状图顶部显示所有堆叠图数据的总和右边柱状图顶部也显示所有堆叠数据的总和。

左边的柱状图顶部显示所有堆叠图数据的总和右边柱状图顶部也显示所有堆叠数据的总和

先上效果图

方法

好多博主用的都是echarts中 b arGap 为 ‘-100%’ 让两个系列的柱子重叠从而实现顶部显示总数但是这种方法只适合这一个X轴只有一个堆叠柱状图我的需求是一个X轴项有两个堆叠柱状图用了这种方法后并不适用该项目，这种方法的思路是单独出一个数据然后移动该数据的位置从而实现重叠显示，既然这种思路不适用该项目转变思路直接改变他显示的lable不就可以了有想法了就去实践

首先顶部显示数字

{
        name: lastAdStack.name,
        type: "bar",
        stack: "Ad",
        label: {
          normal: {
            show: true,// 显示label
            position: "top", // 显示的label的位置
          }
        },
        data: [],//数据
      }

显示出来label后只需要修改 label的显示就可以了

label提供了一个 formatter 方法来对显示的文字进行处理，、只需要在你堆叠柱状图的最后一个数据上这么处理就可以修改他的显示label 但是他的data数据不要改变这样就不会影响到他的柱状高度的显示同时label进行了修改

{
        name: lastAdStack.name,
        type: "bar",
        stack: "Ad",
        label: {
          normal: {
            show: true,
            position: "top",
        // 首先把所有项的总和都算出来按照固定的顺序方法zonghe这个数组中  
          然后在方法中用下标对应上总和方法 return出来就可以改变他的label现实文字
            formatter: function (params) {
              var index = params.dataIndex;
              return zonghe[index]
            },      
          }


        },

        data: [],
      }

这样基本完事  后面的第二个柱状图也是这样  只要放到zonghe这个数组中的数据跟你显示的数据能一一对应上 数据就不会错 鼠标悬浮上显示的tooltip数据也不会错

假如你想在鼠标悬浮时tooltip中不显示某一项
在echarts的option中 tooltip 设置项

tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: (params) =&gt; {
            var res = params[0].name
            for (var i = 0; i &lt; params.length; i++) {
              if (this.adStackArr[params[i].seriesIndex].name != null) {  
		    // 这行代码就是判断语句 具体情况 具体分析  自己打印params 来实现自己的判断

                res += `<div &gt;
                  <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${[
                    params[i].color,
                  ]};"&gt;</span&gt;
                  ${params[i].seriesName}
                  ${params[i].data}
                </div&gt;`;
              }
            }
            return res; //最后返回的数据得一个字符串 并且支持html css 显示我用的都是行内式样式 拼接成一个字符串 给最后显示 数遍悬浮的样式也是在这里设置 你的字符串是什么样式  渲染出来就是什么样的
          }
        },