Podczas analizy gęstości aktywności, ciągłych trendów lub korelacji między dwiema dyskretnymi wymiarami, Wykres ciepła zapewnia potężne rozwiązanie wizualne. Przyporządkowując wartości danych do dynamicznego skali kolorów na dwuwymiarowej siatce, wykresy ciepła pozwalają użytkownikom natychmiast zauważyć godziny szczytowego użytkowania, sezonowe zatory lub relacje macierzowe natychmiast — na przykład obciążenie serwera w godzinach i dni tygodnia, dzienniki aktywności użytkowników lub macierze korelacji między kategoriami.
Zasada działania wykresów ciepła
W Apache ECharts wykresy ciepła używają type: 'heatmap' na dwuwymiarowej siatce kartezjańskiej. Każdy punkt danych oczekuje tablicy trzyelementowej w formacie [xAxisIndex, yAxisIndex, value]. Wymagany visualMap komponent mapuje wartości numeryczne na ciągły lub kawałkowy gradient kolorów.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres ciepła, zadeklaruj osie kategoryczne dla poziomej (xAxis) oraz pionowej (yAxis) skal, przekaż [xIndex, yIndex, value] tablice do danych serii i skonfiguruj komponent visualMap komponent:
const hours = ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'];
const days = ['Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek'];
// Format danych: [xIndex, yIndex, value]
const data = [
[0, 0, 5], [1, 0, 1], [2, 0, 0], [3, 0, 0], [4, 0, 12], [5, 0, 24], [6, 0, 38], [7, 0, 42], [8, 0, 35], [9, 0, 20], [10, 0, 10], [11, 0, 6],
[0, 1, 3], [1, 1, 0], [2, 1, 0], [3, 1, 1], [4, 1, 15], [5, 1, 28], [6, 1, 45], [7, 1, 50], [8, 1, 40], [9, 1, 22], [10, 1, 12], [11, 1, 4],
[0, 2, 2], [1, 2, 1], [2, 2, 0], [3, 2, 0], [4, 2, 11], [5, 2, 26], [6, 2, 41], [7, 2, 48], [8, 2, 38], [9, 2, 19], [10, 2, 8], [11, 2, 3],
[0, 3, 4], [1, 3, 2], [2, 3, 0], [3, 3, 1], [4, 3, 14], [5, 3, 30], [6, 3, 49], [7, 3, 55], [8, 3, 42], [9, 3, 25], [10, 3, 15], [11, 3, 5],
[0, 4, 6], [1, 4, 3], [2, 4, 1], [3, 4, 2], [4, 4, 10], [5, 4, 20], [6, 4, 32], [7, 4, 36], [8, 4, 28], [9, 4, 18], [10, 4, 9], [11, 4, 2]
];
option = {
tooltip: {
position: 'top'
},
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: { show: true }
},
yAxis: {
type: 'category',
data: days,
splitArea: { show: true }
},
visualMap: {
min: 0,
max: 60,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [
{
name: 'Obciążenie systemu',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Zaawansowane techniki strukturalne
Wykresy ciepła można dostosować za pomocą dyskretnych kroków kolorów, wyraźnych odstępów między komórkami lub połączyć z współrzędnymi kalendarzowymi w celu śledzenia aktywności przez cały rok.
1. Mapowanie kolorów kawałkowe i niestandardowe odstępy komórek
Zamiast ciągłego gradientu kolorów, użyj kawałkowegovisualMap aby grupować wartości w wyraźne pasma operacyjne (np. Niski, Średni, Wysoki):
option = {
tooltip: { position: 'top' },
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'category',
data: ['Produkt A', 'Produkt B', 'Produkt C']
},
visualMap: {
type: 'piecewise',
min: 0,
max: 100,
left: 'center',
bottom: '5%',
orient: 'horizontal',
pieces: [
{ min: 80, label: 'Wysoka wydajność', color: '#16a34a' },
{ min: 40, max: 79, label: 'Średnia', color: '#f59e0b' },
{ max: 39, label: 'Wymaga uwagi', color: '#dc2626' }
]
},
series: [
{
type: 'heatmap',
data: [
[0, 0, 85], [1, 0, 92], [2, 0, 78], [3, 0, 88],
[0, 1, 45], [1, 1, 55], [2, 1, 62], [3, 1, 35],
[0, 2, 25], [1, 2, 30], [2, 2, 18], [3, 2, 42]
],
label: { show: true },
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
Dokładna dostosowanie układu i gradientów kolorów
Wybieranie czytelnych punktów kolorów oraz włączanie obszarów podziału ułatwia szybkie przeglądanie dużych siatek macierzy.
1. Dostosowanie gradientu i wyrównanie etykiet
Skonfiguruj niestandardowe gradienty kolorów z wieloma punktami wvisualMap.inRange aby dopasować do motywu platformy:
option = {
grid: { containLabel: true },
xAxis: {
type: 'category',
data: ['Węzeł 1', 'Węzeł 2', 'Węzeł 3', 'Węzeł 4']
},
yAxis: {
type: 'category',
data: ['Usługa X', 'Usługa Y', 'Usługa Z']
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%',
inRange: {
color: ['#f0f9ff', '#0284c7', '#0f172a'] // Delikatny niebieski do ciemnego szaro-zielonego gradientu
}
},
series: [
{
type: 'heatmap',
data: [
[0, 0, 12], [1, 0, 45], [2, 0, 78], [3, 0, 95],
[0, 1, 34], [1, 1, 67], [2, 1, 89], [3, 1, 23],
[0, 2, 56], [1, 2, 78], [2, 2, 12], [3, 2, 88]
]
}
]
};
Strategiczne najlepsze praktyki
- Zawsze dodaj
visualMap: Mapa cieplna bez legendy wizualnej zmusza użytkowników do zgadywania, co oznaczają kolory. Zawsze umieszczaj ciągłą lub kawałkowąvisualMapwyraźnie w pobliżu krawędzi płótna. - Użyj obramowań siatki do oddzielenia: Zastosuj cienkie białe obramowania za pomocą
itemStyle.borderColor: '#fff'orazborderWidth: 1lub2aby zachować wizualną różnorodność poszczególnych komórek w gęstych macierzach. - Upewnij się, że tekst ma wysoką kontrastowość: Jeśli etykiety numeryczne komórek są aktywne (
label.show: true), sprawdź, czy kolor tekstu nadal jest czytelny w stosunku do najjaśniejszych i najciemniejszych odcieni w paletzie kolorów.