web前端之vue和echarts的堆叠柱状图顶部显示总数、鼠标悬浮工具提示、设置图例的显示与隐藏、label、legend、tooltip

MENU

• 效果图
• html
• JavaScrip
• style
• 解析

---

效果图

---

---

html

<template>
  <div>
    <div>
      <div id="idStackedColumnChart" style="width: 100%; height: 680px"></div>
    </div>
  </div>
</template>

---

JavaScrip

export default {
  name: "stackedColumnChart",
  mounted() {
    this.$nextTick(() => {
      this.handleStackedColumnChart();
    });
  },

  methods: {
    /**
     * 纵向数组求和
     * @param {Array} list
     */
    verticalArraySummation(list) {
      let sumArray = [];

      for (let i = 0; i < list[0].data.length; i++) {
        let sum = 0;
        for (let j = 0; j < list.length; j++) sum += list[j].data[i];

        sumArray.push(sum);
      }

      return sumArray;
    },

    /**
     * 初始化图表
     */
    handleStackedColumnChart() {
      let series = [
          {
            name: "示例1",
            color: "#ff0000",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "示例2",
            color: "#00ff00",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "示例3",
            color: "#0000ff",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
        ],
        len = series.length,
        zonghe = this.verticalArraySummation(series);

      series = series.map((item) => {
        return {
          name: item.name,
          itemStyle: {
            color: item.color,
          },
          data: item.data,
        };
      });

      let lenItem = {
        ...series[len - 1],
        label: {
          normal: {
            show: true,
            position: "top",
            // 先把所有项的总和算出来，按照顺序放到zonghe数组中
            // 然后在方法中用下标对应上总和方法
            // return出来就是label文字的现实
            // formatter(params) {
            //   return zonghe[params.dataIndex];
            // },
            formatter: (params) => zonghe[params.dataIndex],
          },
        },
      };

      series[len - 1] = lenItem;

      this.$beInMotionEcharts("idStackedColumnChart", "stackedColumnChart", {
        title: {
          text: "堆叠柱形图",
        },
        xAxis: [
          {
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        legend: {
          // 设置show为false，即隐藏所有图例
          show: true,
          data: ["示例1", "示例2", "示例3"],
        },
        series,
        // 鼠标悬浮工具提示
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter(params) {
            let res = `<div style="font-weight: 700;">${params[0].name}</div>`,
              sum = 0;

            for (let i = 0; i < params.length; i++) {
              let item = params[i],
                items = series[item.seriesIndex];

              if (items.name !== null) {
                sum += item.data;

                res += `<div><span class="tooltip" style="background: ${item.color};"></span>${item.seriesName}: ${item.data}</div>`;
              }
            }

            res += `<div><span class="tooltip" style="background: transparent;"></span>总计: ${sum}</div>`;

            return res;
          },
        },
      });
    },
  },
};

---

style

.tooltip {
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

---

解析

网上好多文章用的都是echarts中的barGap: '-100%'让两个系列的柱子重叠，从而实现顶部显示总数。
但是这种方法只适合X轴只有一个堆叠柱状图。
现在的需求是一个X轴项，有两个或两个以上堆叠柱状图，这种方法并不适用该需求。
这种方法的思路是单独再造一个柱状图，然后移动该柱状图的位置，从而实现重叠显示。
既然这种思路不适用该需求，转变思路，直接改变柱状图的lable显示即可。

---

方式一(不推荐的方式)

在数据值最后添加一个数值项。

series.push({
  name: "总计",
  type: "bar",
  stack: "y",
  label: {
    normal: {
      show: true,
      position: "top",
      color: "#333333",
    },
  },
  data: arr,
  // 放到堆叠图的下一层
  z: -1,
  // 与堆叠柱条重合
  barGap: "-100%",
});

---

方式二
概述

label提供了formatter方法来对显示的文字进行处理，只需要在堆叠柱状图的最后一个数据项上添加以下代码即可。
这样基本完事，后面的第二个柱状图也是这样。只要放到zonghe这个数组中的数据跟你显示的数据能一一对应上，数据就不会错，鼠标悬浮上显示的tooltip数据也不会错。

---

顶部显示

label: {
  normal: {
    show: true,
    position: "top",
    // formatter(params) {
    //   return zonghe[params.dataIndex];
    // },
    formatter: (params) => zonghe[params.dataIndex],
  },
}

---

鼠标悬浮工具提示

tooltip: {
  trigger: "axis",
  axisPointer: {
    type: "shadow",
  },
  formatter(params) {
    let res = `<div style="font-weight: 700;">${params[0].name}</div>`,
      sum = 0;

    for (let i = 0; i < params.length; i++) {
      let item = params[i],
        items = series[item.seriesIndex];

      if (items.name !== null) {
        sum += item.data;

        res += `<div><span class="tooltip" style="background: ${item.color};"></span>${item.seriesName}: ${item.data}</div>`;
      }
    }

    res += `<div><span class="tooltip" style="background: transparent;"></span>总计: ${sum}</div>`;

    return res;
  },
}