Gdy prezentujesz dane hierarchiczne wielopoziomowe lub pokazujesz duże wizualne podziały, gdzie przestrzeń jest ograniczona, toWykres drzewa zapewnia efektywne rozwiązanie wizualne. Przez układanie zagnieżdżonych prostokątów w jednolitym obszarze ograniczającym, wykresy drzewa kodują wartości liczbowe poprzez rozmiar prostokąta, pozwalając użytkownikom ocenićrelatywne proporcje w złożonych strukturach zagnieżdżonych—na przykład użycie przestrzeni dyskowej, przychód z katalogu produktów lub alokacje budżetowe między działami nadrzędnymi i podległymi.
Zasada działania wykresów drzewa
W Apache ECharts wykresy drzewa używajątype: 'treemap'. Seria oczekuje tablicy danych w strukturze drzewa, gdzie każdy obiekt zawieradane gdzie każdy obiekt zawieranazwę, ilościowąwartość, oraz opcjonalnądziećmitablicę dla głębszych poziomów zagnieżdżenia.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres drzewa, zdefiniuj tablicę danych hierarchicznych z zagnieżdżonymidziećmi i ustawtype: 'treemap'w konfiguracji serii:
option = {
tooltip: {
formatter: '{b}: ${c}'
},
series: [
{
type: 'treemap',
data: [
{
name: 'Elektronika',
value: 400,
children: [
{ name: 'Telefony', value: 240 },
{ name: 'Laptopy', value: 160 }
]
},
{
name: 'Odzież',
value: 300,
children: [
{ name: 'Koszulki', value: 180 },
{ name: 'Buty', value: 120 }
]
}
]
}
]
};
Zaawansowane techniki strukturalne
Wykresy drzewa mogą być konfigurowane z wielopoziomowymi zasadami stylizacji, mapowaniem gradientów kolorów oraz interaktywnymi kontrolami przejścia do głębszych poziomów dla głębokich struktur danych.
1. Wielopoziomowy nawigacyjny wsteczny
Włącz legendy u góry i nawigację po ścieżkach, aby użytkownicy mogli identyfikować kategorie najwyższego poziomu i płynnie przechodzić do zagnieżdżonych podkatalogów:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} GB'
},
legend: {
top: '5%',
left: 'center',
data: ['Dysk systemowy (C:)', 'Dysk danych (D:)']
},
series: [
{
type: 'treemap',
top: '18%',
bottom: '12%',
leafDepth: 1, // Pokazuje poziom na raz z kliknięciem do przejścia głębiej
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: 'Dysk systemowy (C:)',
value: 500,
children: [
{ name: 'Windows', value: 120 },
{ name: 'Programy', value: 230 },
{ name: 'Użytkownicy', value: 150 }
]
},
{
name: 'Dysk danych (D:)',
value: 800,
children: [
{ name: 'Media', value: 450 },
{ name: 'Kopie zapasowe', value: 250 },
{ name: 'Projekty', value: 100 }
]
}
]
}
]
};
Dostosowanie układu i stylizacji
Zastosowanie szerokości odstępów, czystych krawędzi i odrębnych kolorów poziomów utrzymuje zagnieżdżone prostokąty uporządkowane i czytelne wizualnie.
1. Dostosowane krawędzie komórek i wyrównanie etykiet
Dostosuj gapWidth i labelkonfiguracje, aby zachować wyraźne granice między kontenerami nadrzędnymi a segmentami podrzędnymi:
option = {
series: [
{
type: 'treemap',
roam: false, // Wyłącza ręczne powiększanie/przesuwanie
label: {
show: true,
formatter: '{b}n{c}'
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
gapWidth: 2
},
data: [
{
name: 'Ameryka Północna',
value: 520,
itemStyle: { color: '#5470c6' }
},
{
name: 'Europa',
value: 380,
itemStyle: { color: '#91cc75' }
},
{
name: 'Azja Pacyfik',
value: 450,
itemStyle: { color: '#fac858' }
},
{
name: 'Ameryka Łacińska',
value: 190,
itemStyle: { color: '#ee6666' }
}
]
}
]
};
Strategiczne najlepsze praktyki
- Użyj
gapWidthdo widoczności zagnieżdżenia: Dodanie małegogapWidth(np. 2px do 4px) między zagnieżdżonymi prostokątami tworzy wyraźne odstępy między kategoriami nadrzędnymi a podelementami podrzędnymi. - Włącz ścieżki nawigacyjne dla głębokich hierarchii: Gdy wyświetlasz 3 lub więcej poziomów zagnieżdżenia, włącz `breadcrumb: { show: true }`, aby użytkownicy mogli łatwo śledzić swoje położenie i powracać do wyższych poziomów.
- Utrzymuj etykiety krótkie: Tekst może łatwo przeszyć się po małych prostokątach liściowych. Połącz krótkie nazwy z podpowiadaczami lub użyj
leafDepthukryć małe podprostokąty, aż do powiększenia.