echarts 多个堆叠柱状图 在顶部显示总数、合计、自定义合计值

1、效果图

2、代码实现

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

let xAxisData = ['X'];
let data1 = [192.35];
let data2 = [1.09];
let data3 = [43.75];
let data4 = [45.09];
let data5 = [109.9];
let data6 = [11.66];
let data7 = [173.79];
let data8 = [283.37];
var emphasisStyle = {
  itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
  }
};
option = {
  legend: {
    data: ['A', 'B', 'C', 'D', 'E', 'F'],
    top: '50%',
    right: 0,
    width: 10
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    axisLine: {
      onZero: true,
      lineStyle: {
        color: '#D5D5D5'
      }
    },
    axisTick: { show: false },
    splitLine: { show: false },
    splitArea: { show: false }
  },
  yAxis: {
    show: false
  },
  grid: {
    bottom: 100
  },
  color: [
    'rgb(56,160,255)',
    'rgb(52,204,203)',
    'rgb(150,94,227)',
    'rgb(248,212,54)',
    '',
    'rgb(64,149,229)',
    'rgb(147,210,243)',
    '#fff'
  ],
  series: [
    {
      name: 'A',
      type: 'bar',
      barWidth: 100,
      stack: 'one',
      label: {
        show: true,
        color: '#fff'
      },
      emphasis: emphasisStyle,
      data: data1
    },
    {
      name: 'B',
      type: 'bar',
      stack: 'one',
      label: {
        show: true,
        color: '#fff'
      },
      emphasis: emphasisStyle,
      data: data2
    },
    {
      name: 'C',
      type: 'bar',
      stack: 'one',
      label: {
        show: true,
        color: '#fff'
      },
      emphasis: emphasisStyle,
      data: data3
    },
    {
      name: 'D',
      type: 'bar',
      stack: 'one',
      label: {
        show: true,
        color: '#fff'
      },
      emphasis: emphasisStyle,
      data: data4
    },
    {
      name: '合计1',
      type: 'bar',
      stack: 'one',
      label: {
        show: true,
        color: '#333',
        position: 'top',
        formatter: function (params) {
          return '合计1' + data8[0];
        }
      },
      emphasis: emphasisStyle,
      data: [0]
    },
    {
      name: 'E',
      type: 'bar',
      barWidth: 100,
      barGap: '50%',
      stack: 'two',
      label: {
        show: true,
        color: '#fff'
      },
      emphasis: emphasisStyle,
      data: data5
    },
    {
      name: 'F',
      type: 'bar',
      stack: 'two',
      label: {
        show: true,
        color: '#fff'
      },
      emphasis: emphasisStyle,
      data: data6
    },
    {
      name: 'G',
      type: 'bar',
      stack: 'two',
      label: {
        show: true,
        color: '#333'
      },
      itemStyle: {
        borderColor: 'rgb(147,210,243)',
        borderType: 'dashed'
      },
      emphasis: emphasisStyle,
      data: data7
    },
    {
      name: '合计2',
      type: 'bar',
      stack: 'two',
      label: {
        show: true,
        color: '#333',
        position: 'top',
        formatter: function (params) {
          return '合计2' + data7[0];
        }
      },
      emphasis: emphasisStyle,
      data: [0]
    }
  ]
};

option && myChart.setOption(option);

3、重点

(1) 在series中添加一条数据(一个对象)，用来标识合计，其中data数组的值都为0
(2) 在该对象中，label属性的formatter返回自己需要展示的合计值