我不认为有一个开箱即用的解决方案为您的问题。
我能想到的最好的方法是使用xAxis: {type: 'value'}，按类别（A，B，C，..）以升序对数据进行排序，并使用visualMap根据它们各自的组对它们进行着色。
目前我没有一个很好的解决方案的xAxis标签。为了区分不同的类别，可以为每个类别添加一个系列，并应用一些除颜色之外的样式。
下面是example：

// some random data
const data = [[],[],[],[]];
const categories = ['A', 'B', 'C', 'D'];
for (let i = 1; i <= 20; i++) {
  const idx = Math.floor((i - 1) / 5);
  data[idx].push({id: i, category: categories[idx] , group: Math.ceil(Math.random() * 2), value: Math.random() * 100})
}

option = {
  aria: {
    enabled: true,
    decal: {show: true},
  },
  dataset: [
    {source: data[0]},
    {source: data[1]},
    {source: data[2]},
    {source: data[3]},
  ],
  xAxis: {
      type: 'value',
      axisLabel: {show: false},
      axisTick: {show: false},
  },
  yAxis: {
    type: 'value'
  },
  visualMap: [
    {
      type: 'piecewise',
      dimension: 2,
      categories: [1,2],
      inRange: {
        color: ['lightblue', 'lightgreen']
      },
      top: 10,
      right: 10,
    },
  ],
  series: [
    {
      type: 'bar',
      name: 'A',
      datasetIndex: 0,
      encode: {
        x: 'id',
        y: 'value',
      },
      itemStyle: {borderWidth: 2, borderColor: 'red'},
    },
    {
      type: 'bar',
      name: 'B',
      datasetIndex: 1,
      encode: {
        x: 'id',
        y: 'value',
      },
      itemStyle: {borderWidth: 2, borderColor: 'black'},
    },
    {
      type: 'bar',
      name: 'C',
      datasetIndex: 2,
      encode: {
        x: 'id',
        y: 'value',
      },
      itemStyle: {borderWidth: 2, borderColor: 'orange'},
    },
    {
      type: 'bar',
      name: 'D',
      datasetIndex: 3,
      encode: {
        x: 'id',
        y: 'value',
      },
      itemStyle: {borderWidth: 2, borderColor: 'purple'},
      barGap: -1,
    },
  ]
};

请注意，出于某种原因，您需要添加barGap: -1,，以使酒吧不英里aprat。