用echarts做知识图谱节点图形的文本标签太长解决办法

最近在做知识图谱可视化的时候遇到一个文通，因为有些节点数据，如产品信息之类的信息的name属性太长了，结果就超过了图形，很难看，不协调，经过一番实验加上ChatGPT最终还是解决了

‍

解决办法如下

首先，ECharts 提供了相关的配置选项来解决这个问题。在节点的 label​ 属性中设置 formatter​ 函数来对节点标签进行自定义。同时，使用 ellipsis​ 函数对文本进行省略。下面是一个示例代码：

// 引入 ECharts
import * as echarts from 'echarts';

// 省略号函数
function ellipsis(str, maxLength) {
    return str.length > maxLength ? str.slice(0, maxLength) + '...' : str;
}

// 配置 ECharts 图谱
const option = {
    series: [
        {
            type: 'graph',
            layout: 'force',
            data: [
                // 节点数据
            ],
            links: [
                // 关系数据
            ],
            label: {
                show: true,
                position: 'right',
                formatter: function (params) {
                    // 自定义节点标签的显示方式
                    const maxLength = 10; // 设置最大显示长度
                    const labelText = params.data.name;
                    return ellipsis(labelText, maxLength);
                }
            }
        }
    ]
};

// 初始化图表
const chart = echarts.init(document.getElementById('main'));
chart.setOption(option);

这个示例中，ellipsis​ 函数用于截断超出指定长度的字符串并添加省略号。通过设置 formatter​ 函数，自定义节点文本标签的显示方式。maxLength​表示最大显示长度，当节点的文本超出这个长度时，它将以省略号表示。

‍ps: 附上echarts官方配置链接