如何在React中使用ECharts渲染带多层X轴的层级数据

• 多X轴分层配置：在xAxis数组中定义三个轴，通过offset属性设置垂直偏移量（比如依次设为50、25、0），让三个轴从上到下分层排列，偏移数值可根据字体大小和间距需求灵活调整。
• 解决标签不全问题：给每个X轴的axisLabel配置interval: 0，强制显示全部标签；同时设置align: 'center'保证标签居中对齐，避免错位导致的显示截断。如果标签过长，可添加rotate: 45旋转标签，或用formatter: (value) => value.split('').join('\n')实现换行显示。
• 轴与数据的关联匹配：
  • 最底层轴对应最细粒度的数据分类，中层轴对应中间分类，顶层轴对应大分类，三个轴的data数组长度要和数据系列的长度保持一致。
  • 大分类需要跨多个小分类时，重复大分类标签数据，同时设置顶层轴的axisTick.interval为对应小分类的数量，让刻度线覆盖整个分类范围。
• React组件示例代码：

  import ReactECharts from 'echarts-for-react';
  
  const MultiLayerXAxisChart = () => {
    const option = {
      xAxis: [
        // 顶层大分类轴
        {
          type: 'category',
          data: ['产品组A', '产品组A', '产品组B', '产品组B'],
          offset: 50,
          axisLabel: { interval: 0, align: 'center', fontSize: 12 },
          axisTick: { interval: 1, length: 10 }, // 每2个小分类对应一个大分类刻度
          axisLine: { show: false }
        },
        // 中层中分类轴
        {
          type: 'category',
          data: ['系列1', '系列2', '系列1', '系列2'],
          offset: 25,
          axisLabel: { interval: 0, align: 'center', fontSize: 12 },
          axisTick: { length: 8 },
          axisLine: { show: false }
        },
        // 底层小分类轴
        {
          type: 'category',
          data: ['型号X', '型号Y', '型号Z', '型号W'],
          offset: 0,
          axisLabel: { interval: 0, align: 'center', fontSize: 12 },
          axisTick: { length: 6 }
        }
      ],
      yAxis: { type: 'value', name: '销量' },
      series: [
        {
          type: 'bar',
          data: [120, 180, 90, 150],
          xAxisIndex: 2, // 绑定到底层小分类轴
          itemStyle: { color: '#3370FF' }
        }
      ],
      grid: { bottom: 100 } // 预留足够底部空间显示三层轴
    };
  
    return <ReactECharts option={option} style={{ height: '400px' }} />;
  };
  
  export default MultiLayerXAxisChart;
  

• 视觉优化要点：调整grid.bottom值预留足够空间容纳三层轴；通过axisLine.show控制轴线显示，axisTick.length区分不同层级的刻度长度，增强视觉层次感；如果需要，给不同层级的轴标签设置不同字体大小，进一步区分层级。

内容的提问来源于stack exchange，提问作者Carson