eCharts 叠加柱状图

柱状图叠加的重要配置 stack 具体的可以参考eCharts官网

...
series: [
          {
             ...
            type: 'bar',
            // 数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置
            stack: 'A',
             ...
          }]
...

全部配置

     const initOption = {
        grid: {
          left: '15%',
          right: '5%',
          bottom: '20%'
        },
        legend: {
          // type: 'plain',
          itemWidth: 12,
          itemHeight: 12
          // itemGap: 35
        },
        // dataZoom: {
        //   show: false, //为true滚动条出现
        //   type: 'slider', //type:'inside'，滚动条在最下面，鼠标点击滚动
        //   startValue: 0, // 从头开始。
        //   endValue: 4 //end百分比显示范围，endValue具体显示几个数值
        // },
        xAxis: {
          axisLabel: {
            interval: 0,
            // width: 50,
            color: '#6e7079',
            fontSize: 12,
            // rotate: 45,
            width: 110,
            overflow: 'truncate'
          },
          axisTick: {
            show: false
          },
          data: []
        },
        yAxis: [
          {
            name: '人',
            type: 'value',
            min: 0
          }
        ],
        tooltip: {
          trigger: 'axis',
          confine: true,
          formatter: (params) => {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal =
                relVal +
                '<br/>' +
                params[i].marker +
                params[i].seriesName +
                '&nbsp;&nbsp;&nbsp;' +
                params[i].value +
                '人'
            }
            return relVal
          }
        },
        series: [
          {
            name: '签约人数',
            type: 'bar',
            stack: 'A', // 数据堆叠 让柱状图叠加的配置属性 值一样就叠加
            barWidth: '20',
            symbol: 'none',
            data: [],
            color: '#36c2cf'
          },
          {
            name: '履约人数',
            type: 'bar',
            stack: 'A',
            barWidth: '20',
            symbol: 'none',
            data: [],
            color: '#5473e8'
          }
        ]
      }