Podczas oceny złożonych profili wydajności w wielu jakościowych lub ilościowych wskaźnikach jednocześnie, Wykres radarowy (lub wykres pajęczynowy) jest idealnym narzędziem wizualizacji. Umieszczając wiele skal cech wzdłuż osi promieniowych wychodzących z punktu centralnego, wykresy radarowe przedstawiają porównania wielowymiarowe w postaci różnych kształtów wielokątnych. Dzięki temu są idealne do oceny umiejętności, kart oceny dostawców, benchmarków cech produktu lub profili wydajności graczy.
Zasady działania wykresów radarowych
W Apache ECharts wykresy radarowe opierają się na dedykowanym bloku konfiguracji radar konfiguracji, który definiuje osie promieniowe, znane jako indicator klucze. Obiekt serii ustawia type: 'radar' i mapuje wartości tablic liczbowych odpowiadające każdej zadeklarowanej skali wskaźnika.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres radarowy, zdefiniuj progi wymiarów wewnątrz radar.indicator i przekaż tablice liczbowe w danych serii:
option = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['Zatwierdzony budżet', 'Faktyczne wydatki']
},
radar: {
indicator: [
{ name: 'Sprzedaż', max: 6500 },
{ name: 'Administracja', max: 16000 },
{ name: 'Technologia informacyjna', max: 30000 },
{ name: 'Wsparcie klienta', max: 38000 },
{ name: 'Rozwój', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
series: [
{
name: 'Budżet vs wydatki',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Zatwierdzony budżet'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Faktyczne wydatki'
}
]
}
]
};
Zaawansowane techniki strukturalne
Wykresy radarowe można stylizować za pomocą wypełnionych wielokątów obszarowych, kształtów siatki okrągłej lub różnych tematów kolorystycznych, aby łatwiej odczytywać nakładające się profile.
1. Wypełnienie obszaru wielokątem z niestandardowymi kształtami siatki
Przełączanie tła siatki z wielokąta na okrąg oraz stosowanie przezroczystych wypełnień obszarów podkreśla ogólny kształt każdego profilu metryki:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
data: ['Model A', 'Model B']
},
radar: {
shape: 'circle', // Okrągłe tło siatki
indicator: [
{ name: 'Czas pracy baterii', max: 100 },
{ name: 'Moc przetwarzania', max: 100 },
{ name: 'Jakość wykonania', max: 100 },
{ name: 'Jakość wyświetlania', max: 100 },
{ name: 'Kamera', max: 100 },
{ name: 'Wartość', max: 100 }
]
},
series: [
{
type: 'radar',
data: [
{
value: [80, 90, 70, 85, 95, 60],
name: 'Model A',
areaStyle: {
color: 'rgba(84, 112, 198, 0.4)'
}
},
{
value: [95, 70, 85, 90, 75, 90],
name: 'Model B',
areaStyle: {
color: 'rgba(145, 204, 117, 0.4)'
}
}
]
}
]
};
Dostosowanie układu i stylizacji
Dostosowanie kolorów tekstu wskaźników, linii podziału i rozmiarów symboli zapobiega przesadzaniu linii siatki wieloosiowej nad danymi.
1. Formatowanie niestandardowej siatki i etykiet
Stylizuj linie osi, obszary podziału i etykiety zewnętrzne, aby zachować wyraźny kontrast wizualny na ciemnych lub jasnych interfejsach:
option = {
radar: {
indicator: [
{ name: 'Użyteczność', max: 10 },
{ name: 'Wydajność', max: 10 },
{ name: 'Bezpieczeństwo', max: 10 },
{ name: 'Skalowalność', max: 10 },
{ name: 'Efektywność kosztów', max: 10 }
],
axisName: {
color: '#333',
fontSize: 13,
fontWeight: 'bold'
},
splitArea: {
areaStyle: {
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.1)']
}
},
splitLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
type: 'radar',
symbolSize: 8,
lineStyle: {
width: 3
},
data: [
{
value: [8.5, 9.0, 7.5, 8.0, 9.5],
name: 'Wynik platformy',
itemStyle: {
color: '#5470c6'
},
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
}
}
]
}
]
};
Strategiczne najlepsze praktyki
- Znormalizuj skale osi: Upewnij się, że wszystkie wskaźniki używają znormalizowanych zakresów skali (np. 0 do 100 lub 1 do 10), jeśli to możliwe, aby obszary wielokątów zewnętrznych odzwierciedlały zrównoważone porównania.
- Zachowaj niską liczbę nakładających się serii: Ogranicz liczby kształtów porównawczych radarowych do 2 lub 3 na wykres. Nakładanie się 4 lub więcej wypełnionych wielokątów utrudnia wyodrębnienie granic poszczególnych kształtów.
- Używaj wypełnień o niskiej przezroczystości: Zawsze stosuj przezroczyste wypełnienia (około 0,2–0,4 przezroczystości), aby podstawowe linie siatki i przecinające się profile były widoczne pod warstwami na wierzchu.