Gdy musisz śledzić zarówno całkowity objętość, jak i wkłady poszczególnych podkomponentów w czasie, idealnym narzędziem wizualizacji jestWykres obszarów skumulowanych jest idealnym narzędziem wizualizacji. Składanie obszarów w pionie tworzy ciągłą, złożoną wizualizację, w której najwyższa linia reprezentuje całkowitą sumę, a szerokość poszczególnych pasów pokazuje zmieniające się wkłady podkategorii, takie jak całkowity ruch internetowy podzielony według silnika wyszukiwania, ruchu organicznego i kanałów bezpośrednich odwiedzin w ciągu kilku miesięcy.
Zasada działania wykresów obszarów skumulowanych
Wykresy obszarów skumulowanych łączą konfiguracje serii linii z dopasowanymistackatrybutami. Gdy silnik renderujący wykryje identycznestackidentyfikatory w wielu seriach ztype: 'line'iareaStyleaktywnymi, stosuje każdy punkt danych kolejno powyżej poprzedniej ścieżki linii serii wzdłuż pionowej osi Y.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres obszarów skumulowanych, zdefiniuj ciągłą oś X, ustawtype: 'line'na każdej serii, włączareaStyle, a przypisz identycznystackidentyfikator we wszystkich seriach:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['Email', 'Unia reklam', 'Reklamy wideo', 'Bezpośrednio']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob', 'Nied']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Razem',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Unia reklam',
type: 'line',
stack: 'Razem',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Reklamy wideo',
type: 'line',
stack: 'Razem',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Bezpośrednio',
type: 'line',
stack: 'Razem',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
Zaawansowane techniki strukturalne
Wykresy obszarów skumulowanych mogą być skonfigurowane tak, aby skupiały się albo na ogólnym wzroście skumulowanym, albo na zmianach proporcjonalnych w czasie.
1. Wykres procentowy obszarów znormalizowanych do 100%
Gdy oceniasz zmiany proporcjonalne zamiast całkowitej objętości skumulowanej w czasie, znormalizuj zestaw danych do 100% na każdy punkt czasu poziomy:
option = {
tooltip: {
trigger: 'axis',
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Stacja robocza', 'Mobile', 'Tablet']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2023', '2024', '2025', '2026']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Stacja robocza',
type: 'line',
stack: 'procent',
smooth: true,
areaStyle: {},
data: [65, 55, 48, 40]
},
{
name: 'Mobile',
type: 'line',
stack: 'procent',
smooth: true,
areaStyle: {},
data: [25, 35, 42, 50]
},
{
name: 'Tablet',
type: 'line',
stack: 'procent',
smooth: true,
areaStyle: {},
data: [10, 10, 10, 10]
}
]
};
Dostosowanie układu i stylizacji
Ponieważ nałożone obszary całkowicie zasłaniają tło, dostosowanie przezroczystości wypełnienia i grubości linii pomaga zachować czytelność poszczególnych warstw.
1. Dostosowana przezroczystość warstw i separatorów krawędzi
Ustawienie stałych linii na nieco przezroczystych wypełnieniach obszarów tworzy wyraźne wizualne granice między sąsiednimi nałożonymi pasami:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Produkt A',
type: 'line',
stack: 'objętość',
smooth: true,
lineStyle: { width: 2, color: '#5470c6' },
areaStyle: { color: '#5470c6', opacity: 0.7 },
data: [120, 150, 180, 210]
},
{
name: 'Produkt B',
type: 'line',
stack: 'objętość',
smooth: true,
lineStyle: { width: 2, color: '#91cc75' },
areaStyle: { color: '#91cc75', opacity: 0.7 },
data: [220, 280, 250, 310]
},
{
name: 'Produkt C',
type: 'line',
stack: 'objętość',
smooth: true,
lineStyle: { width: 2, color: '#fac858' },
areaStyle: { color: '#fac858', opacity: 0.7 },
data: [150, 190, 220, 260]
}
]
};
Strategiczne najlepsze praktyki
- Zakotwicz stabilne serie na dole:Umieść największą lub najmniej wrażliwą serię na dole stosu, aby stworzyć przewidywalne podstawy dla pasów powyżej.
- Ogranicz liczbę pasów:Nałożenie więcej niż 4–5 serii sprawia, że trudno jest dokładnie ocenić pasy środkowe. Rozważ połączenie mniejszych kategorii w kategorię „Inne”.
- Użyj
axisPointer: { type: 'cross' }:Połączenie wskaźnika przesunięcia z ciągłym podpowiedziem ułatwia dokładne wyznaczenie konkretnych wartości dat w gęstych pionowych stosach.