堆叠柱状图显示总和echarts 柱状配置项内容和展示

堆叠图,整体柱状图显示总和,边框,阴影效果

配置项如下
      option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'none',
    },
    formatter(param) {
      param.pop();

      console.log(param);
      return param;
    },
  },
  xAxis: {
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      color: '#555',
      margin: 24,
    },
    data: ['AAA', 'BBB', 'CCC', 'DDD', 'EEE', 'FFF', 'JJJ'],
  },
  yAxis: {
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    splitLine: {
      show: false,
    },
  },
  series: [
    {
      type: 'bar',
      stack: 'total',
      barWidth: 26,
      data: [20, 182, 191, 234, 290, 330, 310],
    },
    {
      type: 'bar',
      stack: 'total',
      barWidth: 26,
      data: [120, 182, 191, 234, 290, 330, 310],
    },
    {
      type: 'bar',
      stack: 'total',
      barWidth: 26,
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      type: 'bar',
      stack: 'total',
      barWidth: 26,
      data: [320, 182, 191, 234, 290, 330, 310],
    },
    {
      type: 'bar',
      stack: 'total',
      barWidth: 26,
      data: [420, 182, 191, 234, 290, 330, 310],
    },

    // total
    {
      type: 'bar',
      zlevel: -1,
      barWidth: 26,
      barGap: '-100%',
      label: {
        show: true,
        position: 'top',
        distance: 15,
      },
      itemStyle: {
        color: 'transparent',
      },
      emphasis: {
        itemStyle: {
          borderWidth: 4,
          borderColor: '#fff',
          shadowColor: '#5448F2',
          shadowBlur: 8,
        },
      },
      data: [1100, 910, 955, 1170, 1450, 1650, 1550],
    },
  ],
};

    
截图如下