最近在做知识图谱可视化的时候遇到一个文通,因为有些节点数据,如产品信息之类的信息的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官方配置链接