Use echarts para hacer que la etiqueta de texto del gráfico del nodo del mapa de conocimiento sea demasiado larga solución

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. labelConfigure la función en las propiedades del nodo formatterpara personalizar la etiqueta del nodo. Al mismo tiempo, use ellipsisla 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, ellipsisla función se usa para truncar una cadena que excede la longitud especificada y agregar puntos suspensivos. formatterPersonalice 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.

‍ps: Adjunte el enlace de configuración oficial de echarts