Apache ECharts同类别下多X轴柱状图偏移分离问题求助

我编写了如下Apache ECharts代码，期望实现同类别下各柱状条互不重叠，但当前代码未达到预期效果，恳请帮忙修正代码以达成目标。

<!DOCTYPE html>
<html>
  <head>
    <title>Apache ECharts - Multiple X-Axes with Separated Bars</title>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="chart" style="width: 600px; height: 400px"></div>

    <script>
      const xAxisData1 = ["Category 1", "Category 2", "Category 3"];
      const xAxisData2 = ["Category A", "Category B", "Category C"];
      const xAxisData3 = ["Category X", "Category Y", "Category Z"];

      const seriesData1 = [100, 200, 150];
      const seriesData2 = [300, 150, 250];
      const seriesData3 = [50, 100, 200];

      const chart = echarts.init(document.getElementById("chart"));

      const options = {
        grid: [
          { left: 50, right: 10 }, // grid for the first x-axis
          { left: 150, right: 10 }, // grid for the second x-axis
          { left: 250, right: 10 }, // grid for the third x-axis
        ],
        xAxis: [
          {
            type: "category",
            data: xAxisData1,
            offset: 0, // no offset for the first x-axis
            axisLine: {
              onZero: false, // show the axis line on the zero position
            },
          },
          {
            type: "category",
            data: xAxisData2,
            offset: 40, // some offset for the second x-axis
            axisLine: {
              onZero: false, // show the axis line on the zero position
            },
          },
          {
            type: "category",
            data: xAxisData3,
            offset: 80, // more offset for the third x-axis
            axisLine: {
              onZero: false, // show the axis line on the zero position
            },
          },
        ],
        yAxis: {},
        series: [
          {
            type: "bar",
            data: seriesData1,
            xAxisIndex: 0,
            barWidth: `${50 / xAxisData1.length}%`,
            barGap: `-100%`,
            barCategoryGap: "20%",
            itemStyle: {
              color: "#c23531", // red color for the first series
            },
          },
          {
            type: "bar",
            data: seriesData2,
            xAxisIndex: 1,
            barWidth: 20, // set the bar width to 20px
            barGap: "10%",
            barCategoryGap: "20%",
            itemStyle: {
              color: "#2f4554", // blue color for the second series
            },
          },
          {
            type: "bar",
            data: seriesData3,
            xAxisIndex: 2,
            barGap: "10%",
            barCategoryGap: "20%",
            itemStyle: {
              color: "#61a0a8", // green color for the third series
            },
          },
        ],
      };

      chart.setOption(options);
    </script>
  </body>
</html>

当前输出效果：

问题分析与修正方案 #

原代码核心问题：多X轴共享同一Y轴且未隔离绘图区域，同时错误设置barGap: -100%强制系列重叠，导致所有柱状条挤在同一空间。

要实现三组柱状条互不重叠，需给每个系列分配独立的绘图区域、X轴和Y轴，让它们横向排列。以下是修正后的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Apache ECharts - Separated Bar Groups</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="chart" style="width: 900px; height: 400px"></div>

    <script>
      const xAxisData1 = ["Category 1", "Category 2", "Category 3"];
      const xAxisData2 = ["Category A", "Category B", "Category C"];
      const xAxisData3 = ["Category X", "Category Y", "Category Z"];

      const seriesData1 = [100, 200, 150];
      const seriesData2 = [300, 150, 250];
      const seriesData3 = [50, 100, 200];

      const chart = echarts.init(document.getElementById("chart"));

      const options = {
        // 三个独立的grid，横向分配空间，互不重叠
        grid: [
          { left: "5%", right: "65%", top: "20%", bottom: "20%" },
          { left: "35%", right: "35%", top: "20%", bottom: "20%" },
          { left: "65%", right: "5%", top: "20%", bottom: "20%" }
        ],
        // 三个独立的X轴，分别绑定对应grid
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: xAxisData1,
            axisLine: { onZero: true },
            axisLabel: { rotate: 15 }
          },
          {
            type: "category",
            gridIndex: 1,
            data: xAxisData2,
            axisLine: { onZero: true },
            axisLabel: { rotate: 15 }
          },
          {
            type: "category",
            gridIndex: 2,
            data: xAxisData3,
            axisLine: { onZero: true },
            axisLabel: { rotate: 15 }
          }
        ],
        // 三个独立的Y轴，分别绑定对应grid
        yAxis: [
          { gridIndex: 0, axisLabel: { formatter: '{value}' } },
          { gridIndex: 1, axisLabel: { formatter: '{value}' } },
          { gridIndex: 2, axisLabel: { formatter: '{value}' } }
        ],
        series: [
          {
            type: "bar",
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: seriesData1,
            barWidth: "40%",
            barCategoryGap: "30%",
            itemStyle: { color: "#c23531" }
          },
          {
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: seriesData2,
            barWidth: "40%",
            barCategoryGap: "30%",
            itemStyle: { color: "#2f4554" }
          },
          {
            type: "bar",
            xAxisIndex: 2,
            yAxisIndex: 2,
            data: seriesData3,
            barWidth: "40%",
            barCategoryGap: "30%",
            itemStyle: { color: "#61a0a8" }
          }
        ]
      };

      chart.setOption(options);
    </script>
  </body>
</html>

关键修改点 #

• 独立Grid配置：通过grid数组定义三个互不重叠的绘图区域，用百分比设置left/right实现横向排列
• 轴与Grid绑定：每个X轴和Y轴通过gridIndex绑定到对应绘图区域，避免跨区域渲染
• 移除错误配置：删除导致重叠的barGap: -100%，设置合理的barWidth和barCategoryGap控制间距
• 布局优化：加宽图表适配三个区域，给X轴标签添加旋转避免文字重叠

内容的提问来源于stack exchange，提问作者Khalil Al Hooti