Al presentar datos estructurados con relaciones claras entre padres e hijos—como diagramas organizativos, directorios del sistema de archivos, árboles de decisión o clasificaciones taxonómicas—el Gráfico de árbolproporciona un marco visual intuitivo. Al organizar los nodos de datos a lo largo de caminos ramificados, los gráficos de árbol permiten a los usuarios explorar jerarquías anidadas y rastrear conexiones desde un nodo raíz central hasta las subramas.
La mecánica de los gráficos de árbol
En Apache ECharts, los gráficos de árbol utilizan type: 'tree'. A diferencia de los gráficos estándar con ejes X e Y explícitos, los gráficos de árbol construyen las posiciones de diseño automáticamente a partir de un objeto JavaScript anidado que contiene un name y un array opcional de children array.
1. Configuración esencial
Para construir un gráfico de árbol básico, define tu estructura de datos anidada y establece type: 'tree' dentro del array series:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [{
name: 'Director Ejecutivo',
children: [
{
name: 'Vicepresidente de Producto',
children: [
{ name: 'Gerente de Producto' },
{ name: 'Diseñador de UX' }
]
},
{
name: 'Vicepresidente de Ingeniería',
children: [
{ name: 'Líder Técnico' },
{ name: 'Ingeniero DevOps' }
]
}
]
}],
top: '5%',
left: '15%',
bottom: '5%',
right: '20%',
symbolSize: 10,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 12
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
expandAndCollapse: true,
animationDurationUpdate: 750
}
]
};
Orientaciones de diseño avanzadas
Los gráficos de árbol pueden adaptarse a diferentes restricciones de espacio y requisitos de diseño al cambiar su dirección de diseño o al pasar a una visualización radial.
1. Diseño de árbol radial
Establezca layout: 'radial'para proyectar las ramas hacia afuera desde un punto central, ideal para jerarquías amplias con muchos nodos hoja:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
layout: 'radial',
data: [{
name: 'Raíz',
children: [
{
name: 'Rama A',
children: [
{ name: 'A1' },
{ name: 'A2' },
{ name: 'A3' }
]
},
{
name: 'Rama B',
children: [
{ name: 'B1' },
{ name: 'B2' }
]
},
{
name: 'Rama C',
children: [
{ name: 'C1' },
{ name: 'C2' },
{ name: 'C3' },
{ name: 'C4' }
]
}
]
}],
top: '18%',
bottom: '14%',
right: '18%',
left: '18%',
symbolSize: 12,
initialTreeDepth: 2,
animationDurationUpdate: 750
}
]
};
Ajuste fino de diseño y estilo
Personalizar los símbolos de nodo, las curvas de línea y el formato específico por nivel ayuda a resaltar las jerarquías estructurales clave en diagramas grandes.
1. Conectores curvos y estilo de nodo basado en niveles
Utilice lineStyle.curveness para suavizar las líneas de conexión y definir nivelesconfiguraciones de matriz para dar estilo a los nodos según su profundidad en la jerarquía:
option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'tree',
orient: 'TB', // Orientación de arriba hacia abajo
data: [{
name: 'Raíz del proyecto',
children: [
{
name: 'Frontend',
children: [
{ name: 'React' },
{ name: 'Vue' }
]
},
{
name: 'Backend',
children: [
{ name: 'Node.js' },
{ name: 'Python' }
]
}
]
}],
top: '10%',
left: '10%',
bottom: '10%',
right: '10%',
symbol: 'emptyCircle',
symbolSize: 14,
edgeShape: 'polyline', // Usa conexiones rectangulares nítidas en lugar de curvas
initialTreeDepth: 2,
lineStyle: {
width: 2,
color: '#ccc'
},
label: {
position: 'top',
fontSize: 12
},
leaves: {
label: {
position: 'bottom'
}
}
}
]
};
Prácticas recomendadas estratégicas
- Controlar la profundidad inicial de plegado: Establezca
initialTreeDepth(por ejemplo,1o2) en conjuntos de datos grandes para mantener el gráfico limpio al cargar inicialmente, mientras permite a los usuarios hacer clic en los nodos para expandir detalles. - Elija la orientación adecuada:Utilice diseños horizontales (`LR`) o radiales (`radial`) para estructuras anidadas profundas con texto largo en las etiquetas, y diseños verticales (`TB`) para estructuras organizativas poco profundas y amplias.
- Diferenciar nodos hoja: Utilice la
leavespropiedad para dar estilo a los nodos finales de forma diferente a los nodos contenedores padres, para que los usuarios puedan distinguir fácilmente las ramas de los puntos finales.