ECharts 如何调整柱形图分组间距?

Question

ECharts 中如何控制柱图间距
想要实现的效果是:
两个灰色紧挨着, 两个红色紧挨着, 仅增加灰色和红色的间距, 即第二个柱形和第三个柱形的间距

演示代码

option = {
  legend: {
    formatter: name => {
      return name.replace('_', ':');
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  dataset: {
    dimensions: [
      { name: 'Month', type: 'ordinal' },
      { name: 'Sale: Plan', type: 'ordinal' },
      { name: 'Sale: Actual', type: 'ordinal' },
      { name: 'Profit: Plan', type: 'ordinal' },
      { name: 'Profit: Actual', type: 'ordinal' }
    ],
    source: [
      {
        Month: 'Jan',
        'Sale: Plan': 100,
        'Sale: Actual': 110,
        'Profit: Plan': 50,
        'Profit: Actual': 60
      },
      {
        Month: 'Feb',
        'Sale: Plan': 100,
        'Sale: Actual': 110,
        'Profit: Plan': 50,
        'Profit: Actual': 60
      },
      {
        Month: 'Mar',
        'Sale: Plan': 100,
        'Sale: Actual': 110,
        'Profit: Plan': 50,
        'Profit: Actual': 60
      },
      {
        Month: 'Apr',
        'Sale: Plan': 100,
        'Sale: Actual': 110,
        'Profit: Plan': 50,
        'Profit: Actual': 60
      }
    ]
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        margin: 25
      }
    },
    {
      type: 'category',
      position: 'bottom',
      axisTick: {
        length: 15
      },
      data: [
        'Sale', 'Profit',
        'Sale', 'Profit',
        'Sale', 'Profit',
        'Sale', 'Profit'
      ]
    }
  ],
  yAxis: {},
  series: [
    {
      type: 'bar',
      itemStyle: { color: '#CCCCCC' },
      barWidth: 20,
      label: {
        show: true,
        position: 'top',
        align: 'right',
        formatter: ({ seriesName, value }) => {
          return value[seriesName]
            .toString()
            .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    },
    {
      type: 'bar',
      itemStyle: { color: '#757575' },
      barWidth: 20,
      label: {
        show: true,
        position: 'top',
        align: 'left',
        formatter: ({ seriesName, value }) => {
          return value[seriesName]
            .toString()
            .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    },
    {
      type: 'bar',
      itemStyle: { color: '#FFA5A5' },
      barWidth: 20,
      label: {
        show: true,
        position: 'top',
        align: 'right',
        formatter: ({ seriesName, value }) => {
          return value[seriesName]
            .toString()
            .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    },
    {
      type: 'bar',
      itemStyle: { color: '#FF0000' },
      barWidth: 20,
      label: {
        show: true,
        position: 'top',
        align: 'left',
        formatter: ({ seriesName, value }) => {
          return value[seriesName]
            .toString()
            .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      },
      barGap: '20%'
    }
  ]
};

Answer 1

[echarts-barGap属性]
参考：(https://echarts.apache.org/zh/option.html#series-bar.barGap)

Answer 2

常规设置应该是不行，我也有个笨方法，把柱形图用从左往右的渐变填充，或者使用一部分是透明的PNG图片填充，设置你想空出来的那部分为透明色，视觉上看起来像是隔开来，但可能会带来其他影响，譬如要设置标签在x方向的偏移，其他系列也要设置渐变填充