echarts四个柱子怎么合并成两个柱子？无法使用堆积图

在 echarts 中，如果需要将四个柱子合并成两两合并的两个柱子使用堆积图很简单，只要将设置对应的 stack 就可以了，但是需要需要实现下图这样的效果就不能使用堆积图了。需要将四个柱子两两重合成两个柱子。

echarts 提供了 barGap 属性，但是看过文档对 barGap 的解释后。我陷入了沉思。 文档是这样解释 barGap 的： 同一坐标系，此属性会被多个 bar 共享。

经过一番百度后发现，echarts 是可以有多个 x 轴的。我们让前两个柱子放在 x1 轴，让后面两个柱子放在 x2 轴，调整柱子的位置。注意需要将数据值大的放前面数据值小的放后面，防止数据值小的被遮挡，然后把 x2 轴给隐藏掉。

v-echarts版本

setting: {
 // 定义了有几个维度
 dimension: ["area", "area"],
},
extend: {
    xAxis(v) {
      v &&
        v.forEach((ele, index) => {
          if (index == 1) {
            ele.show = false;
          }
          ele.axisLine = {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#D9D9D9",
            },
          };
          ele.axisLabel = {
            color: "#303133",
          };
          ele.axisTick = {
            alignWithLabel: true,
          };
        });
      return v;
    },
    series(arr) {
      arr &&
        arr.forEach((ele, index) => {
          if (index == 0 || index == 1) {
            ele.xAxisIndex = 1;
          }
          ele.barWidth = 20;
          ele.barCategoryGap = "50%";
          ele.itemStyle = {
            barBorderRadius: 10,
          };
        });
      return arr;
    },
}

echarts 版本

option = {
    legend: {},
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      {
        show: false,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    ],
    yAxis: {
        type: 'value'
    },
    series: [
    {
        name: 'name1',
        data: [220, 300, 250, 180, 170, 210, 230],
        type: 'bar',
        barWidth: 20,
        xAxisIndex: 0,
    },
     {
        name: 'name2',
        data: [320, 400, 350, 280, 270, 310, 330],
        type: 'bar',
        barWidth: 20,
        xAxisIndex: 0,
    },
    {
        name: 'name3',
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: 20,
        xAxisIndex: 1,
    },
     {
        name: 'name4',
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: 20,
        xAxisIndex: 1,
        
    },
    ]
};