Podczas prezentowania danych strukturalnych z jasnymi relacjami rodzic-dziecko – takimi jak wykresy organizacyjne, katalogi systemu plików, drzewa decyzyjne lub klasyfikacje taksonomiczne – Wykres drzewa zapewnia intuicyjny układ wizualny. Ustawiając węzły danych wzdłuż gałęzi, wykresy drzewa pozwalają użytkownikom na eksplorację zagnieżdżonych hierarchii i śledzenie połączeń od głównego węzła centralnego poprzez podgałęzie.
Zasady działania wykresów drzewa
W Apache ECharts wykresy drzewa używają type: 'tree'. W przeciwieństwie do standardowych wykresów z jawnymi osiami X i Y, wykresy drzewa automatycznie tworzą położenie układu na podstawie zagnieżdżonego obiektu JavaScript zawierającego name oraz opcjonalny childrentablicę.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres drzewa, zdefiniuj swoją zagnieżdżoną strukturę danych i ustaw type: 'tree' wewnątrz tablicy series:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [{
name: 'CEO',
children: [
{
name: 'Wiceprezes ds. Produktu',
children: [
{ name: 'Menadżer Produktu' },
{ name: 'Dyżurny Projektant UX' }
]
},
{
name: 'Wiceprezes ds. Inżynierii',
children: [
{ name: 'Kierownik Techniczny' },
{ name: 'Inżynier 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
}
]
};
Zaawansowane orientacje układu
Wykresy drzewa mogą dostosowywać się do różnych ograniczeń przestrzeni i wymagań projektowych poprzez zmianę kierunku układu lub przełączenie na wyświetlanie okrągłe.
1. Układ drzewa okrągłego
Ustaw layout: 'radial' aby rozprowadzić gałęzie na zewnątrz od punktu centralnego, co jest idealne dla szerokich hierarchii z wieloma węzłami liściowymi:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
layout: 'radial',
data: [{
name: 'Początek',
children: [
{
name: 'Gałąź A',
children: [
{ name: 'A1' },
{ name: 'A2' },
{ name: 'A3' }
]
},
{
name: 'Gałąź B',
children: [
{ name: 'B1' },
{ name: 'B2' }
]
},
{
name: 'Gałąź C',
children: [
{ name: 'C1' },
{ name: 'C2' },
{ name: 'C3' },
{ name: 'C4' }
]
}
]
}],
top: '18%',
bottom: '14%',
right: '18%',
left: '18%',
symbolSize: 12,
initialTreeDepth: 2,
animationDurationUpdate: 750
}
]
};
Dostosowywanie układu i stylizacji
Dostosowywanie symboli węzłów, krzywizn linii oraz formatowania specyficznego dla poziomu pomaga wyróżnić kluczowe poziomy strukturalne na dużych diagramach.
1. Łagodne połączenia i stylizacja węzłów zgodnie z poziomem
Użyj lineStyle.curveness aby wyrównać linie połączeń, oraz zdefiniuj poziomykonfiguracje tablicy, aby stylizować węzły zgodnie z ich głębokością w hierarchii:
option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'tree',
orient: 'TB', // Kierunek od góry do dołu
data: [{
name: 'Korzeń projektu',
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', // Używa ostrej prostokątnej połączenia zamiast krzywych
initialTreeDepth: 2,
lineStyle: {
width: 2,
color: '#ccc'
},
label: {
position: 'top',
fontSize: 12
},
leaves: {
label: {
position: 'bottom'
}
}
}
]
};
Strategiczne najlepsze praktyki
- Kontroluj głębokość początkowego zwinięcia: Ustaw
initialTreeDepth(np.1lub2) na dużych zestawach danych, aby utrzymać wykres czysty podczas początkowego ładowania, pozwalając użytkownikom kliknąć w węzły, aby rozwinąć szczegóły. - Wybierz odpowiedni kierunek: Użyj poziomych (`LR`) lub promieniowych (`radial`) układów dla głęboko zagnieżdżonych struktur z długimi etykietami, a pionowych (`TB`) układów dla powierzchniowych, szerokich struktur organizacyjnych.
- Rozróżnianie węzłów liściowych: Użyj
leaveswłaściwości, aby inaczej stylizować węzły końcowe niż węzły nadrzędne, dzięki czemu użytkownicy mogą łatwo rozróżnić gałęzie od końców.