Ketika melacak penurunan progresif di seluruh langkah berurutan atau saluran konversi, Diagram Kerucut adalah alat visual standar. Dengan menampilkan nilai sebagai blok trapezoid tumpuk yang menyempit atau melebar di setiap tahapan, diagram kerucut memungkinkan pengguna mengidentifikasi hambatan konversi, tingkat penurunan, dan efisiensi proses dalam sekejap—seperti tahapan saluran penjualan, alur checkout e-commerce, atau funnel generasi prospek.
Mekanisme Diagram Kerucut
Di Apache ECharts, diagram kerucut dirender menggunakan type: 'funnel'. Setiap objek data berisi nama dan nilai numerik nilai. Mesin secara otomatis mengurutkan data dari terbesar ke terkecil (atau sebaliknya) dan menyesuaikan lebar setiap trapezoid relatif terhadap nilai maksimum dalam seri.
1. Pengaturan Dasar
Untuk membuat diagram kerucut dasar, sediakan tahapan kategori di dalam array data seri Anda dan atur type: 'funnel':
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center',
data: ['Pertanyaan', 'Proposal', 'Penawaran', 'Negosiasi', 'Perjanjian']
},
series: [
{
name: 'Kerucut Penjualan',
type: 'funnel',
left: '10%',
top: '18%',
bottom: '10%',
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
data: [
{ value: 100, name: 'Pertanyaan' },
{ value: 80, name: 'Proposal' },
{ value: 60, name: 'Penawaran' },
{ value: 40, name: 'Negosiasi' },
{ value: 20, name: 'Perjanjian' }
]
}
]
};
Teknik Struktural Lanjutan
Diagram kerucut dapat disesuaikan dengan tata letak piramida, penyesuaian tahapan khusus, atau tumpukan dua kerucut untuk membandingkan saluran konversi yang berbeda.
1. Tata Letak Piramida Terbalik dan Penyesuaian Khusus
Ubah sort: 'ascending' untuk membuat piramida terbalik, atau sesuaikan funnelAlign untuk menyesuaikan tahapan sepanjang tepi kiri atau kanan:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Piramida Konversi',
type: 'funnel',
left: '15%',
top: '18%',
bottom: '10%',
width: '70%',
sort: 'ascending', // Menampilkan tahap terkecil di atas, terbesar di bawah
funnelAlign: 'center',
label: {
show: true,
position: 'right'
},
data: [
{ value: 20, name: 'Tahap 1: Kesadaran' },
{ value: 40, name: 'Tahap 2: Minat' },
{ value: 60, name: 'Tahap 3: Keputusan' },
{ value: 80, name: 'Tahap 4: Tindakan' }
]
}
]
};
Penyesuaian Layout dan Gaya Tahap
Menambahkan jarak, sudut membulat, dan format label khusus menciptakan jarak yang rapi antar tahap konversi.
1. Jarak Tahap Khusus dan Label Persentase
Kontrol jarak jarak antar trapesium dan gunakan format label khusus untuk menyoroti retensi persentase di seluruh tahap:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} Pengguna'
},
series: [
{
name: 'Onboarding Pengguna',
type: 'funnel',
left: '10%',
top: '10%',
bottom: '10%',
width: '80%',
gap: 6, // Menambahkan pemisah jelas antar tahap
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
borderRadius: 4
},
label: {
show: true,
position: 'inside',
formatter: '{b}n{c} ({d}%)',
color: '#fff',
fontSize: 12
},
data: [
{ value: 5000, name: 'Kunjungan Aplikasi' },
{ value: 3400, name: 'Pendaftaran' },
{ value: 2100, name: 'Pengaturan Profil' },
{ value: 1200, name: 'Aksi Pertama' },
{ value: 800, name: 'Berlangganan' }
]
}
]
};
Praktik Terbaik Strategis
- Jaga Tahapan Secara Berurutan: Grafik funnel bergantung pada logika alur berurutan. Pastikan item data mewakili proses langkah demi langkah yang sebenarnya, bukan kategori yang tidak terkait.
- Gunakan
jarakuntuk batas visual tahapan yang jelas: Menetapkanjarak(misalnya, 4px hingga 6px) antar trapesium mencegah warna yang bersebelahan bercampur menjadi satu blok. - Tampilkan Persentase Tahapan: Gabungkan angka mentah dengan persentase tahapan (misalnya, menggunakan
{d}%dalam format label) agar pengguna dapat langsung menilai rasio penurunan di setiap tonggak.