Ketika mengeksplorasi hubungan atau korelasi antara dua variabel kontinu, Grafik Sebaran (atau Grafik Sebaran) adalah alat analitik utama. Dengan memplot titik data di atas kisi dua dimensi berdasarkan koordinat numerik X dan Y, grafik sebaran membantu mengungkapkan kelompok, pencilan, tren, dan korelasi di seluruh dataset yang kompleks, seperti pengeluaran pemasaran dibandingkan generasi prospek atau pengalaman karyawan dibandingkan gaji.
Mekanisme Grafik Sebaran
Berbeda dengan grafik batang atau garis yang didorong kategori, grafik sebaran menggunakan sumbu nilai numerik untuk kedua dimensi. Dalam Apache ECharts, mengatur type: 'scatter'mengharapkan data yang diformat sebagai array koordinat numerik dua elemen [x, y] atau objek data yang dipetakan melalui xAxis dan yAxis konfigurasi.
1. Pengaturan Dasar
Untuk membuat grafik sebaran dasar, tentukan type: 'value' pada kedua sumbu dan berikan pasangan koordinat numerik dalam array data seri Anda:
option = {
tooltip: {
trigger: 'item',
formatter: 'X: {c0}
Y: {c1}'
},
xAxis: {
type: 'value',
name: 'Pengeluaran Iklan ($k)'
},
yAxis: {
type: 'value',
name: 'Konversi'
},
series: [
{
type: 'scatter',
symbolSize: 12,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.03, 7.24],
[12.0, 4.26],
[7.08, 4.82],
[5.02, 5.68]
]
}
]
};
Teknik Struktural Lanjutan
Grafik sebaran dapat mengintegrasikan ukuran dinamis untuk mewakili variabel ketiga (grafik gelembung) atau menampilkan overlay kelompok multi-kategori.
1. Ukuran Titik Variabel (Efek Gelembung)
Kirimkan fungsi kustom atau pemetaan nilai data ke symbolSizeuntuk mengkodekan metrik kuantitatif ketiga ke dalam ukuran titik:
option = {
tooltip: {
trigger: 'item',
formatter: function (param) {
return 'Pengeluaran: $' + param.data[0] + 'krn' +
'Pendapatan: $' + param.data[1] + 'krn' +
'ROAS: ' + param.data[2] + 'x';
}
},
xAxis: {
type: 'value',
name: 'Pengeluaran'
},
yAxis: {
type: 'value',
name: 'Pendapatan'
},
series: [
{
name: 'Kampanye',
type: 'scatter',
symbolSize: function (data) {
return data[2] * 5; // Skala ukuran gelembung berdasarkan variabel ketiga
},
data: [
[15, 120, 8.0],
[25, 180, 7.2],
[10, 50, 5.0],
[40, 380, 9.5],
[30, 210, 7.0]
],
itemStyle: {
color: '#5470c6',
opacity: 0.7
}
}
]
};
Penyesuaian Halus Tata Letak dan Gaya
Mengendalikan transparansi penanda dan menambahkan garis tren target mencegah kelompok padat berubah menjadi benda visual padat.
1. Penanda Transparan dan Gaya Kelompok
Menerapkan garis tepi dan isian item setengah transparan menjaga titik data yang tumpang tindih tetap terlihat dalam kelompok padat:
option = {
grid: {
left: '10%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value',
scale: true // Skala otomatis sumbu min/maks agar sesuai dengan data dengan rapat
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'scatter',
symbolSize: 16,
itemStyle: {
color: 'rgba(84, 112, 198, 0.6)',
borderColor: '#5470c6',
borderWidth: 2
},
data: [
[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
[155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8],
[176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2]
]
}
]
};
Praktik Terbaik Strategis
- Aktifkan
scale: truepada Sumbu Numerik: Aturscale: truepada kedua sumbu numerik agar plot melakukan zoom otomatis ke rentang data yang relevan, bukan memaksa titik asal di(0,0). - Gunakan Transparansi Isian untuk Tumpang Tindih: Saat memplot ratusan titik, kurangi transparansi isian menjadi sekitar 0,4–0,6 agar zona tumpang tindih yang padat tampak lebih gelap secara alami.
- Berikan Label Sumbu Kontekstual: Selalu beri label sumbu X dan Y secara eksplisit dengan satuan pengukuran (misalnya, “$ dalam Ribu” atau “Latensi dalam ms”) agar nilai menjadi jelas segera tanpa harus memeriksa tooltip.