Cara menggunakan gambar rajah Sankey untuk menunjukkan aliran data dalam ECharts

Cara menggunakan gambar rajah Sankey untuk memaparkan aliran data dalam ECharts

Pengenalan:
Penggambaran data ialah bahagian penting dalam analisis data, yang boleh memaparkan data kompleks secara visual melalui carta dan kaedah lain. ECharts ialah perpustakaan visualisasi data yang berkuasa yang menyokong pelbagai jenis carta Antaranya, Sankey Diagram boleh memaparkan hubungan aliran data dengan sangat intuitif. Artikel ini akan memperkenalkan cara menggunakan gambar rajah Sankey untuk memaparkan aliran data dalam ECharts dan memberikan contoh kod khusus.

1. Memperkenalkan perpustakaan ECharts
   Pertama, kita perlu memperkenalkan perpustakaan ECharts. Ia boleh diimport melalui CDN, atau perpustakaan ECharts boleh dimuat turun secara tempatan dan diimport. Contoh berikut menggunakan kaedah CDN sebagai contoh:

   <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>

2. Buat bekas
   Buat bekas div untuk memaparkan gambar rajah Sankey:

   <div id="sankeyChart" style="width: 800px; height: 600px;"></div>

3. Sediakan data
   Sediakan data untuk paparan, format data perlu mematuhi keperluan peta ECharts Sankey Base. Berikut ialah sampel data:

   var data = {
    nodes: [
        {name: '节点1'},
        {name: '节点2'},
        {name: '节点3'},
        {name: '节点4'}
    ],
    links: [
        {source: '节点1', target: '节点2', value: 100},
        {source: '节点1', target: '节点3', value: 200},
        {source: '节点2', target: '节点3', value: 150},
        {source: '节点3', target: '节点4', value: 120}
    ]
   };

   Nod mewakili sumber atau destinasi data, dan pautan mewakili hubungan sambungan antara nod dan aliran data. Setiap nod mesti mengandungi atribut nama, pautan mesti mengandungi atribut sumber dan sasaran, dan nilai mewakili saiz trafik data.

4. Initialize carta
   Gunakan kaedah perpustakaan ECharts untuk memulakan carta Sankey:

   var chart = echarts.init(document.getElementById('sankeyChart'));
   
   // 设置图表配置项
   var option = {
    series: [{
        type: 'sankey',
        data: data.nodes,
        links: data.links
    }]
   };
   
   // 渲染图表
   chart.setOption(option);

5. Konfigurasi tersuai
   Mengikut keperluan, kami boleh menyesuaikan gaya dan konfigurasi carta. Berikut ialah beberapa item konfigurasi yang biasa digunakan:
6. petua alat: Konfigurasi kotak gesaan apabila tetikus melayang di atas nod atau talian penyambung.
7. warna: Konfigurasi warna nod dan garis penghubung.
8. label: Konfigurasi nama nod dan paparan data talian sambungan.
9. susun atur: Konfigurasi susun atur carta, anda boleh menukar mod paparan carta dengan melaraskan kedudukan nod.

10. Kemas kini data
    Jika anda perlu mengemas kini data secara dinamik, anda boleh mencapainya melalui kaedah berikut:

    // 更新数据
    data.nodes.push({name: '节点5'});
    data.links.push({source: '节点4', target: '节点5', value: 80});
    
    // 更新图表配置
    option.series[0].data = data.nodes;
    option.series[0].links = data.links;
    
    // 重新渲染图表
    chart.setOption(option);

Ringkasan:
Artikel ini memperkenalkan cara menggunakan rajah Sankey untuk memaparkan aliran data dalam ECharts, dan mencipta bekas dengan memperkenalkan perpustakaan ECharts , sediakan data dan mulakan carta, yang boleh memaparkan hubungan aliran data secara visual. Pada masa yang sama, kami juga mempelajari tentang konfigurasi tersuai dan kaedah kemas kini data. Saya harap ia dapat membantu pembaca menggunakan ECharts dengan lebih baik untuk analisis visualisasi data.

Atas ialah kandungan terperinci Cara menggunakan gambar rajah Sankey untuk menunjukkan aliran data dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!