Aby podkreślić zarówno kierunek trendu, jak i całkowitą objętość w czasie ciągłym, Wykres obszaru zapewnia wyraźny sposób wizualny. Wypełniając obszar między linią trendu a osią poziomą, wykresy obszarów skupiają uwagę na względnej wielkości i całkowitych zmianach objętości w ciągu sekwencji, takich jak zużycie przepustowości serwera, liczba aktywnych użytkowników lub dzienna przepustowość transakcyjna.
Zasada działania wykresów obszarów
Wykresy obszarów są bezpośrednio oparte na konfiguracji wykresu liniowego. Ustawiając type: 'line' i dodając właściwość areaStyle w obiekcie serii, silnik renderujący automatycznie wypełnia przestrzeń geometryczną pod linią aż do poziomej linii bazowej.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres obszarów, zdefiniuj ciągłą oś X, ustaw serię type: 'line', a następnie zadeklaruj pusty lub dostosowany obiekt areaStyle obiekt:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob', 'Nied']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
areaStyle: {}, // Włącza domyślne wypełnienie obszaru
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
Zaawansowane techniki strukturalne
Wykresy obszarów mogą być ulepszone za pomocą nowoczesnych gradientów kolorów i płynnych krzywych, co poprawia czytelność i estetykę wizualną.
1. Stylizacja wypełnienia gradientem
Pełne wypełnienie koloru może czasem wydawać się ciężkie. Zastosowanie półprzezroczystego gradientu liniowego tworzy nowoczesny, elegancki wygląd, w którym wypełnienie delikatnie zanika w kierunku osi dolnej:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: '#5470c6'
},
areaStyle: {
opacity: 0.8,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(84, 112, 198, 0.6)' },
{ offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
]
}
},
data: [320, 450, 410, 680, 890, 950]
}
]
};
2. Porównanie obszarów dla wielu serii z nakładaniem
Gdy wyświetlasz wiele serii obszarów na jednym wykresie, dostosowanie przezroczystości wypełnienia jest kluczowe, aby podstawowe ścieżki danych były w pełni widoczne:
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Ruch przychodzący', 'Ruch wychodzący']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Ruch przychodzący',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [120, 200, 450, 600, 700, 380]
},
{
name: 'Ruch wychodzący',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [80, 140, 310, 420, 510, 260]
}
]
};
Dokładna dostosowanie układu i odstępów
Ponieważ wypełnienia obszarów biegną aż do poziomu osi Y, skonfigurowanie ciągłych odstępów brzegowych utrzymuje wypełnienie wyrównane w sposób czysty do krawędzi płótna.
1. Bezproblemne wyrównanie krawędzi
UstawiającboundaryGap: falsena osi X kategorii, wypełnienie zaczyna się od absolutnej lewej krawędzi siatki kontenera i kończy się czysto po prawej stronie:
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
areaStyle: {
color: 'rgba(145, 204, 117, 0.3)'
},
lineStyle: {
color: '#91cc75',
width: 2
},
data: [150, 230, 224, 318]
}
]
};
Strategiczne najlepsze praktyki
- Używaj niskich wartości przezroczystości wypełnienia:Pełne wypełnienia obszarów zasłaniają siatki podstawowe i nakładające się serie. Zawsze utrzymuj poziom przezroczystości wokół 20% do 50% dla wysokiej kontrastowości.
- Utrzymuj liczbę serii na poziomie 2 lub 3:Zbyt wiele nakładających się kształtów obszarów powoduje zamieszanie wizualne. W przypadku 4 lub więcej skumulowanych ciągłych zestawów danych użyj zamiast tego wykresu obszarowego skumulowanego.
- Ustaw
boundaryGap: false:Usunięcie poziomych marginesów na osiach czasu pozwala na rozciąganie wypełnień obszarów na pełną szerokość siatki bez pozostawiania niekomfortowych pustych obszarów po lewej i prawej krawędzi.