乐趣区

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

jiezi

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

  • 先上效果图

    办法

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

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

  1. 显示进去 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 显示我用的都是行内式款式 拼接成一个字符串 给最初显示 数遍悬浮的款式也是在这里设置 你的字符串是什么款式  渲染进去就是什么样的
          }
        },

至此 功败垂成

退出移动版