Beim Darstellen strukturierter Daten mit klaren Eltern-Kind-Beziehungen – wie Organigramme, Dateisystemverzeichnisse, Entscheidungsbaum oder Taxonomieklassifikationen – bietet das Baumdiagrammein intuitives visuelles Framework. Durch die Anordnung von Datenknoten entlang verzweigter Pfade ermöglichen Baumdiagramme es Benutzern, verschachtelte Hierarchien zu erkunden und Verbindungen von einem zentralen Wurzelknoten über Untergeordnete zu verfolgen.
Die Funktionsweise von Baumdiagrammen
In Apache ECharts verwenden Baumdiagramme type: 'tree'. Im Gegensatz zu Standarddiagrammen mit expliziten X- und Y-Achsen erstellen Baumdiagramme Layout-Positionen automatisch aus einem verschachtelten JavaScript-Objekt, das ein name und ein optionales childrenArray enthält.
1. Grundlegende Einrichtung
Um ein einfaches Baumdiagramm zu erstellen, definieren Sie Ihre verschachtelte Datenstruktur und setzen Sie type: 'tree' innerhalb des series-Arrays:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [{
name: 'CEO',
children: [
{
name: 'VP für Produkt',
children: [
{ name: 'Produktmanager' },
{ name: 'UX-Designer' }
]
},
{
name: 'VP für Engineering',
children: [
{ name: 'Technischer Leiter' },
{ name: 'DevOps-Ingenieur' }
]
}
]
}],
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
}
]
};
Erweiterte Layout-Orientierungen
Baumdiagramme können sich unterschiedlichen Platzbeschränkungen und Gestaltungsanforderungen anpassen, indem sie ihre Layout-Richtung ändern oder auf eine radiale Darstellung umschalten.
1. Radiales Baumdiagramm-Layout
Setzen Sie layout: 'radial'um Äste von einem Mittelpunkt aus nach außen zu projizieren, ideal für breite Hierarchien mit vielen Blattknoten:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
layout: 'radial',
data: [{
name: 'Wurzel',
children: [
{
name: 'Zweig A',
children: [
{ name: 'A1' },
{ name: 'A2' },
{ name: 'A3' }
]
},
{
name: 'Zweig B',
children: [
{ name: 'B1' },
{ name: 'B2' }
]
},
{
name: 'Zweig C',
children: [
{ name: 'C1' },
{ name: 'C2' },
{ name: 'C3' },
{ name: 'C4' }
]
}
]
}],
top: '18%',
bottom: '14%',
right: '18%',
left: '18%',
symbolSize: 12,
initialTreeDepth: 2,
animationDurationUpdate: 750
}
]
};
Feinabstimmung von Layout und Stil
Die Anpassung von Knotensymbolen, Linienkurven und formatbedingten Einstellungen nach Ebene hilft dabei, wichtige strukturelle Ebenen in großen Diagrammen hervorzuheben.
1. Kurvige Verbindungen und knotenbasierte Stilisierung nach Ebene
Verwenden Sie lineStyle.curveness um Verbindungslinien zu glätten, und definieren Sie Ebenen Array-Konfigurationen, um Knoten je nach Tiefe in der Hierarchie zu stylen:
option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'tree',
orient: 'TB', // Orientierung von oben nach unten
data: [{
name: 'Projektwurzel',
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', // Verwendet scharfe rechteckige Verbindungen statt Kurven
initialTreeDepth: 2,
lineStyle: {
width: 2,
color: '#ccc'
},
label: {
position: 'top',
fontSize: 12
},
leaves: {
label: {
position: 'bottom'
}
}
}
]
};
Strategische Best Practices
- Steuerung der anfänglichen Kollaps-Tiefe: Legen Sie
initialTreeDepth(z. B.1oder2) bei großen Datensätzen fest, um das Diagramm beim ersten Laden sauber zu halten, während Benutzer auf Knoten klicken können, um Details zu erweitern. - Wählen Sie die richtige Orientierung: Verwenden Sie horizontale (`LR`) oder radiale (`radial`) Layouts für tief verschachtelte Strukturen mit langen Beschriftungen und vertikale (`TB`) Layouts für flache, breite Organisationsstrukturen.
- Unterscheidung von Blattknoten: Verwenden Sie die
leavesEigenschaft, um Endknoten anders zu stylen als übergeordnete Containerknoten, damit Benutzer Äste leicht von Endpunkten unterscheiden können.