Cuando se presentan jerarquías de múltiples niveles en las que los anillos internos representan categorías de alto nivel y los anillos externos desglosan subcategorías, el Gráfico de explosión solar ofrece una alternativa limpia y radial a los mapas de árboles. Al organizar las categorías anidadas en anillos concéntricos, los gráficos de explosión solar permiten a los usuarios explorar proporciones estructurales de múltiples niveles, relaciones padre-hijo y rutas de distribución en un espacio compacto, como categorías de productos globales, diagramas organizativos o rutas de eliminación de usuarios de múltiples pasos.
La mecánica de los gráficos de explosión solar
En Apache ECharts, los gráficos de explosión solar utilizan type: 'sunburst'. Similar a los mapas de árboles, la serie espera una estructura de árbol anidado en el data arreglo donde los objetos padres contienen children arreglos. El motor representa el nodo raíz o las categorías de nivel superior en el círculo más interno y expande las subcategorías hacia afuera a través de capas de anillos concéntricos.
1. Configuración esencial
Para construir un gráfico de explosión solar básico, proporcione un conjunto de datos de árbol anidado y establezca type: 'sunburst' dentro de su objeto de serie:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: [
{
type: 'sunburst',
data: [
{
name: 'Abuelo',
children: [
{
name: 'Padre 1',
value: 15,
children: [
{ name: 'Hijo 1', value: 5 },
{ name: 'Hijo 2', value: 10 }
]
},
{
name: 'Padre 2',
value: 10,
children: [
{ name: 'Hijo 3', value: 10 }
]
}
]
}
],
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
]
};
Técnicas estructurales avanzadas
Los gráficos de explosión solar se pueden personalizar con reglas de estilo a nivel de anillo, herencia de colores y despliegues interactivos por clic para acercar.
1. Personalización específica por nivel de anillo y despliegue interactivo
Utilice el levels arreglo para definir radios distintos, comportamientos de etiquetas y estilos de elementos para cada capa de anillo concéntrico desde el centro hacia afuera:
option = {
tooltip: {
trigger: 'item'
},
leyenda: {
top: '2%',
left: 'center',
data: ['Electrónicos', 'Casa y Vida']
},
series: [
{
type: 'sunburst',
center: ['50%', '55%'],
radio: ['10%', '85%'],
nodeClick: 'rootToNode', // Habilita el desplazamiento al hacer clic en un nodo
niveles: [
{},
{
// Anillo interno (categorías principales)
r0: '15%',
r: '40%',
etiqueta: { rotate: 0, fontWeight: 'bold' },
itemStyle: { borderWidth: 2 }
},
{
// Anillo medio (subcategorías)
r0: '40%',
r: '65%',
etiqueta: { rotate: 'tangencial', fontSize: 11 }
},
{
// Anillo externo (productos finales)
r0: '65%',
r: '85%',
etiqueta: { rotate: 'radial', fontSize: 10 }
}
],
datos: [
{
name: 'Electrónicos',
children: [
{
name: 'Audio',
children: [
{ name: 'Auriculares', value: 40 },
{ name: 'Altavoces', value: 25 }
]
},
{
name: 'Computadoras',
children: [
{ name: 'Laptops', value: 80 },
{ name: 'Escritorios', value: 35 }
]
}
]
},
{
name: 'Casa y Vida',
children: [
{
name: 'Muebles',
children: [
{ name: 'Sillas', value: 50 },
{ name: 'Mesas', value: 30 }
]
},
{
name: 'Decoración',
children: [
{ name: 'Iluminación', value: 45 },
{ name: 'Alfombras', value: 20 }
]
}
]
}
]
}
]
};
Ajuste fino del diseño y alineación de etiquetas
Controlar los modos de rotación de etiquetas (radial vs tangencial) mantiene el texto legible mientras los sectores se estrechan hacia los anillos externos.
1. Separaciones personalizadas de sectores y etiquetas radiales
Aplicar bordes a los elementos y establecer rotate: 'radial'para alinear el texto a lo largo de los radios de los sectores de forma ordenada:
option = {
series: [
{
type: 'sunburst',
radio: ['20%', '90%'],
itemStyle: {
borderRadius: 4,
borderColor: '#ffffff',
borderWidth: 2
},
etiqueta: {
show: true,
rotate: 'radial',
align: 'right'
},
datos: [
{
name: 'Software',
itemStyle: { color: '#5470c6' },
children: [
{ name: 'SaaS', value: 120 },
{ name: 'On-Prem', value: 60 }
]
},
{
name: 'Hardware',
itemStyle: { color: '#91cc75' },
children: [
{ name: 'Servidores', value: 90 },
{ name: 'Redes', value: 110 }
]
},
{
name: 'Servicios',
itemStyle: { color: '#fac858' },
children: [
{ name: 'Consultoría', value: 70 },
{ name: 'Soporte', value: 50 }
]
}
]
}
]
};
Prácticas recomendadas estratégicas
- Ajuste la rotación de etiquetas según la profundidad del anillo: Use horizontal (
rotate: 0) o etiquetas tangenciales para anillos internos amplios, y cambie aradialetiquetas para sectores externos estrechos. - Habilite
nodeClick: 'rootToNode':La función de zoom interactivo permite a los usuarios hacer clic en cualquier arco padre para centrarse directamente en su subárbol sin acumulación visual. - Use la herencia de color:Permita que los sectores secundarios hereden los tonos base de su nodo padre con variaciones de luminosidad/saturación para mantener un agrupamiento visual claro a través de los niveles.