echart 堆叠柱状图实战

实现如图所示的堆叠柱状图

实现如下：

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (param) {
      let wrapperDiv = `<div style="display: flex;border-radius: 6px;">`
      for (let i = 0; i < 3; i++) {
        wrapperDiv += `<div style="margin-right: 20px;flex:1">`;
        for (let j = 0; j < 3; j++) {
          if (j === 0) {
            wrapperDiv += `<p style="">${param[j+i*3].seriesName.split(' ')[0]}</p>`;
          }
          wrapperDiv += `
            <p >
              <span style='display:inline-block;width:6px;height:6px;border-radius:100%;background: ${param[j+i*3].color}'></span>
              <span>${param[j+i*3].seriesName.split(' ')[1]}: ${param[j+i*3].value}</span>
            </p>
          `
        }
        wrapperDiv += '</div>';
      }
      return wrapperDiv + '</div>';
    }
  },
  label: {
    show: true,
    position: 'top',
    formatter: function (params) {
      if ((params.seriesIndex + 1) % 3 === 0) {
        const date = params.seriesName.split(' ')[0].split('-');
        return date[1] + '-' + date[2];
      } else {
        return '';
      }
    },
    color: '#6C7293'
  },
  legend: {
    show: false
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['首页更新', '账号更新情况', '栏目更新情况']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      color: '#387DFF',
      data: [13212, 31323, 9087],
      name: '2022-04-26 正常',
      stack: '2022-04-26',
      type: 'bar'
    },
    {
      color: '#44C0F6',
      data: [472, 1600, 6565],
      name: '2022-04-26 即将逾期',
      stack: '2022-04-26',
      type: 'bar'
    },
    {
      color: '#F5B544',
      data: [13212, 31323, 9087],
      name: '2022-04-26 严重逾期',
      stack: '2022-04-26',
      type: 'bar'
    },
    {
      color: '#387DFF',
      data: [13212, 31323, 9087],
      name: '2022-04-27 正常',
      stack: '2022-04-27',
      type: 'bar'
    },
    {
      color: '#44C0F6',
      data: [13212, 31323, 9087],
      name: '2022-04-27 即将逾期',
      stack: '2022-04-27',
      type: 'bar'
    },
    {
      color: '#F5B544',
      data: [13212, 31323, 9087],
      name: '2022-04-27 严重逾期',
      stack: '2022-04-27',
      type: 'bar'
    },
    {
      color: '#387DFF',
      data: [13212, 31323, 9087],
      name: '2022-04-28 正常',
      stack: '2022-04-28',
      type: 'bar'
    },
    {
      color: '#44C0F6',
      data: [13212, 323, 90087],
      name: '2022-04-28 即将逾期',
      stack: '2022-04-28',
      type: 'bar'
    },
    {
      color: '#F5B544',
      data: [13212, 3923, 907],
      name: '2022-04-28 严重逾期',
      stack: '2022-04-28',
      type: 'bar'
    }
  ]
};