溢出时截断 categoryAxis 标签

当使用 echarts 绘制图表时，如果 categoryAxis 的标签文字过长，可能会导致标签文字溢出，影响图表的美观性和可读性。在这种情况下，我们可以使用 echarts 提供的截断功能，使得溢出的标签文字能够被截断，从而不影响整个图表的显示效果。在本文中，我们将会介绍如何在 echarts 中实现"溢出时截断 categoryAxis 标签"的功能。

方式一：使用 formatter 属性

我们可以通过设置 categoryAxis 的 formatter 属性来实现标签的截断。具体的做法是：使用 JS 的字符串截取方法截取标签，再在结尾处添加省略号。代码如下所示：

option = {
  ...,
  xAxis: {
    type: 'category',
    data: ['标签1', '标签2', '标签3', '标签4', '标签5', '标签6', '标签7'],
    axisLabel: {
      formatter: function(value) {
        if (value.length > 3) { // 判断标签字符长度是否超过3
          return value.substring(0, 3) + '...'; // 截取标签字符长度，末尾添加省略号
        } else {
          return value;
        }
      }
    }
  },
  ...
};

我们可以将上面的代码复制到 echarts 官网的“迷你教程”中进行实验，并查看效果。

方式二：使用 tooltip 属性

另一种实现截断 categoryAxis 标签的方法是：使用 tooltip 的触发方式为 'axis'，并将 axisPointer 的 type 属性设置为 'shadow'。在这种方式下，标签文字将被截断并显示在 tooltip 中。代码如下所示：

option = {
  ...,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['标签1', '标签2', '标签3', '标签4', '标签5', '标签6', '标签7'],
    axisLabel: {
      interval: 0, // 强制显示所有标签
      rotate: -45 // 标签旋转角度
    }
  },
  ...
};

我们也可以将上面的代码复制到 echarts 官网的“迷你教程”中进行实验，并查看效果。

以上两种实现截断 categoryAxis 标签的方法都很简单，程序员可以根据实际情况选择其中一种或多种方式进行实现。