Untuk menekankan arah tren dan volume keseluruhan selama waktu yang berkelanjutan, Diagram Areamemberikan pendekatan visual yang ekspresif. Dengan mengisi wilayah antara garis tren dan sumbu horizontal, diagram area menarik perhatian pada besaran relatif dan perubahan volume total di sepanjang urutan, seperti konsumsi bandwidth server, volume pengguna aktif, atau throughput transaksional harian.
Mekanisme Diagram Area
Diagram area dibangun langsung dari konfigurasi diagram garis. Dengan menetapkan type: 'line'dan menyertakan sebuah areaStyleproperti pada objek seri, mesin rendering secara otomatis mengisi ruang geometris di bawah jalur garis hingga ke garis dasar horizontal.
1. Pengaturan Dasar
Untuk membuat diagram area dasar, tentukan sumbu X yang kontinu, atur seri type: 'line', dan nyatakan objek kosong atau yang disesuaikan areaStyleobjek:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
areaStyle: {}, // Mengaktifkan pengisian area default
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
Teknik Struktural Lanjutan
Diagram area dapat ditingkatkan dengan gradien warna modern dan kurva halus untuk meningkatkan keterbacaan dan kesan visual yang lebih baik.
1. Gaya Pengisian Gradien
Pengisian warna solid kadang terasa berat. Menerapkan gradien linier setengah transparan menciptakan tampilan modern dan elegan di mana pengisian perlahan memudar menuju sumbu bawah:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun']
},
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. Perbandingan Area Multi-Seri yang Tumpang Tindih
Ketika menampilkan beberapa seri area dalam satu diagram, menyesuaikan opasitas pengisian sangat penting agar jalur data di bawah tetap terlihat secara penuh:
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Lalu Lintas Masuk', 'Lalu Lintas Keluar']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Lalu Lintas Masuk',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [120, 200, 450, 600, 700, 380]
},
{
name: 'Lalu Lintas Keluar',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [80, 140, 310, 420, 510, 260]
}
]
};
Penyesuaian Halus Tata Letak dan Jarak
Karena isian area berjalan hingga ke dasar sumbu Y, mengkonfigurasi jarak batas yang terus-menerus menjaga isian tetap sejajar dengan tepi kanvas secara bersih.
1. Penyelarasan Tepi yang Mulus
Dengan mengatur boundaryGap: falsepada sumbu X kategori, isian dimulai dari tepi kiri absolut grid kontainer dan berakhir secara bersih di ujung kanan:
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Kuartal 1', 'Kuartal 2', 'Kuartal 3', 'Kuartal 4']
},
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]
}
]
};
Praktik Terbaik Strategis
- Gunakan Opasitas Isian Rendah:Isian area padat menghalangi garis-garis grid di bawahnya dan seri yang tumpang tindih. Selalu pertahankan tingkat transparansi sekitar 20% hingga 50% untuk kontras tinggi.
- Batasi seri menjadi 2 atau 3:Terlalu banyak bentuk area yang tumpang tindih menyebabkan kebingungan visual. Untuk 4 atau lebih dataset berkelanjutan yang dijumlahkan, gunakan grafik area tumpuk sebagai gantinya.
- Atur
boundaryGap: false:Menghilangkan margin horizontal pada sumbu waktu memungkinkan isian area menjangkau lebar grid penuh tanpa meninggalkan celah kosong yang tidak nyaman di tepi kiri dan kanan.