ECharts

Y轴文本过长被遮挡

问题描述

在ECharts图表中，当Y轴的刻度文本内容过长时，文本可能会被图表容器边缘截断或完全遮挡。

解决方案

方案1：使用 grid.containLabel 属性

最推荐的解决方案是将 grid.containLabel 设置为 true，这会自动调整图表的布局，确保标签内容不被截断。

option = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true  // 自动调整布局以包含标签
  },
  yAxis: {
    type: 'category',
    data: ['非常长的标签内容示例1', '非常长的标签内容示例2', '非常长的标签内容示例3', '标签4', '标签5']
  },
  xAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70],
    type: 'bar'
  }]
};

方案2：调整 grid.left 属性

手动增大左侧边距，为Y轴文本预留足够空间：

option = {
  grid: {
    left: '15%',  // 增加左侧边距
    right: '4%',
    bottom: '3%'
  },
  // 其他配置...
};

方案3：使用 axisLabel.formatter 截断或换行

可以使用格式化函数对长文本进行处理，如截断显示或强制换行：

option = {
  yAxis: {
    type: 'category',
    data: ['非常长的标签内容示例1', '非常长的标签内容示例2', '标签3'],
    axisLabel: {
      // 截断显示
      formatter: function(value) {
        if (value.length > 10) {
          return value.substring(0, 10) + '...';
        }
        return value;
      }
    }
  },
  // 其他配置...
};

// 或者强制换行
option = {
  yAxis: {
    type: 'category',
    data: ['非常长的标签内容示例1', '非常长的标签内容示例2', '标签3'],
    axisLabel: {
      formatter: function(value) {
        const interval = 6;
        const result = [];
        for (let i = 0; i < value.length; i += interval) {
          result.push(value.substring(i, i + interval));
        }
        return result.join('\n');
      },
      interval: 0,  // 显示所有标签
      rotate: 0     // 不旋转
    }
  },
  // 其他配置...
};

方案4：旋转标签

将Y轴标签旋转一定角度，减少水平占用空间：

option = {
  yAxis: {
    type: 'category',
    data: ['非常长的标签内容示例1', '非常长的标签内容示例2', '标签3'],
    axisLabel: {
      rotate: 30  // 旋转30度
    }
  },
  // 其他配置...
};

各种方案的优缺点对比

解决方案	优点	缺点
grid.containLabel	自动适应，无需手动调整	某些复杂布局可能需要微调
调整 grid.left	简单直接，效果可控	需要手动测试找到合适值
axisLabel.formatter	精确控制文本显示	需要编写额外的格式化逻辑
旋转标签	能容纳较长文本	旋转角度过大时可读性降低

建议

1. 优先使用 grid.containLabel: true，这是最智能和推荐的方案
2. 对于空间有限的场景，可以组合使用截断和调整边距的方法
3. 考虑数据标签的实际内容，如果普遍较长，建议在数据源处预处理或使用缩写
4. 对于重要信息，避免使用截断方式，确保用户能看到完整内容
5. 在多设备适配时，需要测试不同屏幕尺寸下的显示效果

相关配置参考

• grid.containLabel - 控制是否包含标签
• grid.left - 控制左侧边距
• yAxis.axisLabel - 控制轴标签的各种属性
• yAxis.axisLabel.formatter - 格式化函数配置