echarts双类目轴柱状图,错开展示

要实现双类目轴柱状图错开展示，可以通过设置柱状图系列的 barCategoryGap 和 barGap 属性来实现。具体步骤如下：

1. 设置 xAxis 类目轴的 boundaryGap 属性为 true，使得柱状图两端不留空白。

2. 设置 yAxis 为类目轴，同时设置 yAxis 的 inverse 属性为 true，使得 y 轴的方向从上到下。

3. 在系列中设置 barCategoryGap 和 barGap 属性，通过调整这两个属性的值来实现柱状图的错开展示效果。

下面是一个示例代码：

option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D'],
    boundaryGap: true // 设置类目轴两端不留空白
  },
  yAxis: {
    type: 'category',
    data: ['Category1', 'Category2', 'Category3'],
    inverse: true // 设置 y 轴方向从上到下
  },
  series: [
    {
      name: 'Series1',
      type: 'bar',
      barCategoryGap: '50%', // 设置柱状图系列的类目间距
      barGap: '-100%', // 设置柱状图系列的柱间距
      data: [[0, 0, 10], [1, 1, 20], [2, 2, 30], [3, 0, 40]] // 数据格式为 [x轴索引, y轴索引, 值]
    },
    {
      name: 'Series2',
      type: 'bar',
      barCategoryGap: '50%',
      barGap: '-100%',
      data: [[0, 1, 50], [1, 2, 60], [2, 0, 70], [3, 1, 80]]
    },
    {
      name: 'Series3',
      type: 'bar',
      barCategoryGap: '50%',
      barGap: '-100%',
      data: [[0, 2, 90], [1, 0, 100], [2, 1, 110], [3, 2, 120]]
    }
  ]
};

在上面的示例代码中，每个系列对应一个类目轴的数据。通过设置 barCategoryGap 和 barGap 属性，实现了柱状图的错开展示效果。你可以根据实际情况调整 barCategoryGap 和 barGap 的值。