Quando apresentar conjuntos de dados hierárquicos de múltiplos níveis ou exibir grandes análises visuais onde o espaço é escasso, o Gráfico de Treemap fornece uma solução visual eficiente. Ao organizar retângulos aninhados em uma área delimitadora unificada, os treemaps codificam valores numéricos pelo tamanho da área do retângulo, permitindo que os usuários avaliem proporções relativas em estruturas aninhadas complexas—como o uso de espaço em disco, receita de catálogo de produtos ou alocação de orçamento entre departamentos pais e filhos.
Os Mecanismos dos Gráficos de Treemap
No Apache ECharts, os treemaps usam type: 'treemap'. A série espera um array estruturado em árvore data onde cada objeto contém um name, um valor quantitativo value, e um array opcional children para níveis aninhados mais profundos.
1. Configuração Básica
Para construir um treemap básico, defina um array de dados hierárquico com children e defina type: 'treemap' dentro da configuração da série:
option = {
tooltip: {
formatter: '{b}: ${c}'
},
series: [
{
type: 'treemap',
data: [
{
name: 'Eletrônicos',
value: 400,
children: [
{ name: 'Celulares', value: 240 },
{ name: 'Notebooks', value: 160 }
]
},
{
name: 'Vestuário',
value: 300,
children: [
{ name: 'Camisas', value: 180 },
{ name: 'Sapatos', value: 120 }
]
}
]
}
]
};
Técnicas Estruturais Avançadas
Os treemaps podem ser configurados com regras de estilização de múltiplos níveis, mapeamentos de gradientes de cor e controles interativos de navegação para árvores de dados profundas.
1. Navegação por Caminho com Várias Níveis
Habilite as legendas superiores e a navegação por caminho para permitir que os usuários identifiquem categorias de nível superior e naveguem suavemente em diretórios aninhados:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} GB'
},
legend: {
top: '5%',
left: 'center',
data: ['Unidade do Sistema (C:)', 'Unidade de Dados (D:)']
},
series: [
{
type: 'treemap',
top: '18%',
bottom: '12%',
leafDepth: 1, // Mostra um nível por vez com clique para navegar para baixo
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: 'Unidade do Sistema (C:)',
value: 500,
children: [
{ name: 'Windows', value: 120 },
{ name: 'Arquivos de Programas', value: 230 },
{ name: 'Usuários', value: 150 }
]
},
{
name: 'Unidade de Dados (D:)',
value: 800,
children: [
{ name: 'Mídia', value: 450 },
{ name: 'Backup', value: 250 },
{ name: 'Projetos', value: 100 }
]
}
]
}
]
};
Ajuste Preciso de Layout e Estilo
Aplicar larguras de espaçamento, bordas limpas e cores distintas para cada nível mantém os retângulos aninhados organizados e visualmente legíveis.
1. Bordas de Célula Personalizadas e Alinhamento de Rótulos
Ajuste gapWidth e labelconfigurações para manter limites distintos entre contêineres pais e segmentos filhos:
option = {
series: [
{
type: 'treemap',
roam: false, // Desativa o zoom e deslocamento manuais
label: {
show: true,
formatter: '{b}n{c}'
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
gapWidth: 2
},
data: [
{
name: 'América do Norte',
value: 520,
itemStyle: { color: '#5470c6' }
},
{
name: 'Europa',
value: 380,
itemStyle: { color: '#91cc75' }
},
{
name: 'Ásia-Pacífico',
value: 450,
itemStyle: { color: '#fac858' }
},
{
name: 'América Latina',
value: 190,
itemStyle: { color: '#ee6666' }
}
]
}
]
};
Melhores Práticas Estratégicas
- Use
gapWidthpara visibilidade de aninhamento:Adicionar um pequenogapWidth(por exemplo, 2px a 4px) entre retângulos aninhados cria espaçamento claro entre categorias pai e itens filhos. - Habilite o caminho de navegação para hierarquias profundas: Quando exibindo 3 ou mais níveis aninhados, habilite `breadcrumb: { show: true }` para que os usuários possam rastrear facilmente sua localização e navegar de volta.
- Mantenha os rótulos concisos:O texto pode facilmente transbordar em retângulos folha pequenos. Combine nomes curtos com dicas de ferramenta ou use
leafDepthpara ocultar pequenos sub-retângulos até o zoom ser aplicado.