echarts pie 文字格式改为可换行

小焱写作

发布于 2025-09-03 15:43:48

13400

代码可运行

运行总次数：0

代码可运行

在 ECharts 饼图中，要实现标签文字换行，需要通过 label.formatter 自定义格式化函数，结合换行符 '\n' 手动拆分文本。以下是具体实现方法和示例：

核心原理

ECharts 的标签文字默认不自动换行，但可以通过以下方式强制换行：

使用 formatter 函数处理文本，按固定长度拆分或按特定字符（如空格）拆分；
在需要换行的位置插入 '\n'（换行符）；
确保标签容器有足够空间显示多行文本（可通过 label.height 或 label.lineHeight 调整）。

实现示例

场景1：按固定字数换行

例如，每5个字符换一行，适合文本长度不固定的情况：

option = {
  series: [
    {
      type: 'pie',
      data: [
        { name: '这是一段很长的文本需要换行显示', value: 30 },
        { name: '短文本', value: 20 },
        { name: '中等长度文本换行', value: 50 }
      ],
      label: {
        show: true,
        // 自定义格式化函数：每5个字符换行
        formatter: function(params) {
          const text = params.name; // 获取标签文字
          let result = '';
          let len = 0;
          for (let i = 0; i < text.length; i++) {
            // 中文占2个字符宽度，英文/数字占1个（简单处理）
            len += text.charCodeAt(i) > 127 ? 2 : 1;
            result += text[i];
            if (len >= 10) { // 累计宽度达到10时换行（约5个汉字）
              result += '\n';
              len = 0;
            }
          }
          return result + '\n' + params.percent + '%'; // 最后添加百分比
        },
        lineHeight: 20, // 行高，控制行间距
        height: 100, // 标签最大高度（避免内容溢出）
        fontSize: 12
      },
      labelLine: {
        show: true // 显示连接线，避免标签与扇区脱节
      }
    }
  ]
};

场景2：按特定字符（如空格）换行

如果文本中包含空格，可按空格拆分换行：

label: {
  formatter: function(params) {
    // 按空格拆分文本，每个空格后换行
    const text = params.name.split(' ').join('\n');
    return text + '\n' + params.value; // 拼接数值
  }
}

场景3：固定字段换行（如名称和数值分行）

将类别名称和数值/百分比分两行显示：

label: {
  // 名称一行，百分比一行
  formatter: '{b}\n{d}%' 
  // {b} 表示名称，{d} 表示百分比，\n 分隔两行
}

注意事项

换行符兼容性：'\n' 在大多数浏览器和 ECharts 版本中有效，无需转义；
标签位置调整：多行文本可能导致标签超出容器，可通过 label.position 调整标签位置（如 'outside' 外部显示），或缩短 labelLine.length 避免连接线过长；
自动换行局限：ECharts 暂无内置自动换行功能，需通过自定义函数实现，复杂场景下可能需要结合文本长度动态调整拆分规则。

通过以上方法，可灵活控制饼图标签的换行格式，提升长文本的可读性。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-07-29，如有侵权请联系 cloudcommunity@tencent.com 删除

兼容性