Ketika melacak transfer berkelanjutan, distribusi sumber daya, atau perjalanan pengguna multi-tahap, Diagram Sankey adalah alat visualisasi utama. Dengan menggambar pita aliran proporsional antara node tahap berurutan, diagram Sankey menggambarkan bagaimana jumlah total terbagi, digabungkan, dan berpindah melalui sistem yang kompleks—seperti funnel konversi pengguna situs web, jaringan distribusi energi, atau alokasi anggaran organisasi.
Mekanisme Diagram Sankey
Di Apache ECharts, diagram Sankey menggunakan type: 'sankey'. Mirip dengan diagram grafik, plot Sankey didefinisikan oleh daftar yang berbeda node (atau data) dan tautan (atau sisi). Setiap tautan berisi sumber nama node, tujuan nama node, dan nilai numerik nilai yang menentukan lebar visual dari garis aliran yang terhubung.
1. Pengaturan Dasar
Untuk membuat diagram Sankey dasar, nyatakan item node Anda di dalam data dan tentukan volume aliran berarah di dalam tautan:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: [
{ name: 'Pendapatan Total' },
{ name: 'Penjualan Produk' },
{ name: 'Layanan' },
{ name: 'Pemasaran' },
{ name: 'R&D' },
{ name: 'Laba' }
],
links: [
{ source: 'Pendapatan Total', target: 'Penjualan Produk', value: 70 },
{ source: 'Pendapatan Total', target: 'Layanan', value: 30 },
{ source: 'Penjualan Produk', target: 'Pemasaran', value: 30 },
{ source: 'Penjualan Produk', target: 'R&D', value: 25 },
{ source: 'Penjualan Produk', target: 'Laba', value: 15 },
{ source: 'Layanan', target: 'Laba', value: 30 }
],
emphasis: {
focus: 'adjacency'
},
lineStyle: {
color: 'gradient',
curveness: 0.5
}
}
]
};
Teknik Struktural Lanjutan
Grafik Sankey dapat disesuaikan dengan orientasi aliran vertikal, warna simpul multi-level, dan penyorotan tautan dinamis untuk melacak jalur individu melalui jaringan yang rumit.
1. Orientasi Aliran Vertikal
Atur orient: 'vertical'untuk mengubah aliran tahap horizontal menjadi tampilan air terjun vertikal dari atas ke bawah:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
orient: 'vertical',
nodeWidth: 20,
nodeGap: 16,
data: [
{ name: 'Kunjungan Website' },
{ name: 'Halaman Produk' },
{ name: 'Pemantul Langsung' },
{ name: 'Keranjang' },
{ name: 'Checkout' }
],
links: [
{ source: 'Kunjungan Website', target: 'Halaman Produk', value: 1000 },
{ source: 'Kunjungan Website', target: 'Pemantul Langsung', value: 400 },
{ source: 'Halaman Produk', target: 'Keranjang', value: 600 },
{ source: 'Keranjang', target: 'Checkout', value: 450 }
],
lineStyle: {
color: 'source',
curveness: 0.5
}
}
]
};
Penyesuaian Layout dan Gaya Tautan
Menyesuaikan jarak simpul, kelengkungan garis, dan perilaku penyorotan saat hover menjaga aliran multi-tahap yang kompleks tetap bersih dan mudah dibaca.
1. Kontrol Jarak Simpul dan Aliran Gradien Sumber-Tujuan
Menyesuaikan nodeGap dan mengatur lineStyle.color: 'gradient'menciptakan transisi warna yang halus antar tahap:
option = {
series: [
{
type: 'sankey',
left: '5%',
right: '15%',
nodeWidth: 24,
nodeGap: 18,
draggable: true,
label: {
position: 'right',
color: '#333',
fontSize: 12
},
data: [
{ name: 'Sumber A', itemStyle: { color: '#5470c6' } },
{ name: 'Sumber B', itemStyle: { color: '#91cc75' } },
{ name: 'Tahap 1', itemStyle: { color: '#fac858' } },
{ name: 'Tahap 2', itemStyle: { color: '#ee6666' } },
{ name: 'Output Akhir', itemStyle: { color: '#73c0de' } }
],
links: [
{ source: 'Sumber A', target: 'Tahap 1', value: 50 },
{ source: 'Sumber B', target: 'Tahap 1', value: 30 },
{ source: 'Tahap 1', target: 'Tahap 2', value: 60 },
{ source: 'Tahap 1', target: 'Output Akhir', value: 20 },
{ source: 'Tahap 2', target: 'Output Akhir', value: 60 }
],
lineStyle: {
color: 'gradient',
curveness: 0.6,
opacity: 0.4
}
}
]
};
Praktik Terbaik Strategis
- Jaga Konservasi Aliran:Pastikan jumlah nilai yang mengalir masuk ke sebuah simpul sama dengan atau secara logis menjelaskan nilai yang keluar untuk mencegah adanya celah visual yang menyesatkan.
- Aktifkan
emphasis.focus: 'kedekatan': Saat menangani alur multi-tahap, fokus pada tautan yang berdekatan saat dihover memungkinkan pengguna memisahkan jalur tertentu tanpa gangguan visual. - Gunakan Tautan Gradien: Pengaturan
lineStyle.color: 'gradien'dengan mulus menggabungkan warna simpul sumber ke warna simpul tujuan, membuat transisi multi-tahap terasa intuitif secara visual.