关于前端:echarts-多个柱状堆叠图-顶部显示总数

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

• 先上效果图

  办法

  好多博主用的都是echarts中 barGap 为 ‘-100%’ 让两个系列的柱子重叠 从而实现顶部显示总数 然而这种办法只适宜 这一个X轴 只有一个重叠柱状图 我的需要是一个X轴项 有两个重叠柱状图 用了这种办法后并不实用该我的项目，这种办法的思路是独自出一个数据 而后挪动该数据的地位 从而实现重叠显示，既然这种思路不实用该我的项目 转变思路 间接扭转他显示的lable不就能够了 有想法了就去实际

• 首先顶部显示数字

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

2. 显示进去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) => {
            var res = params[0].name
            for (var i = 0; i < params.length; i++) {
              if (this.adStackArr[params[i].seriesIndex].name != null) {  
            // 这行代码就是判断语句 具体情况 具体分析  本人打印params 来实现本人的判断

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

至此 功败垂成