echart堆叠柱状图，顶部显示堆叠柱总数的

有这么些堆叠柱状图，想要在每个堆叠柱的顶端显示总数，这时我们可以在series里面再push一个bar，这个bar的值为前面柱子数据的总数和，因此高度是等高的。

记得这个新push的bar的stack属性值是和前面相同同stack的堆叠柱是不同的值，然后设置z为-1，barGap为’-100%’，这样就能够把总计的柱子给隐藏到堆叠柱的后面了。

代码

//各子公司不同设备工单分布统计表
let data = [
  {公司: '寿险',硬件设备: 5,操作系统: 15,数据库中间件: 25,安全: 5,网络: 9},
  {公司: '健康险',硬件设备: 7,操作系统: 13,数据库中间件: 5,安全: 21,网络: 17},
  {公司: '南中心',硬件设备: 18,操作系统: 28,数据库中间件: 13,安全: 32,网络: 17},
  {公司: '科技运营部',硬件设备: 12,操作系统: 13,数据库中间件: 22,安全: 19,网络: 12},
  {公司: '88号',硬件设备: 21,操作系统: 15,数据库中间件: 10,安全: 5,网络: 6}
];
const deviceList = Object.keys(data[0]).filter((key) => key !== '公司');
const newData = deviceList.map((device) => {
  return {
    设备: device,
    ...Object.fromEntries(data.map((item) => [item['公司'], item[device]])),
    总计:data.map(item=>item[device]).reduce((pre,next)=>{
        pre  = next    
        return pre
    },0)
  };
});
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  dataset: {
    dimensions: ['设备', '寿险', '健康险', '南中心', '科技运营部', '88号','总计'],
    source: newData
  },
  xAxis: [
    {
      type: 'category',
      data: [`硬件设备`, `操作系统`, `数据库中间件`, `安全`, `网络`]
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '寿险',
      type: 'bar',
      stack: 'Ad',
      barWidth: 30,
      label: {
        show: true,
        position: 'inside',
        fontSize: 15
      },
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '健康险',
      type: 'bar',
      stack: 'Ad',
      label: {
        show: true,
        position: 'inside',
        fontSize: 15
      },
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '南中心',
      type: 'bar',
      stack: 'Ad',
      label: {
        show: true,
        position: 'inside',
        fontSize: 15
      },
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '科技运营部',
      type: 'bar',
      stack: 'Ad',
      label: {
        show: true,
        position: 'inside',
        fontSize: 15
      },
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '88号',
      type: 'bar',
      barWidth: 30,
      stack: 'Ad',
      label: {
        show: true,
        position: 'inside',
        fontSize: 15
      },
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '总计',
      type: 'bar',
      stack: '',
      barWidth: 30,
      label: {
        normal: {
          show: true,
          position: 'top',
          color: '#000'
        },
      },
      z: -1,
      //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。
      barGap: '-100%',
    }
  ]
};

这篇好文章是转载于：学新通技术网