Recientemente, cuando estaba haciendo una visualización del mapa de conocimiento, encontré un Wentong, porque el atributo del nombre de algunos datos de nodo, como la información del producto, era demasiado largo y el resultado excedía el gráfico, que era feo y descoordinado. Después de algunos experimentos, Agregué ChatGPT finalmente lo resolví
La solución es la siguiente
En primer lugar, ECharts proporciona opciones de configuración relacionadas para resolver este problema. label
Configure la función en las propiedades del nodo formatter
para personalizar la etiqueta del nodo. Al mismo tiempo, use ellipsis
la función para omitir el texto. Aquí hay un código de muestra:
// 引入 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);
En este ejemplo, ellipsis
la función se usa para truncar una cadena que excede la longitud especificada y agregar puntos suspensivos. formatter
Personalice la visualización de las etiquetas de texto de los nodos configurando la función. maxLength
Indica la longitud máxima de visualización, cuando el texto del nodo supere esta longitud, se representará con puntos suspensivos.