echarts多X轴分组

echarts 双X轴分组

实现效果

option = {
  legend: {
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    }
  },
  xAxis: [
    {
      type: 'category',
      data: ['I级', 'II级', 'III级', 'IV级', 'I级', 'II级', 'III级', 'IV级'],
      axisTick: {
        length:20
      },
    },
    {
      type: 'category',
      data: [
        {
          value: '7标 左线',
          textStyle: {
            fontSize: 18,
            lineHeight: 70
          }
        },{
          value: '7标 右线',
          textStyle: {
            fontSize: 18,
            lineHeight: 70
          },
        }
      ],
      position : 'bottom',
      axisTick: {
        length:50
      },
    },
  ],
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '已清除',
    stack: 'ad',
    data: [100, 200, 300, 400, 500, 600, 700, 800],
    type: 'bar'
  },
  {
    name: '待整改',
    stack: 'ad',
    data: [111, 222, 333, 444, 555, 666, 777, 888],
    type: 'bar'
  },
  {
    name: '整改审批中',
    stack: 'ad',
    data: [820, 932, 901, 934, 1290, 1330, 1320, 820],
    type: 'bar'
  }]
};