Podczas prezentowania wielopoziomowych hierarchii, gdzie wewnętrzne pierścienie reprezentują kategorie najwyższego poziomu, a zewnętrzne pierścienie dzielą kategorie podrzędne, Wykres słoneczny oferuje czystą, promieniową alternatywę dla wykresów drzewa. Ustawiając zagnieżdżone kategorie w koncentrycznych pierścieniach, wykresy słoneczne pozwalają użytkownikom eksplorować wielopoziomowe proporcje strukturalne, relacje rodzic-dziecko oraz ścieżki dystrybucji w małym obszarze – na przykład kategorie globalnych produktów, schematy organizacyjne lub wieloetapowe ścieżki wypływu użytkowników.
Zasada działania wykresów słonecznych
W Apache ECharts wykresy słoneczne używają type: 'sunburst'. Podobnie jak wykresy drzewa, seria oczekuje zagnieżdżonej struktury drzewa w tablicy data gdzie obiekty rodzicielskie zawierają children tablice. Silnik renderuje węzeł główny lub kategorie najwyższego poziomu w najwewnętrzniejszym okręgu i rozszerza kategorie podrzędne na zewnątrz przez koncentryczne warstwy pierścieni.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres słoneczny, podaj zestaw danych z zagnieżdżoną strukturą drzewa i ustaw type: 'sunburst' w obiekcie serii:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: [
{
type: 'sunburst',
data: [
{
name: 'Babcia i dziadek',
children: [
{
name: 'Rodzic 1',
value: 15,
children: [
{ name: 'Dziecko 1', value: 5 },
{ name: 'Dziecko 2', value: 10 }
]
},
{
name: 'Rodzic 2',
value: 10,
children: [
{ name: 'Dziecko 3', value: 10 }
]
}
]
}
],
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
]
};
Zaawansowane techniki strukturalne
Wykresy słoneczne można dostosować za pomocą reguł stylizacji na poziomie pierścieni, dziedziczenia kolorów oraz interaktywnych funkcji powiększania po kliknięciu do szczegółów.
1. Dostosowanie pierścieni na poziomie i przejście do szczegółów
Użyj levels tablicy, aby określić różne promienie, zachowanie etykiet i style elementów dla każdej warstwy koncentrycznego pierścienia od środka na zewnątrz:
option = {
tooltip: {
trigger: 'element'
},
legend: {
top: '2%',
left: 'center',
data: ['Elektronika', 'Dom i życie']
},
series: [
{
type: 'sunburst',
center: ['50%', '55%'],
radius: ['10%', '85%'],
nodeClick: 'rootToNode', // Włącza przejście do głębszych poziomów po kliknięciu w węzeł
levels: [
{},
{
// Pierwszy pierścień (kategorie najwyższego poziomu)
r0: '15%',
r: '40%',
label: { rotate: 0, fontWeight: 'bold' },
itemStyle: { borderWidth: 2 }
},
{
// Drugi pierścień (podkategorie)
r0: '40%',
r: '65%',
label: { rotate: 'styczna', fontSize: 11 }
},
{
// Trzeci pierścień (produktów liściowych)
r0: '65%',
r: '85%',
label: { rotate: 'promieniowy', fontSize: 10 }
}
],
data: [
{
name: 'Elektronika',
children: [
{
name: 'Audio',
children: [
{ name: 'Słuchawki', value: 40 },
{ name: 'Głośniki', value: 25 }
]
},
{
name: 'Komputery',
children: [
{ name: 'Laptopy', value: 80 },
{ name: 'Komputery stacjonarne', value: 35 }
]
}
]
},
{
name: 'Dom i życie',
children: [
{
name: 'Meble',
children: [
{ name: 'Krzesła', value: 50 },
{ name: 'Stoły', value: 30 }
]
},
{
name: 'Dekoracje',
children: [
{ name: 'Oświetlenie', value: 45 },
{ name: 'Kilimy', value: 20 }
]
}
]
}
]
}
]
};
Dokładna dostosowanie układu i wyrównania etykiet
Kontrolowanie trybów obrotu etykiet (promieniowych vs styczny) zapewnia czytelność tekstu, gdy sektory zwężają się w kierunku zewnętrznych pierścieni.
1. Dostosowane odstępy między sektorami i etykiety promieniowe
Zastosuj obramowania elementów i ustaw rotate: 'promieniowy' aby wyrównać tekst wzdłuż promieni sektorów estetycznie:
option = {
series: [
{
type: 'sunburst',
radius: ['20%', '90%'],
itemStyle: {
borderRadius: 4,
borderColor: '#ffffff',
borderWidth: 2
},
label: {
show: true,
rotate: 'promieniowy',
align: 'right'
},
data: [
{
name: 'Oprogramowanie',
itemStyle: { color: '#5470c6' },
children: [
{ name: 'SaaS', value: 120 },
{ name: 'On-Prem', value: 60 }
]
},
{
name: 'Sprzęt',
itemStyle: { color: '#91cc75' },
children: [
{ name: 'Serwery', value: 90 },
{ name: 'Sieci', value: 110 }
]
},
{
name: 'Usługi',
itemStyle: { color: '#fac858' },
children: [
{ name: 'Konsultacje', value: 70 },
{ name: 'Wsparcie', value: 50 }
]
}
]
}
]
};
Strategiczne najlepsze praktyki
- Dostosuj obrót etykiety do głębi pierścienia: Użyj poziomej (
rotate: 0) lub etykiety styczne dla szerokich wewnętrznych pierścieni, a następnie przejdź dopromieniowychetykiet dla wąskich zewnętrznych sektorów. - Włącz
nodeClick: 'rootToNode':Interaktywne powiększanie pozwala użytkownikom kliknąć dowolny łuk rodzica, aby skupić się bezpośrednio na jego poddrzewie bez nadmiaru elementów wizualnych. - Użyj dziedziczenia kolorów: Pozwól podsektorom dziedziczyć podstawowe odcienie z węzła nadrzędnego, zmieniając jasność/nasycenie, aby zachować jasne grupowanie wizualne na wszystkich poziomach.