Ketika menganalisis kerapatan aktivitas, tren berkelanjutan, atau korelasi di antara dua dimensi diskret, maka Grafik Peta Panas memberikan solusi visual yang kuat. Dengan memetakan nilai data ke skala warna dinamis di seluruh grid dua dimensi, peta panas memungkinkan pengguna untuk mengidentifikasi jam-jam penggunaan puncak, hambatan musiman, atau hubungan matriks secara instan—seperti beban server per jam dan hari dalam seminggu, log aktivitas pengguna, atau matriks korelasi lintas kategori.
Mekanisme Peta Panas
Dalam Apache ECharts, peta panas menggunakan type: 'heatmap' pada grid Kartesius dua dimensi. Setiap titik data mengharapkan array berisi 3 elemen yang diformat sebagai [indeksSumbuX, indeksSumbuY, nilai]. Komponen yang diperlukan visualMap memetakan nilai numerik ke gradien warna yang kontinu atau sebagian.
1. Pengaturan Dasar
Untuk membuat grafik peta panas dasar, deklarasikan sumbu kategorikal untuk sumbu horizontal (xAxis) dan vertikal (yAxis) skala, lewatkan [indeksX, indeksY, nilai] array ke dalam data seri Anda, dan konfigurasikan komponen visualMap komponen:
const jam = ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'];
const hari = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat'];
// Format data: [indeksX, indeksY, nilai]
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: jam,
splitArea: { show: true }
},
yAxis: {
type: 'category',
data: hari,
splitArea: { show: true }
},
visualMap: {
min: 0,
max: 60,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [
{
name: 'Beban Sistem',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Teknik Struktural Lanjutan
Peta panas dapat disesuaikan dengan langkah warna diskret, jarak sel yang berbeda, atau digabungkan dengan koordinat kalender untuk melacak aktivitas selama satu tahun penuh.
1. Pemetaan Warna Piecewise dan Jarak Sel Kustom
Alih-alih menggunakan gradien warna yang berkelanjutan, gunakan piecewisevisualMap untuk mengelompokkan nilai ke dalam band operasional yang berbeda (misalnya, Rendah, Sedang, Tinggi):
option = {
tooltip: { position: 'top' },
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'category',
data: ['Product A', 'Product B', 'Product C']
},
visualMap: {
type: 'piecewise',
min: 0,
max: 100,
left: 'center',
bottom: '5%',
orient: 'horizontal',
pieces: [
{ min: 80, label: 'Kinerja Tinggi', color: '#16a34a' },
{ min: 40, max: 79, label: 'Sedang', color: '#f59e0b' },
{ max: 39, label: 'Perlu Perhatian', 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
}
}
]
};
Penyesuaian Halus Tata Letak dan Gradien Warna
Memilih titik warna yang mudah dibaca dan mengaktifkan area pemisah membuat grid matriks besar menjadi mudah untuk dipindai.
1. Kustomisasi Gradien dan Penyelarasan Label
Konfigurasikan rampa warna multi-titik kustom divisualMap.inRange untuk sesuai dengan tema platform Anda:
option = {
grid: { containLabel: true },
xAxis: {
type: 'category',
data: ['Node 1', 'Node 2', 'Node 3', 'Node 4']
},
yAxis: {
type: 'category',
data: ['Service X', 'Service Y', 'Service Z']
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%',
inRange: {
color: ['#f0f9ff', '#0284c7', '#0f172a'] // Gradien biru lembut ke batu arang gelap
}
},
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]
]
}
]
};
Praktik Terbaik Strategis
- Selalu Sertakan
visualMap:Heatmap tanpa legenda visual memaksa pengguna menebak arti warna. Selalu letakkan visualMap yang berkelanjutan atau piecewisevisualMapdengan jelas di dekat tepi kanvas. - Gunakan Batas Grid untuk Pemisahan:Terapkan batas putih tipis menggunakan
itemStyle.borderColor: '#fff'danborderWidth: 1atau2untuk menjaga agar setiap sel tetap terlihat berbeda secara visual dalam matriks yang padat. - Pastikan Teks Berkontras Tinggi: Jika label numerik sel aktif (
label.show: true), uji agar warna teks tetap dapat dibaca terhadap langkah terang dan gelap dalam gradien warna Anda.