Cuando se presentan conjuntos de datos jerárquicos de múltiples niveles o se muestran grandes desgloses visuales donde el espacio es escaso, el Gráfico de Treemap proporciona una solución visual eficiente. Al empaquetar rectángulos anidados en un área delimitadora unificada, los treemaps codifican valores numéricos mediante el tamaño del área del rectángulo, permitiendo a los usuarios evaluar proporciones relativas a través de estructuras anidadas complejas—por ejemplo, el uso del espacio en disco, los ingresos del catálogo de productos o las asignaciones presupuestarias entre departamentos padres e hijos.
La mecánica de los gráficos de Treemap
En Apache ECharts, los treemaps utilizan type: 'treemap'. La serie espera un array estructurado en árbol data donde cada objeto contiene un name, un valor cuantitativo value, y un array opcional children para niveles anidados más profundos.
1. Configuración esencial
Para construir un treemap básico, define un array de datos jerárquico con children y establece type: 'treemap' dentro de la configuración de la serie:
option = {
tooltip: {
formatter: '{b}: ${c}'
},
series: [
{
type: 'treemap',
data: [
{
name: 'Electrónicos',
value: 400,
children: [
{ name: 'Teléfonos', value: 240 },
{ name: 'Laptops', value: 160 }
]
},
{
name: 'Ropa',
value: 300,
children: [
{ name: 'Camisas', value: 180 },
{ name: 'Zapatos', value: 120 }
]
}
]
}
]
};
Técnicas estructurales avanzadas
Los treemaps se pueden configurar con reglas de estilo de múltiples niveles, asignaciones de gradientes de color y controles interactivos de desplazamiento para árboles de datos profundos.
1. Navegación por breadcrumbs de múltiples niveles
Habilite las leyendas superiores y la navegación por breadcrumbs para permitir a los usuarios identificar las categorías principales y navegar sin problemas hacia subdirectorios anidados:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} GB'
},
legend: {
top: '5%',
left: 'center',
data: ['Unidad de sistema (C:)', 'Unidad de datos (D:)']
},
series: [
{
type: 'treemap',
top: '18%',
bottom: '12%',
leafDepth: 1, // Muestra un nivel a la vez con desplazamiento al hacer clic
breadcrumb: {
show: true,
left: 'center',
bottom: '2%'
},
levels: [
{
itemStyle: {
borderColor: '#555',
borderWidth: 2,
gapWidth: 2
}
},
{
colorSaturation: [0.3, 0.6],
itemStyle: {
borderWidth: 1,
gapWidth: 1,
borderColorSaturation: 0.7
}
}
],
data: [
{
name: 'Unidad de sistema (C:)',
value: 500,
children: [
{ name: 'Windows', value: 120 },
{ name: 'Archivos de programa', value: 230 },
{ name: 'Usuarios', value: 150 }
]
},
{
name: 'Unidad de datos (D:)',
value: 800,
children: [
{ name: 'Medios', value: 450 },
{ name: 'Copias de seguridad', value: 250 },
{ name: 'Proyectos', value: 100 }
]
}
]
}
]
};
Ajuste fino del diseño y estilo
Aplicar anchos de espacio, bordes limpios y colores distintos para cada nivel mantiene los rectángulos anidados organizados y visualmente legibles.
1. Bordes personalizados de celdas y alineación de etiquetas
Ajuste gapWidth y labelconfiguraciones para mantener límites distintos entre los contenedores principales y los segmentos secundarios:
option = {
series: [
{
type: 'treemap',
roam: false, // Desactiva el zoom y desplazamiento manual
label: {
show: true,
formatter: '{b}n{c}'
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
gapWidth: 2
},
data: [
{
name: 'América del Norte',
value: 520,
itemStyle: { color: '#5470c6' }
},
{
name: 'Europa',
value: 380,
itemStyle: { color: '#91cc75' }
},
{
name: 'Pacífico Asia',
value: 450,
itemStyle: { color: '#fac858' }
},
{
name: 'América Latina',
value: 190,
itemStyle: { color: '#ee6666' }
}
]
}
]
};
Prácticas recomendadas estratégicas
- Utilice
gapWidthpara la visibilidad de anidamiento:Agregar un pequeñogapWidth(por ejemplo, de 2px a 4px) entre rectángulos anidados crea un espacio claro entre las categorías principales y los subelementos secundarios. - Habilite breadcrumbs para jerarquías profundas: Cuando se muestran 3 o más niveles anidados, habilite `breadcrumb: { show: true }` para que los usuarios puedan rastrear fácilmente su ubicación y navegar hacia arriba.
- Mantenga las etiquetas breves:El texto puede desbordarse fácilmente en rectángulos pequeños de hoja. Combine nombres cortos con sugerencias emergentes o use
leafDepthpara ocultar los pequeños subrectángulos hasta que se acerque.