Echarts X轴标签过长显示不全的解决

Echarts 是国内图表组件占有率最高的第三方库，在使用中我们经常遇到 X 轴标签文字过长导致显示不全或 X 轴标签刻度间隔不够的问题。本文详细讲解 4 种标签超长显示问题的解决方案，轻松解决所有场景下的超长问题。

方法一：Echarts X 轴 标签倾斜摆放

1
2
3
4
5
6
7
8
9
10
11
xAxis: {
    data: [
        ...
    ],
    nameLocation: 'end', // 名称显示在 X 坐标轴的位置
    axisLabel: {
      //  X 坐标轴标签相关设置
      interval: 0, //使x轴文字显示全
      rotate: '45'
    }
  },

方法二：Echarts X 轴 限制每行字数，换行显示

「换行显示标签」适合按字数断句的场景，X 轴每个标签都是前 N 个字一断是一个完整的词时，特别适合这种场景实用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
xAxis: {
  data: [
  ...
  ],
  nameLocation: 'end', // 名称显示在 X 坐标轴的位置
  axisLabel: {
    formatter: function (params) {
      var newParamsName = ''; // 拼接后的新字符串
      var paramsNameNumber = params.length; // 实际标签数
      var provideNumber = 3; // 每行显示的字数
      var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 如需换回，算出要显示的行数

      if (paramsNameNumber > provideNumber) {
        /** 循环每一行,p表示行 */

        for (var i = 0; i < rowNumber; i++) {
          var tempStr = ''; // 每次截取的字符串
          var start = i * provideNumber; // 截取位置开始
          var end = start + provideNumber; // 截取位置结束

          // 最后一行的需要单独处理

          if (i == rowNumber - 1) {
            tempStr = params.substring(start, paramsNameNumber);
          } else {
            tempStr = params.substring(start, end) + '\n';
          }
          newParamsName += tempStr;
        }
      } else {
        newParamsName = params;
      }

      return newParamsName;
    }
  }
},

方法三：Echarts X 轴 垂直竖显文字

「垂直显示标签」的情况，显得更正式一些。

1
2
3
4
5
6
7
8
9
10
11
12
xAxis: {
    data: [
        ...
    ],
    nameLocation: 'end', // 名称显示在 X 坐标轴的位置
    axisLabel: {
      interval: 0, //使x轴文字显示全
      formatter: function (value) {
        return value.split('').join('\n');
      }
    }
  },

总的来说，本质就两种方法：

  1. 文本倾斜显示
  2. 使用自定义的formatter