Cuando se rastrean transferencias continuas, distribuciones de recursos o recorridos de usuarios de múltiples etapas, el Gráfico de Sankey es la herramienta de visualización principal. Al dibujar bandas de flujo proporcionales entre nodos de etapas secuenciales, los gráficos de Sankey ilustran cómo las cantidades totales se dividen, combinan y transitan a través de sistemas complejos—como embudos de conversión de usuarios en sitios web, redes de distribución de energía o asignaciones presupuestarias organizacionales.
La mecánica de los gráficos de Sankey
En Apache ECharts, los gráficos de Sankey utilizan type: 'sankey'. Similar a los gráficos de red, un gráfico de Sankey se define mediante una lista de nodos (o data) y enlaces dirigidos links (o aristas). Cada enlace contiene un nombre de nodo de origen nodo, un nombre de nodo de destino nodo y un valor numérico valor que determina el ancho visual de la línea de flujo conectada.
1. Configuración esencial
Para construir un gráfico de Sankey básico, declare sus elementos de nodo dentro de data y defina los volúmenes de flujo dirigidos en links:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: [
{ name: 'Ingresos Totales' },
{ name: 'Ventas de Productos' },
{ name: 'Servicios' },
{ name: 'Marketing' },
{ name: 'I+D' },
{ name: 'Ganancias' }
],
links: [
{ source: 'Ingresos Totales', target: 'Ventas de Productos', value: 70 },
{ source: 'Ingresos Totales', target: 'Servicios', value: 30 },
{ source: 'Ventas de Productos', target: 'Marketing', value: 30 },
{ source: 'Ventas de Productos', target: 'I+D', value: 25 },
{ source: 'Ventas de Productos', target: 'Ganancias', value: 15 },
{ source: 'Servicios', target: 'Ganancias', value: 30 }
],
emphasis: {
focus: 'adjacency'
},
lineStyle: {
color: 'gradiente',
curveness: 0.5
}
}
]
};
Técnicas estructurales avanzadas
Los gráficos de Sankey se pueden personalizar con orientaciones de flujo vertical, colores de nodos de múltiples niveles y resaltado dinámico de enlaces para rastrear rutas individuales a través de redes complejas.
1. Orientación de flujo vertical
Establezca orient: 'vertical'para transformar los flujos de etapas horizontales en una vista de cascada vertical de arriba hacia abajo:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
orient: 'vertical',
nodeWidth: 20,
nodeGap: 16,
data: [
{ name: 'Visitas al Sitio Web' },
{ name: 'Página de Producto' },
{ name: 'Rebote Directo' },
{ name: 'Carrito' },
{ name: 'Finalizar Compra' }
],
links: [
{ source: 'Visitas al Sitio Web', target: 'Página de Producto', value: 1000 },
{ source: 'Visitas al Sitio Web', target: 'Rebote Directo', value: 400 },
{ source: 'Página de Producto', target: 'Carrito', value: 600 },
{ source: 'Carrito', target: 'Finalizar Compra', value: 450 }
],
lineStyle: {
color: 'fuente',
curveness: 0.5
}
}
]
};
Ajuste fino del diseño y estilo de enlaces
Ajustar el espaciado entre nodos, la curvatura de las líneas y el comportamiento de resaltado al pasar el cursor mantiene los flujos complejos de múltiples etapas limpios y legibles.
1. Controles de espacio entre nodos y flujos de gradiente de origen a destino
Personalizar nodeGap y establecer lineStyle.color: 'gradiente'crea transiciones de color suaves entre etapas:
option = {
series: [
{
type: 'sankey',
left: '5%',
right: '15%',
nodeWidth: 24,
nodeGap: 18,
draggable: true,
label: {
position: 'right',
color: '#333',
fontSize: 12
},
data: [
{ name: 'Fuente A', itemStyle: { color: '#5470c6' } },
{ name: 'Fuente B', itemStyle: { color: '#91cc75' } },
{ name: 'Etapa 1', itemStyle: { color: '#fac858' } },
{ name: 'Etapa 2', itemStyle: { color: '#ee6666' } },
{ name: 'Salida Final', itemStyle: { color: '#73c0de' } }
],
links: [
{ source: 'Fuente A', target: 'Etapa 1', value: 50 },
{ source: 'Fuente B', target: 'Etapa 1', value: 30 },
{ source: 'Etapa 1', target: 'Etapa 2', value: 60 },
{ source: 'Etapa 1', target: 'Salida Final', value: 20 },
{ source: 'Etapa 2', target: 'Salida Final', value: 60 }
],
lineStyle: {
color: 'gradiente',
curveness: 0.6,
opacity: 0.4
}
}
]
};
Prácticas recomendadas estratégicas
- Mantenga la conservación del flujo:Asegúrese de que la suma de los valores que fluyen hacia un nodo sea igual o lógicamente explique los valores que salen, para evitar brechas visuales engañosas.
- Habilite
emphasis.focus: 'adyacencia':Al tratar flujos de múltiples etapas, enfocarse en los enlaces adyacentes al pasar el cursor permite aislar rutas específicas sin ruido visual. - Utilice enlaces con gradiente: Configurando
lineStyle.color: 'gradiente'mezcla suavemente el color del nodo de origen con el color del nodo destino, haciendo que las transiciones de múltiples etapas sean visualmente intuitivas.