Do analizy podziałów składowych między pozycjami o długich tytułach kategorii, idealnym wyborem jestWykres słupkowy skumulowany jest idealnym wyborem. Ustawiając segmenty danych poziomo od lewej do prawej wzdłuż osi Y, ta wizualizacja zachowuje czytelność długich etykiet, jednocześnie pokazujączarówno całkowite sumy kategorii, jak i wewnętrzny podział proporcjonalny. Działa wyjątkowo dobrze przy analizie wyników ankiety demograficznej, alokacji zasobów projektu według działów lub wielokanałowych przepływów konwersji.
Zasada działania poziomych słupków skumulowanych
Tworzenie poziomego wykresu skumulowanego polega na użyciu tej samejstackwłaściwości jak wykresy słupkowe skumulowane, połączone z osią Y opartą na kategoriach. Gdy wieletype: 'bar'serii dzieli identycznąstackklucz na poziomej orientacji, silnik renderujący akumuluje wartości od lewej do prawej wzdłuż osi X.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres słupkowy skumulowany, ustawyAxisnatype: 'category', xAxisnatype: 'value', a przypisz pasującystackciąg do każdej serii:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Inżynieria', 'Produkt', 'Projektowanie', 'Marketing']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Projekt Alpha', 'Projekt Beta', 'Projekt Gamma', 'Projekt Delta']
},
series: [
{
name: 'Inżynieria',
type: 'bar',
stack: 'przydział',
data: [320, 302, 301, 334]
},
{
name: 'Produkt',
type: 'bar',
stack: 'przydział',
data: [120, 132, 101, 134]
},
{
name: 'Projektowanie',
type: 'bar',
stack: 'przydział',
data: [220, 182, 191, 234]
},
{
name: 'Marketing',
type: 'bar',
stack: 'przydział',
data: [150, 212, 201, 154]
}
]
};
Zaawansowane techniki strukturalne
Stosowane poziome słupki mogą być skonfigurowane do porównania objętości absolutnych lub znormalizowane, aby pokazywać stosunki procentowe między kategoriami.
1. Poziomy wykres słupkowy znormalizowany do 100%
Aby ocenić stosunki względne zamiast liczb absolutnych w długich kategoriach, znormalizuj dane serii tak, aby suma wynosiła 100% w każdym wierszu:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Zadowoleni', 'Obojętni', 'Niezadowoleni']
},
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
yAxis: {
type: 'category',
data: [
'Sukces klienców korporacyjnych',
'Wsparcie dla rynku średnich firm',
'Samodzielna integracja'
]
},
series: [
{
name: 'Zadowoleni',
type: 'bar',
stack: 'feedback',
data: [75, 60, 45]
},
{
name: 'Obojętni',
type: 'bar',
stack: 'feedback',
data: [18, 25, 35]
},
{
name: 'Niezadowoleni',
type: 'bar',
stack: 'feedback',
data: [7, 15, 20]
}
]
};
Dokładna dostosowanie układu i stylizacji
Czyste granice wizualne i zaokrąglone końcówki zewnętrzne nadają poziomym słupkom stosowanym wygląd nowoczesny i wykończony.
1. Oddzielenie segmentów i zaokrąglenie końców zewnętrznych
Zastosuj cienkie pionowe linie graniczne, aby oddzielić wewnętrzne segmenty, a stylizację promienia narożnika ogranicz tylko do ostatniego segmentu po prawej stronie:
option = {
grid: {
left: '15%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Budżet Q1', 'Budżet Q2', 'Budżet Q3', 'Budżet Q4']
},
series: [
{
name: 'Koszty stałe',
type: 'bar',
stack: 'budget',
data: [400, 420, 410, 430],
itemStyle: {
color: '#5470c6',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Koszty zmienne',
type: 'bar',
stack: 'budget',
data: [200, 250, 220, 280],
itemStyle: {
color: '#91cc75',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Wolne wydatki',
type: 'bar',
stack: 'budget',
data: [100, 150, 130, 190],
itemStyle: {
color: '#fac858',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [0, 6, 6, 0] // Zaokrąglone narożniki na końcówce po prawej stronie
}
}
]
};
Strategiczne najlepsze praktyki
- Pierwszy segment bazowy:Segment najbardziej zbliżony do osi Y jest najłatwiejszy do porównania między kategoriami. Zawsze umieszczaj najważniejszy element jako pierwszy obiekt serii.
- Ogranicz liczba składników stosowanych:Utrzymuj łączną liczbę segmentów stosowanych na poziomie 5 lub mniej na słupku, aby zapewnić jasną analizę wizualną bez przesycenia widza.
- Etykiety tekstowe wewnątrz słupka: Dla poziomych słupków stosowanych z szerokimi segmentami rozważ włączenie
label: { show: true, position: 'inside' }aby umożliwić odczytanie wartości poszczególnych segmentów bez użycia podpowiedzi przy najechaniu kursorem.