echarts绘制条形图-添加总数

前言

本文的代码是基于react的。
本文仅用于记录我在echarts绘制条形图遇到的添加总数的问题的笔记整理。

问题描述

echarts的官网实例和文档上都没有对于条形图如何添加总数的描述。
下图是常见的echarts绘制的条形图：

条形图总数1.png

我们的目标是在每行的右侧添加总数，展示每行数值的和
先放最终成果图：

条形图总数2.png

一、解决方案——有缺陷，不建议用

虽然不建议使用这个有缺陷的方案，但我也要分享一下我的思路，有缺陷的想法也会让你的灵感涌现。

首先在每个条形后面再加一组数据，值为前面一行堆叠的数据之和。再让这组数据的颜色变为透明，文字靠左展示，是不是就可以解决了？然而并不能。
首先横轴坐标被拉长，变成了原来的两倍，就算将图像右部分的50%都隐藏掉，也会导致横轴间距变为二分之一。
下图为此方案的样式图

image.png

二、解决方案——成熟可用

这个方法是在方案1的基础上改良的
思路一开始跟方案1一样，在每个条形后面再加一组数据，值为前面一行堆叠的数据之和，再让此条的背景色透明。然后让文字靠【右】展示，再将数据之和这条数据向左移动与每行x轴为0的位置重合，覆盖掉其他条形，然而因为背景透明，只有文字会在右侧展示，看起来就像总量一样。将此条取消stack设置并barGap: '-100%',此条与前面的条重叠，此时横坐标的长度和间距都会很正常。

条形图总数2.png

{
          name: '总计',
          type: 'bar',
          barGap: '-100%',
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter(v) {
                return v.value;
              },
              textStyle: { color: '#000' },
            },
          },
          itemStyle: {
            normal: {
              color: 'rgba(128, 128, 128, 0)',
            },
          },
          data: data4,
        },

echarts完成配置代码

// 条形图配置信息
  function getBarOption2() {
    const data1 = [320, 302, 301, 334, 390, 330, 320, 999, 199, 23, 87, 79, 100, 89, 78];
    const data2 = [120, 132, 101, 134, 90, 230, 200, 500, 199, 23, 87, 79, 100, 89, 78];
    const data3 = [101, 334, 390, 330, 320, 200, 321, 400, 23, 87, 321, 79, 100, 89, 78];
    const data4 = (() => {
      const dataArr = [];
      for (let i = 0; i < data1.length; i++) {
        dataArr.push(data1[i] + data2[i] + data3[i]);
      }
      return dataArr;
    })();
    const optionBar = {
      title: {
        text: '各地市供应商与收款户名不一致统计-按业务大类区分',
        textStyle: {
          color: '#29bece',
        },
        left: 'center', // 居中
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        data: ['能源使用费', '网络维修费', '房屋场地租赁及服务费'],
        top: '7%', // 距离顶部的距离
        selectedMode: false,
      },
      toolbox: {
        show: true,
        feature: {
          magicType: { show: true, type: ['line', 'bar'] },
          saveAsImage: { show: true },
        },
        left: '1%',
      },
      grid: {
        left: '3%',
        right: '12%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        // max: 600,
        splitLine: {
          show: false,
        },
        name: '(单位：笔)',
      },
      yAxis: {
        type: 'category',
        data: [
          'ICT',
          '宿',
          '连',
          '淮',
          '盐',
          '徐',
          '泰',
          '扬',
          '镇',
          '通',
          '常',
          '锡',
          '苏',
          '宁',
          '省',
        ],
      },
      series: [
        {
          name: '能源使用费',
          type: 'bar',
          stack: '报账单笔数',
          itemStyle: {
            color: 'rgba(33, 150, 243, 1)',
          },
          label: {
            normal: {
              show: true,
              position: 'insideRight',
              textStyle: { color: 'rgba(128, 128, 128, 1)' },
            },
          },
          data: data1,
        },
        {
          name: '网络维修费',
          type: 'bar',
          stack: '报账单笔数',
          itemStyle: {
            color: 'rgba(139, 195, 74, 1)',
          },
          label: {
            normal: {
              show: true,
              position: 'insideRight',
              textStyle: { color: 'rgba(128, 128, 128, 1)' },
            },
          },
          data: data2,
        },
        {
          name: '房屋场地租赁及服务费',
          type: 'bar',
          stack: '报账单笔数',
          itemStyle: {
            color: 'rgba(122, 192, 247, 1)',
          },
          label: {
            normal: {
              show: true,
              position: 'insideRight',
              textStyle: { color: 'rgba(128, 128, 128, 1)' },
            },
          },
          data: data3,
        },
        {
          name: '总计',
          type: 'bar',
          // stack: '报账单笔数',
          barGap: '-100%',
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter(v) {
                return v.value;
              },
              textStyle: { color: '#000' },
            },
          },
          itemStyle: {
            normal: {
              color: 'rgba(128, 128, 128, 0)',
            },
          },
          data: data4,
        },
      ],
    };
    return optionBar;
  }