Quando apresentando hierarquias em múltiplos níveis, onde os anéis internos representam categorias de alto nível e os anéis externos dividem subcategorias, o Gráfico de Explosão Solar oferece uma alternativa limpa e radial aos treemaps. Ao organizar categorias aninhadas em anéis concêntricos, os gráficos de explosão solar permitem que os usuários explorem proporções estruturais em múltiplos níveis, relações pai-filho e caminhos de distribuição em um espaço compacto—como categorias globais de produtos, organogramas ou caminhos de eliminação de usuários em múltiplos passos.
Os Mecanismos dos Gráficos de Explosão Solar
No Apache ECharts, os gráficos de explosão solar usam type: 'sunburst'. Semelhante aos treemaps, a série espera uma estrutura de árvore aninhada no array data onde os objetos pais contêm children arrays. O motor renderiza o nó raiz ou as categorias de nível superior no círculo mais interno e expande as subcategorias para fora, atravessando camadas concêntricas de anéis.
1. Configuração Básica
Para construir um gráfico de explosão solar básico, forneça um conjunto de dados de árvore aninhada e defina type: 'sunburst' dentro do seu objeto série:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: [
{
type: 'sunburst',
data: [
{
name: 'Avô',
children: [
{
name: 'Pai 1',
value: 15,
children: [
{ name: 'Filho 1', value: 5 },
{ name: 'Filho 2', value: 10 }
]
},
{
name: 'Pai 2',
value: 10,
children: [
{ name: 'Filho 3', value: 10 }
]
}
]
}
],
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
]
};
Técnicas Estruturais Avançadas
Os gráficos de explosão solar podem ser personalizados com regras de estilização por anel, herança de cores e drill-downs interativos com clique para ampliar.
1. Personalização de Anéis Específicos por Nível e Drill-Down
Use o levels array para definir raios distintos, comportamentos de rótulos e estilos de itens para cada camada de anel concêntrico, do centro para fora:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '2%',
left: 'center',
data: ['Eletrônicos', 'Casa e Vida']
},
series: [
{
type: 'sunburst',
center: ['50%', '55%'],
radius: ['10%', '85%'],
nodeClick: 'rootToNode', // Habilita o zoom quando clicar no nó
levels: [
{},
{
// Anel interno (categorias principais)
r0: '15%',
r: '40%',
label: { rotate: 0, fontWeight: 'bold' },
itemStyle: { borderWidth: 2 }
},
{
// Anel médio (subcategorias)
r0: '40%',
r: '65%',
label: { rotate: 'tangencial', fontSize: 11 }
},
{
// Anel externo (produtos folha)
r0: '65%',
r: '85%',
label: { rotate: 'radial', fontSize: 10 }
}
],
data: [
{
name: 'Eletrônicos',
children: [
{
name: 'Áudio',
children: [
{ name: 'Fones de ouvido', value: 40 },
{ name: 'Altifalantes', value: 25 }
]
},
{
name: 'Computadores',
children: [
{ name: 'Notebooks', value: 80 },
{ name: 'Desktops', value: 35 }
]
}
]
},
{
name: 'Casa e Vida',
children: [
{
name: 'Móveis',
children: [
{ name: 'Cadeiras', value: 50 },
{ name: 'Mesas', value: 30 }
]
},
{
name: 'Decoração',
children: [
{ name: 'Iluminação', value: 45 },
{ name: 'Tapetes', value: 20 }
]
}
]
}
]
}
]
};
Ajuste fino do layout e alinhamento de rótulos
Controle dos modos de rotação de rótulos (radial vs tangencial) mantém o texto legível à medida que os setores se estreitam em direção aos anéis externos.
1. Separações personalizadas de setores e rótulos radiais
Aplique bordas de item e defina rotate: 'radial' para alinhar o texto ao longo dos raios do setor de forma organizada:
option = {
series: [
{
type: 'sunburst',
radius: ['20%', '90%'],
itemStyle: {
borderRadius: 4,
borderColor: '#ffffff',
borderWidth: 2
},
label: {
show: true,
rotate: 'radial',
align: 'right'
},
data: [
{
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: 'Serviços',
itemStyle: { color: '#fac858' },
children: [
{ name: 'Consultoria', value: 70 },
{ name: 'Suporte', value: 50 }
]
}
]
}
]
};
Melhores práticas estratégicas
- Ajuste a rotação do rótulo à profundidade do anel: Use horizontal (
rotate: 0) ou rótulos tangenciais para anéis internos amplos, e mude pararadialrótulos para setores externos estreitos. - Habilite
nodeClick: 'rootToNode': O zoom interativo permite que os usuários cliquem em qualquer arco pai para focar diretamente em sua sub-árvore sem confusão visual. - Use a herança de cor: Permita que os setores filhos herdem as tonalidades base do nó pai com variações de brilho/saturação para manter um agrupamento visual claro em todos os níveis.