Ketika Anda perlu melacak volume total keseluruhan dan kontribusi komponen sub-terpisah seiring waktu, maka Grafik Area Bertumpuk adalah alat visualisasi yang ideal. Pengisian area yang ditumpuk secara vertikal menciptakan tampilan komposit yang berkelanjutan di mana garis paling atas mewakili total agregat, sementara lebar pita individu menunjukkan perubahan kontribusi sub-kategori, seperti lalu lintas web total yang dibagi berdasarkan mesin pencari, organik, dan saluran rujukan langsung selama beberapa bulan.
Mekanisme Grafik Area Bertumpuk
Grafik area bertumpuk menggabungkan konfigurasi seri garis dengan atribut stack yang sesuai. Ketika mesin rendering mendeteksi identifikasi stack yang sama di seluruh seri yang memiliki type: 'line' dan areaStyle aktif, maka setiap titik data akan ditumpuk secara berurutan di atas jalur garis seri sebelumnya sepanjang sumbu Y vertikal.
1. Pengaturan Dasar
Untuk membuat grafik area bertumpuk dasar, tentukan sumbu X yang kontinu, atur type: 'line' pada setiap seri, aktifkan areaStyle, dan berikan identifikasi stack yang sama di seluruh seri:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
Teknik Struktural Lanjutan
Grafik area bertumpuk dapat dikonfigurasi untuk fokus pada pertumbuhan kumulatif keseluruhan atau pergeseran proporsional relatif seiring waktu.
1. Grafik Area Persentase yang Dinormalisasi 100%
Ketika mengevaluasi pergeseran proporsional alih-alih volume agregat total seiring waktu, normalisasi dataset Anda menjadi 100% per titik waktu horisontal:
option = {
tooltip: {
trigger: 'axis',
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Desktop', 'Mobile', 'Tablet']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2023', '2024', '2025', '2026']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Desktop',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [65, 55, 48, 40]
},
{
name: 'Mobile',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [25, 35, 42, 50]
},
{
name: 'Tablet',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [10, 10, 10, 10]
}
]
};
Penyesuaian Tata Letak dan Gaya
Karena area yang ditumpuk sepenuhnya menutupi latar belakang, menyesuaikan opasitas isian dan garis batas membantu menjaga setiap lapisan tetap jelas dan mudah dibaca.
1. Opasitas Lapisan Kustom dan Pemisah Batas
Menetapkan garis solid di atas isian area yang sedikit tembus cahaya menciptakan batas visual yang tajam antara pita tumpukan yang bersebelahan:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Produk A',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#5470c6' },
areaStyle: { color: '#5470c6', opacity: 0.7 },
data: [120, 150, 180, 210]
},
{
name: 'Produk B',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#91cc75' },
areaStyle: { color: '#91cc75', opacity: 0.7 },
data: [220, 280, 250, 310]
},
{
name: 'Produk C',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#fac858' },
areaStyle: { color: '#fac858', opacity: 0.7 },
data: [150, 190, 220, 260]
}
]
};
Praktik Terbaik Strategis
- Tetapkan Seri Stabil di Bagian Bawah:Tempatkan seri terbesar atau yang paling tidak fluktuatif di bagian bawah tumpukan untuk menetapkan dasar yang dapat diprediksi bagi pita di atasnya.
- Batasi Jumlah Pita:Menumpuk lebih dari 4 hingga 5 seri membuat pita tengah sulit dievaluasi secara akurat. Pertimbangkan mengelompokkan kategori kecil ke dalam kategori ‘Lainnya’.
- Gunakan
axisPointer: { type: 'cross' }:Menggabungkan penunjuk silang saat hover dengan tooltip yang terus-menerus membuat menentukan nilai tanggal tertentu di seluruh tumpukan vertikal yang padat menjadi mudah.