不规则叠加柱状图

  RightTwoApply(temp) {
      var myChartRightTwo = this.$echarts.init(
        document.getElementById("rightTwos")
      );
      this.optionRightTwo = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: "0",
          icon: "circle",
          // orient: "vertical",
          itemHeight: 8,
          itemWidth: 8,
          textStyle: {
            color: "#000",
            fontSize: "14",
          },
        },
        grid: {
          top: '40%',
          left: '5%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // xAxis: [
        //   {
        //     type: 'category',
        //     data: ['']
        //   }
        // ],
        // yAxis: [
        //   {
        //     type: 'value'
        //   }
        // ],
        xAxis: {
        //  只想到通过空格来确保 一条数据四个x轴属性
          data: ['  总数     审核通过数    推送数     闭环数'],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#ebeef5",
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            interval: 0,
            show: true,
            color: "#666", //X轴文字颜色
            textStyle: {
              fontSize: "14",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "辆",
            nameTextStyle: {
              color: "#000",
              fontSize: "14",
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ebeef5",
                fontSize: "14",
              },
            },
            axisLabel: {
              show: true,
              color: "#666",
              textStyle: {
                fontSize: "14",
              },
            },
          },
        ],
        series: [
        // 通过加不同宽度的空白柱状图来控制柱子间的距离
          {
            name: '',
            type: 'bar',
            stack: '',
            barWidth: 20,
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '审核通过数',
            type: 'bar',
            stack: 'A',
            barWidth: 15,
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              color: "#f56b6d",
            },
            itemStyle: {
              color: "#f56b6d",
              // normal: {
              //   borderColor:'#fff', //柱子间间隙
              //   borderTopWidth: 2,
              //   // barBorderRadius:[0, 0, 5, 5]
              // }
            },
            data: [320]
          },
          {
            name: '审核不通过数',
            type: 'bar',
            stack: 'A',
            barWidth: 15,
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              color: "#ff8e43",
            },
            itemStyle: {
              color: "#ff8e43",
            },
            data: [320]
          },
          {
            name: '',
            type: 'bar',
            stack: '',
            barWidth: 40,
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '闭环数',
            type: 'bar',
            stack: 'B',
            barWidth: 15,
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              color: "#219cf9",
            },
            itemStyle: {
              color: "#219cf9",
            },
            data: [120]
          },
          {
            name: '未闭环数',
            type: 'bar',
            stack: 'B',
            barWidth: 15,
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              color: "#40c057",
            },
            itemStyle: {
              color: "#40c057",
            },
            data: [220]
          },
          {
            name: '',
            type: 'bar',
            stack: '',
            barWidth: 40,
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '未处罚数',
            type: 'bar',
            stack: 'C',
            barWidth: 15,
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              color: "#c065e7",
            },
            itemStyle: {
              color: "#c065e7",
            },
            data: [150]
          },
          {
            name: '处罚数',
            type: 'bar',
            stack: 'C',
            barWidth: 15,
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              color: "#6ebffb",
            },
            itemStyle: {
              color: "#6ebffb",
            },
            data: [180]
          },
          {
            name: '',
            type: 'bar',
            stack: '',
            barWidth: 40,
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '推送数',
            type: 'bar',
            stack: 'D',
            barWidth: 15,
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              color: "#ffd351",
            },
            itemStyle: {
              color: "#ffd351",
            },
            data: [320]
          },
          {
            name: '未推送数',
            type: 'bar',
            stack: 'D',
            barWidth: 15,
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              color: "#6a89e2",
            },
            itemStyle: {
              color: "#6a89e2",
            },
            data: [620]
          },
          {
            name: '',
            type: 'bar',
            stack: '',
            barWidth: 20,
            emphasis: {
              focus: 'series'
            },
            data: []
          },
        ]
      };
      myChartRightTwo.setOption(this.optionRightTwo, true);
    },