ECharts关系图连接线上文字如何实现自动换行？

Question

在使用ECharts关系图时，连接线上的文字若过长，可能会超出显示范围或重叠，影响可读性。如何实现自动换行成为常见难题。ECharts本身未直接提供连接线上文字的自动换行功能，但可通过以下方法解决：一是自定义 `formatter` 函数，将长文本按指定长度分割为多行字符串数组，并用 `\n` 拼接；二是借助 `edgeLabel` 属性调整文字样式与位置，确保布局合理。例如，通过计算节点间距动态设置字体大小和换行点，提升视觉效果。此问题的核心在于结合数据特点与图表尺寸，灵活处理文字展示逻辑，优化用户体验。

Answer 1

1. 问题背景与分析

在使用ECharts关系图时，连接线上的文字若过长，可能会超出显示范围或重叠，影响可读性。这是一个常见的技术问题，尤其是在数据量较大、节点间距较近的情况下更为突出。

ECharts本身未直接提供连接线上文字的自动换行功能。然而，我们可以通过自定义 `formatter` 函数和调整 `edgeLabel` 属性来解决这一问题。以下是具体的技术分析：

• 问题现象: 当连接线上的文字过长时，文字可能超出图表边界或与其他元素重叠，导致用户无法清晰阅读。
• 根本原因: ECharts默认的文字处理方式不支持动态换行，且文字样式与位置固定，难以适应不同数据和图表尺寸。
• 解决方案方向: 需要结合数据特点与图表尺寸，灵活处理文字展示逻辑。

2. 解决方案设计

为了解决上述问题，我们可以从以下两个方面入手：

1. 自定义 `formatter` 函数: 将长文本按指定长度分割为多行字符串数组，并用 `\n` 拼接。
2. 调整 `edgeLabel` 属性: 动态设置字体大小和换行点，确保文字布局合理。

以下是实现代码示例：

function autoWrapText(text, maxLength) {
    if (!text) return '';
    let result = [];
    while (text.length > maxLength) {
        let index = text.substring(0, maxLength).lastIndexOf(' ');
        if (index === -1) index = maxLength;
        result.push(text.substring(0, index));
        text = text.substring(index).trim();
    }
    result.push(text);
    return result.join('\n');
}

option = {
    series: [{
        type: 'graph',
        edgeLabel: {
            normal: {
                show: true,
                formatter: function(params) {
                    return autoWrapText(params.data.name, 10); // 自定义换行
                },
                fontSize: 12
            }
        },
        data: [...], // 节点数据
        links: [...]  // 连接线数据
    }]
};
    

3. 动态优化策略

为了进一步提升用户体验，可以引入动态优化策略。例如，根据节点间距动态调整字体大小和换行点：

参数	描述	推荐值
字体大小	根据节点间距调整，避免文字过大或过小	10px ~ 14px
换行长度	基于连接线长度计算，确保每行文字适配	8 ~ 15 字符

通过这种方式，可以有效避免文字溢出或重叠问题，同时保持图表整体美观。

4. 流程图说明

以下是整个解决方案的流程图，展示了从问题分析到最终实现的关键步骤：

graph TD;
            A[问题识别] --> B{文字过长？};
            B --是--> C[自定义 formatter];
            C --> D[分割字符串];
            D --> E[拼接换行符];
            B --否--> F[调整 edgeLabel];
            F --> G[动态设置字体大小];
            G --> H[优化文字布局];

通过以上流程，我们可以系统地解决ECharts关系图中连接线文字过长的问题。