Ao apresentar dados estruturados com relações pai-filho claras—como organogramas, diretórios de sistema de arquivos, árvores de decisão ou classificações de taxonomia—o Gráfico de Árvorefornece uma estrutura visual intuitiva. Ao organizar nós de dados ao longo de caminhos ramificados, os gráficos de árvore permitem que os usuários explorem hierarquias aninhadas e rastreiem conexões a partir de um nó raiz central até os subramos.
Os Mecanismos dos Gráficos de Árvore
No Apache ECharts, os gráficos de árvore usam type: 'tree'. Diferentemente dos gráficos padrão com eixos X e Y explícitos, os gráficos de árvore constroem posições de layout automaticamente a partir de um objeto JavaScript aninhado contendo um name e um array opcional children array.
1. Configuração Básica
Para construir um gráfico de árvore básico, defina sua estrutura de dados aninhada e defina type: 'tree' dentro do array series:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [{
name: 'CEO',
children: [
{
name: 'VP de Produto',
children: [
{ name: 'Gerente de Produto' },
{ name: 'Designer de UX' }
]
},
{
name: 'VP de Engenharia',
children: [
{ name: 'Líder Técnico' },
{ name: 'Engenheiro 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
}
]
};
Orientações Avançadas de Layout
Os gráficos de árvore podem se adaptar a diferentes restrições de espaço e requisitos de design alterando a direção do layout ou alternando para uma exibição radial.
1. Layout de Árvore Radial
Defina layout: 'radial'para projetar ramos para fora a partir de um ponto central, ideal para hierarquias amplas com muitos nós folha:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
layout: 'radial',
data: [{
name: 'Raiz',
children: [
{
name: 'Ramificação A',
children: [
{ name: 'A1' },
{ name: 'A2' },
{ name: 'A3' }
]
},
{
name: 'Ramificação B',
children: [
{ name: 'B1' },
{ name: 'B2' }
]
},
{
name: 'Ramificação 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 do layout e do estilo
Personalizar símbolos de nós, curvas de linhas e formatação específica por nível ajuda a destacar níveis estruturais importantes em diagramas grandes.
1. Conectores curvos e estilização de nós baseada em nível
Use lineStyle.curveness para suavizar as linhas de conexão e definir níveisconfigurações de array para estilizar nós de acordo com sua profundidade na hierarquia:
option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'tree',
orient: 'TB', // Orientação de cima para baixo
data: [{
name: 'Raiz do Projeto',
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 conexões retangulares nítidas em vez de curvas
initialTreeDepth: 2,
lineStyle: {
width: 2,
color: '#ccc'
},
label: {
position: 'top',
fontSize: 12
},
leaves: {
label: {
position: 'bottom'
}
}
}
]
};
Melhores Práticas Estratégicas
- Controle a profundidade inicial de colapso: Defina
initialTreeDepth(por exemplo,1ou2) em conjuntos de dados grandes para manter o gráfico limpo na carga inicial, permitindo que os usuários cliquem nos nós para expandir detalhes. - Escolha a Orientação Correta:Use layouts horizontais (`LR`) ou radiais (`radial`) para estruturas profundamente aninhadas com textos longos nos rótulos, e layouts verticais (`TB`) para estruturas organizacionais rasas e amplas.
- Diferencie os nós folha: Use a propriedade
leavespara estilizar os nós finais de forma diferente dos nós pais, para que os usuários possam distinguir facilmente ramos de pontos finais.