echarts 堆叠柱状图 顶部添加合计

效果图
//主要是添加这一句
{
      name: '综合',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        position: 'top',
        formatter: function (p) { //这里处理展示的数据和
          let sum = arr[p.dataIndex] + arr1[p.dataIndex];
          return sum;
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [0, 0, 0, 0, 0]//为了隐藏总计bar
    }
let arr=[1,2,3,4,5],arr1=[1,2,3,4,5];
option = {
 
  legend: {//这里自定义legend 隐藏总计
    data: [{
    name: 'Direct',
    // 强制设置图形为圆。
    icon: 'circle',
    // 设置文本为红色
    textStyle: {
        color: 'red'
        }
    },{
        name: 'Mail Ad',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }]
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  yAxis: {
    type: 'value'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: arr
    },
    {
      name: 'Mail Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: arr1
    },
    {
      name: '综合',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        position:'top',
        formatter:function(p){
          let sum = arr[p.dataIndex] + arr1[p.dataIndex];
          return sum
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [0,0,0,0,0]
    }
  ]
};

你可能感兴趣的:(echarts 堆叠柱状图 顶部添加合计)