Al mapear redes interconectadas, jerarquías estructurales o relaciones complejas entre entidades, el Gráfico de red (o gráfico de red) es el marco visual ideal. Al mostrar elementos como nodos y conexiones como enlaces dirigidos o no dirigidos, los gráficos de red permiten a los usuarios explorar clústeres, árboles de dependencia y flujos relacionalesque los gráficos tabulares estándar no pueden transmitir: como arquitecturas de microservicios, interacciones en redes sociales o grafos de conocimiento.
La mecánica de los gráficos de red
En Apache ECharts, los gráficos de red utilizan type: 'graph'. En lugar de mapear valores numéricos directamente a coordenadas horizontales y verticales, un gráfico de red toma una colección de nodos (o data) y links (o aristas). ECharts luego organiza estos nodos utilizando posiciones de coordenadas fijas, diseños circulares o un motor físico dinámico de dirección por fuerza.
1. Configuración esencial
Para crear un gráfico de red básico utilizando física de dirección por fuerza, declare sus nodos dentro de data, asigne conexiones dentro de links, y establezca layout: 'force':
option = {
tooltip: {},
legend: {
data: ['Servicios', 'Bases de datos']
},
series: [
{
name: 'Red del sistema',
type: 'graph',
layout: 'force',
roam: true, // Permite acercar y desplazar
label: {
show: true,
position: 'right'
},
force: {
repulsion: 100,
edgeLength: 80
},
data: [
{ id: '0', name: 'Pasarela de API', symbolSize: 30, category: 0 },
{ id: '1', name: 'Servicio de autenticación', symbolSize: 20, category: 0 },
{ id: '2', name: 'Servicio de pedidos', symbolSize: 20, category: 0 },
{ id: '3', name: 'Base de datos de usuarios', symbolSize: 25, category: 1 },
{ id: '4', name: 'Base de datos de pedidos', symbolSize: 25, category: 1 }
],
links: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '1', target: '3' },
{ source: '2', target: '4' }
],
categories: [
{ name: 'Servicios' },
{ name: 'Bases de datos' }
]
}
]
};
Técnicas Estructurales Avanzadas
Los gráficos de datos admiten motores de diseño alternativos como alineación en anillo circular o flechas dirigidas para mostrar claramente las dependencias de datos.
1. Diseño circular con flechas de enlace dirigidas
Establezca layout: 'circular'para organizar los nodos en una estructura de anillo limpia y habilitar flechas en los bordes para mostrar relaciones direccionales entre componentes:
option = {
tooltip: {},
series: [
{
type: 'graph',
layout: 'circular',
roam: true,
label: {
show: true,
position: 'outside'
},
edgeSymbol: ['none', 'arrow'], // Dibujar flechas en los extremos de los enlaces
edgeSymbolSize: [0, 8],
data: [
{ id: 'A', name: 'Nodo A', symbolSize: 24 },
{ id: 'B', name: 'Nodo B', symbolSize: 24 },
{ id: 'C', name: 'Nodo C', symbolSize: 24 },
{ id: 'D', name: 'Nodo D', symbolSize: 24 },
{ id: 'E', name: 'Nodo E', symbolSize: 24 }
],
links: [
{ source: 'A', target: 'B' },
{ source: 'B', target: 'C' },
{ source: 'C', target: 'D' },
{ source: 'D', target: 'E' },
{ source: 'E', target: 'A' },
{ source: 'A', target: 'C' }
],
lineStyle: {
color: '#5470c6',
width: 2,
curveness: 0.2 // Curvar las líneas de conexión para evitar solapamientos
}
}
]
};
Ajuste fino del diseño y estilo de los nodos
Ajustar la curvatura de los bordes, las sombras del borde de los nodos y las opciones de interacción mantiene legibles los grupos densos de redes en páginas web interactivas.
1. Colores personalizados por categoría de nodo y física de fuerza
Ajuste los valores de repulsión y los estilos de línea para crear grupos estructurados y visualmente separados:
option = {
legend: {
top: '5%',
left: 'center'
},
series: [
{
type: 'graph',
layout: 'force',
roam: true,
draggable: true,
force: {
repulsion: 250,
gravity: 0.1,
edgeLength: [50, 100]
},
categories: [
{ name: 'Frontend', itemStyle: { color: '#5470c6' } },
{ name: 'Backend', itemStyle: { color: '#91cc75' } },
{ name: 'Infraestructura', itemStyle: { color: '#fac858' } }
],
data: [
{ name: 'Aplicación Web', category: 0, symbolSize: 32 },
{ name: 'Aplicación Móvil', category: 0, symbolSize: 28 },
{ name: 'Pasarela de API', category: 1, symbolSize: 26 },
{ name: 'Microservicio A', category: 1, symbolSize: 22 },
{ name: 'Microservicio B', category: 1, symbolSize: 22 },
{ name: 'Caché Redis', category: 2, symbolSize: 20 },
{ name: 'PostgreSQL', category: 2, symbolSize: 24 }
],
links: [
{ source: 'Aplicación Web', target: 'Pasarela de API' },
{ source: 'Aplicación Móvil', target: 'Pasarela de API' },
{ source: 'Pasarela de API', target: 'Microservicio A' },
{ source: 'Pasarela de API', target: 'Microservicio B' },
{ source: 'Microservicio A', target: 'Caché Redis' },
{ source: 'Microservicio B', target: 'PostgreSQL' }
],
lineStyle: {
color: 'source', // Color del borde según el color del nodo origen
width: 2,
curveness: 0.1
}
}
]
};
Prácticas Estratégicas Recomendadas
- Habilite
roam: truepara navegación:Las redes interactivas crecen rápidamente. Habilitar la navegación con zoom y desplazamiento permite a los usuarios enfocarse en grupos específicos sin sentirse abrumados. - Aplicar
curvaturaa los bordes:Establecer una ligera curvatura (por ejemplo,lineStyle.curveness: 0.1a0.2) evita que los enlaces bidireccionales entre dos nodos idénticos se solapen en una sola línea. - Repulsión de física de fuerza de equilibrio: Ajustar
fuerza.repulsioncon cuidado. Los valores demasiado bajos harán que los nodos se solapen formando un grupo denso, mientras que los valores demasiado altos harán que los nodos se salgan completamente del lienzo visible.