Podczas prezentowania proporcji względnych lub udziałów procentowych jednego stałego całkowitego, Wykres kołowy jest znane i intuicyjne rozwiązanie. Dziękuję podziałowi koła na proporcjonalne kawałki, wykresy kołowe pozwalają odbiorcom szybko zrozumieć jak poszczególne elementy przyczyniają się do jedności całości, takie jak dystrybucja udziałów rynkowych, podziały preferencji urządzeń lub alokacje kategorii wydatków.
Zasady działania wykresów kołowych
W przeciwieństwie do wykresów kartezjańskich, które używają osi poziomych i pionowych, wykresy kołowe przekształcają dane kategoryczne bezpośrednio na kąty promieniowe w układzie współrzędnych biegunowych. W Apache ECharts wykres kołowy tworzony jest przez ustawienie serii typ na 'pie' i dostarczania tablicy obiektów, gdzie każdy element zawiera liczbę wartość i opisową nazwę.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres kołowy, zdefiniuj jedną serię z typ: 'pie' i przekaż swoje uporządkowane dane wewnątrz tablicy danychtablicy:
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Źródło dostępu',
type: 'pie',
radius: '60%',
data: [
{ value: 1048, name: 'Wyszukiwarka' },
{ value: 735, name: 'Bezpośrednio' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Reklamy połączone' },
{ value: 300, name: 'Reklamy wideo' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Zaawansowane techniki strukturalne
Wykresy kołowe można dostosować do kształtu pierścieniowego (wykres kołowy z dziurą) lub stylizować za pomocą niestandardowych promieni, aby podkreślić główne segmenty danych.
1. Wariant wykresu pierścieniowego
Ustawienie promień właściwość jako tablica dwóch wartości (np. ['40%', '70%']) wycina środek, tworząc czysty wykres pierścieniowy. Pozostawia miejsce w środku na niestandardowe etykiety podsumowujące:
option = {
tooltip: {
trigger: 'element'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Typ urządzenia',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 8,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold'
}
},
data: [
{ value: 1048, name: 'Stacja robocza' },
{ value: 735, name: 'Telefon komórkowy' },
{ value: 580, name: 'Tablet' },
{ value: 484, name: 'Inne' }
]
}
]
};
Dokładna dostosowanie układu i stylizacji
Kontrola linii wskazujących etykiety i krawędzi kawałków zapewnia czytelność wykresów kołowych nawet przy mniejszych wartościach danych.
1. Personalizowana separacja kawałków i wskazówki etykiet
Zastosowanie szerokości obramowania elementów i skonfigurowanie zewnętrznych linii wskazujących zapobiega nakładaniu się tekstu na sąsiednie kawałki:
option = {
series: [
{
name: 'Udział rynkowy',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{ value: 40, name: 'Marka A' },
{ value: 30, name: 'Marka B' },
{ value: 15, name: 'Marka C' },
{ value: 10, name: 'Marka D' },
{ value: 5, name: 'Pozostałe' }
],
label: {
formatter: '{b}: {d}%'
},
labelLine: {
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
Strategiczne najlepsze praktyki
- Ogranicz liczbę kawałków do 5 lub 6:Zbyt wiele małych kawałków sprawia, że wykres kołowy jest trudny do odczytania. Grupuj mniejsze wartości pod kategorią „Pozostałe”, aby utrzymać skupienie na ważnych elementach.
- Układaj kawałki według wielkości: Umieść największy kawałek zaczynając od godziny 12 i układaj pozostałe kawałki kolejno zgodnie z ruchem wskazówek zegara, aby ułatwić szybkie przeszukiwanie.
- Pokaż procenty bezpośrednio w podpowiedziach lub etykietach: Zawsze uwzględnij
{d}%w formatach etykiet lub podpowiedzi, aby widzowie od razu widzieli stosunki części bez wykonywania obliczeń w pamięci.