Echarts堆叠柱状上边显示合计内容

前言

        实现堆叠的核心是stack属性！只要两个柱状图的stack值相同，就会堆叠在一起，否则就会并排放置

实现效果

 实现代码

{
      name: '统计',
      type: 'bar',
      stack: '堆叠在一起',
      data: [0, 0, 0, 0, 0, 0, 0], //默认数据
      label: {
        normal: {
          show: true,
          position: 'top',
          formatter: function (params) {
            //合计数据
            var total = ['9', '16', '4', '9', '5', '3', '12'];
            return '合计：'+total[params.dataIndex];
          },
          fontSize: 16,
          fontWeight: 'bold',
          textStyle: { color: '#000' }
       }
    }
}

调试环境

点击访问ECharts调试环境https://echarts.apache.org/examples/zh/editor.html?c=bar-stackhttps://echarts.apache.org/examples/zh/editor.html?c=bar-stack

调试代码

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter: function (params) {
      //x轴的名称
      var htmlStr = params[0].name + '<br/>';
      for (var i = 0; i < params.length; i++) {
        var param = params[i];
        if (param.value > 0) {
          htmlStr += '<div>';
          //为了保证和原来的效果一样，复制的是：param.marker的源码，圆点样式：param.color
          htmlStr +='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +param.color +';"></span>';
          // 名称颜色设置
          // htmlStr += '<span style="color:'+param.color+'">';
          //圆点后面显示的名称
          htmlStr += param.seriesName + '：' + param.value;
          // htmlStr += '</span>';
          htmlStr += '</div>';
        }
      }
      return htmlStr;
    }
  },
  legend: {
    data: [
      '直接访问',
      '邮件营销',
      '联盟广告',
      '视频广告',
      '搜索引擎',
      '百度',
      '谷歌',
      '必应',
      '其他'
    ]
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '直接访问',
      type: 'bar',
      stack: '广告',
      emphasis: {
        focus: 'series'
      },
      data: [1, 4, 0, 0, 0, 0, 3]
    },
    {
      name: '邮件营销',
      type: 'bar',
      stack: '广告',
      emphasis: {
        focus: 'series'
      },
      data: [0, 0, 1, 3, 1, 1, 0]
    },
    {
      name: '联盟广告',
      type: 'bar',
      stack: '广告',
      emphasis: {
        focus: 'series'
      },
      data: [6, 0, 1, 1, 3, 1, 0]
    },
    {
      name: '视频广告',
      type: 'bar',
      stack: '广告',
      emphasis: {
        focus: 'series'
      },
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: '搜索引擎',
      type: 'bar',
      stack: '广告',
      data: [0, 0, 1, 5, 1, 1, 0],
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: '百度',
      type: 'bar',
      stack: '广告',
      emphasis: {
        focus: 'series'
      },
      data: [0, 0, 1, 0, 0, 0, 0]
    },
    {
      name: '谷歌',
      type: 'bar',
      stack: '广告',
      emphasis: {
        focus: 'series'
      },
      data: [1, 4, 0, 0, 0, 0, 3]
    },
    {
      name: '必应',
      type: 'bar',
      stack: '广告',
      emphasis: {
        focus: 'series'
      },
      data: [1, 4, 0, 0, 0, 0, 3]
    },
    {
      name: '其他',
      type: 'bar',
      stack: '广告',
      emphasis: {
        focus: 'series'
      },
      data: [0, 4, 0, 0, 0, 0, 3]
    },
    {
      name: '统计',
      type: 'bar',
      stack: '广告',
      data: [0, 0, 0, 0, 0, 0, 0], //模拟数据
      label: {
        normal: {
          show: true,
          position: 'top',
          formatter: function (params) {
            var total = ['9', '16', '4', '9', '5', '3', '12'];
            return '合计：'+total[params.dataIndex];
          },
          fontSize: 16,
          fontWeight: 'bold',
          textStyle: { color: '#000' }
        }
      }
    }
  ]
};

如果出现以下情况