如何让ECharts轴标签过长时自动截断并添加省略号？

要实现轴上长名称超出容器时自动显示省略号，无需硬编码maxWidth，可以利用ECharts轴标签的formatter回调结合内置宽度计算方法动态处理：

核心实现代码 #

修改x轴（或y轴）的axisLabel配置，添加动态截断逻辑：

xAxis: {
  type: 'category',
  data: ['World1', 'World2', 'World3', 'World4 is not enough and check this one is truncating or not'],
  axisLabel: {
    formatter: function(value, index) {
      // 获取当前文本的渲染宽度
      const labelWidth = this.getWidth(value);
      // 动态计算单个标签的最大可用宽度（轴总宽度均分，预留20%间距）
      const maxLabelWidth = this.axis.getWidth() / this.data.length * 0.8;
      
      if (labelWidth > maxLabelWidth) {
        const ellipsis = '...';
        const ellipsisWidth = this.getWidth(ellipsis);
        let truncatedText = value;
        
        // 逐步截断文本，直到加上省略号后的宽度符合要求
        while (this.getWidth(truncatedText) + ellipsisWidth > maxLabelWidth && truncatedText.length > 0) {
          truncatedText = truncatedText.slice(0, -1);
        }
        return truncatedText + ellipsis;
      }
      return value;
    },
    // 可选：设置文本居中对齐，优化省略号显示效果
    align: 'center'
  }
}

关键说明 #

• this.getWidth(text)：ECharts在formatter回调中提供的内置方法，用于精准计算文本的实际渲染宽度
• 动态计算maxLabelWidth：基于轴的总宽度和标签数量均分，预留20%空间避免标签重叠
• 循环截断逻辑：确保最终文本+省略号的宽度严格控制在可用范围内，避免硬截断导致的显示问题

如果是y轴标签处理，只需将this.axis.getWidth()替换为this.axis.getHeight()，并按标签数量均分高度即可。

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