Diagram Sungai Tema: Analisis Aliran Kategorikal Berkelanjutan dan Tren

Ketika melacak bagaimana beberapa kategori berkelanjutan berkembang seiring waktu—seperti penjualan produk di setiap kuartal, tren topik yang berubah dalam liputan berita, atau pola konsumsi media—makaDiagram Sungai Tema (bentuk khusus dari streamgraph) memberikan presentasi yang intuitif dan menarik secara visual. Berbeda dengan diagram area tumpuk standar yang menempel pada dasar datar, diagram Sungai Tema mengalir secara horizontal di sekitar sumbu pusat, menciptakan visualisasi yang organik seperti sungai, di mana aliran individu melebar atau menyempit berdasarkan perubahan nilai kuantitatif.

Mekanisme Diagram Sungai Tema

Dalam Apache ECharts, diagram Sungai Tema menggunakantype: 'themeRiver'. Alih-alih mengandalkan konfigurasi tradisionalxAxis dan yAxis, diagram ini beroperasi pada satu sumbu horizontalsingleAxis dengan type: 'time' atau type: 'value'. Item data dilewatkan sebagai tupel array yang diformat sebagai[waktu, nilai, namaKategori].

1. Pengaturan Dasar

Untuk membuat diagram Sungai Tema dasar, konfigurasikansingleAxis jenis'time', tentukantype: 'themeRiver' dalam seri Anda, dan berikan pengamatan aliran Anda dalam arraydata array:

ECharts


Edit ECharts di VPasCode
ECharts Edit ECharts in VPasCode 
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            lineStyle: {
                color: 'rgba(0,0,0,0.2)',
                width: 1,
                type: 'solid'
            }
        }
    },
    legend: {
        data: ['Teknologi', 'Fesyen', 'Olahraga']
    },
    singleAxis: {
        top: 50,
        bottom: 50,
        axisTick: {},
        axisLabel: {},
        type: 'time',
        axisPointer: {
            animation: true,
            label: { show: true }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                opacity: 0.5
            }
        }
    },
    series: [
        {
            type: 'themeRiver',
            emphasis: {
                itemStyle: {
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                }
            },
            data: [
                ['2026-01-01', 12, 'Teknologi'],
                ['2026-02-01', 24, 'Teknologi'],
                ['2026-03-01', 32, 'Teknologi'],
                ['2026-04-01', 18, 'Teknologi'],
                ['2026-01-01', 15, 'Fesyen'],
                ['2026-02-01', 18, 'Fesyen'],
                ['2026-03-01', 10, 'Fesyen'],
                ['2026-04-01', 25, 'Fesyen'],
                ['2026-01-01', 8, 'Olahraga'],
                ['2026-02-01', 12, 'Olahraga'],
                ['2026-03-01', 28, 'Olahraga'],
                ['2026-04-01', 20, 'Olahraga']
            ]
        }
    ]
};
Edit ECharts in VPasCode



Edit ECharts di VPasCode

 

Teknik Struktural Lanjutan

Grafik Theme River sangat unggul saat memantau peristiwa multi-kategori yang kompleks selama urutan waktu panjang dengan tooltip khusus dan palet kategori yang diberi gaya.

1. Aliran Volume Media Multi-Stream

Menyesuaikan warna aliran dengan pemetaan palet yang eksplisit dan tooltip sumbu khusus mengubah log peristiwa mentah menjadi timeline aktivitas yang bersih:

ECharts


Edit ECharts di VPasCode
ECharts Edit ECharts in VPasCode 
const categories = ['Artikel', 'Tayangan Video', 'Putaran Podcast', 'Bagikan Media Sosial'];

option = {
    title: {
        text: 'Aliran Keterlibatan Konten',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            lineStyle: {
                color: '#333',
                width: 1
            }
        }
    },
    legend: {
        data: categories,
        bottom: 10
    },
    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
    singleAxis: {
        top: '15%',
        bottom: '20%',
        type: 'time',
        axisLine: { lineStyle: { color: '#ccc' } },
        splitLine: { show: false }
    },
    series: [
        {
            type: 'themeRiver',
            label: {
                show: true,
                position: 'left',
                fontSize: 12
            },
            data: [
                ['2026-01-01', 120, 'Artikel'], ['2026-02-01', 200, 'Artikel'], ['2026-03-01', 150, 'Artikel'], ['2026-04-01', 80, 'Artikel'],
                ['2026-01-01', 60, 'Tayangan Video'], ['2026-02-01', 140, 'Tayangan Video'], ['2026-03-01', 220, 'Tayangan Video'], ['2026-04-01', 310, 'Tayangan Video'],
                ['2026-01-01', 30, 'Putaran Podcast'], ['2026-02-01', 45, 'Putaran Podcast'], ['2026-03-01', 90, 'Putaran Podcast'], ['2026-04-01', 110, 'Putaran Podcast'],
                ['2026-01-01', 180, 'Bagikan Media Sosial'], ['2026-02-01', 110, 'Bagikan Media Sosial'], ['2026-03-01', 70, 'Bagikan Media Sosial'], ['2026-04-01', 95, 'Bagikan Media Sosial']
            ]
        }
    ]
};
Edit ECharts in VPasCode



Edit ECharts di VPasCode

 

Praktik Terbaik Strategis

  • Format Tuple Data dengan Benar: Setiap entri dalam data array harus mengikuti urutan tepat [tanggal, nilai, namaKategori] agar ECharts dapat memotong dan mengumpulkan aliran berkelanjutan dengan benar.
  • Batasi Penyebaran Kategori: Pertahankan jumlah kategori yang berbeda antara 3 hingga 7. Terlalu banyak aliran membuat setiap pita menjadi sempit dan sulit dilacak di titik-titik waktu.
  • Manfaatkan singleAxis Penyesuaian Ukuran: Sesuaikan atas dan bawah pada singleAxis properti untuk mengontrol padding vertikal dan mencegah label aliran luar dari terpotong di tepi wadah.
Scroll to Top