Cara menggunakan Carta Sankey Rose untuk memaparkan aliran data dan perubahan perkadaran dalam ECharts-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Cara menggunakan Carta Sankey Rose untuk memaparkan aliran data dan perubahan perkadaran dalam ECharts

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 18, 2023 pm 01:47 PM

echartsaliran dataIlustrasi Sankey Rose

Cara menggunakan Carta Sankey Rose untuk memaparkan aliran data dan perubahan perkadaran dalam ECharts

ECharts ialah perpustakaan paparan data visual yang boleh menjadikan data lebih jelas dan intuitif. Antaranya, carta Sankey Rose boleh memberikan bantuan besar dalam menunjukkan arah aliran data dan perubahan perkadaran. Artikel ini akan memperkenalkan cara menggunakan Carta Sankey Rose dalam ECharts, sambil memberikan contoh kod khusus.

Pengenalan

Sankey Rose Carta ialah carta mawar khas yang memaparkan data melalui gelang sepusat bulatan dalam dan luar serta panjang sektor Ia mempunyai struktur hierarki yang jelas dan sesuai untuk memaparkan aliran data berbilang dimensi. Dalam ECharts, Carta Mawar Sankey boleh digunakan untuk menunjukkan perkadaran antara dimensi berbeza dan perhubungan antara perkadaran dari semasa ke semasa. Selain itu, untuk situasi di mana jumlah data adalah besar dan terdapat terlalu banyak dimensi, ECharts turut menyokong paparan tatal dan pratonton lakaran kecil untuk memudahkan interaksi visual untuk pengguna.

Pelaksanaan

Yang berikut akan memperkenalkan cara menggunakan carta mawar Sankey dalam ECharts untuk memaparkan arah aliran data dan perubahan perkadaran, termasuk empat langkah pemula, tetapan data, gaya tetapan dan kesan interaktif.

2.1 Inisialisasi

Inisialisasi melibatkan memperkenalkan fail js ECharts dan mencipta bekas kanvas baharu. Kod khusus adalah seperti berikut:

<!-- 引入ECharts插件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

<!-- 定义画布容器 -->
<div id="sankey-rose" style="width: 800px;height: 600px;"></div>

2.2 Menetapkan data

Menetapkan data melibatkan penentuan nod dan tepi. Nod merujuk kepada atribut khusus dalam data Contohnya, dalam gambar rajah Sankey Rose bagi data jualan, nod boleh menjadi jenis produk atau kawasan jualan merujuk kepada sambungan dan arah aliran antara nod yang berbeza, yang mewakili hubungan logik data. Kod khusus adalah seperti berikut:

// 设置节点
var data = {
    nodes: [
        {name: 'A'},
        {name: 'B'},
        {name: 'C'},
        {name: 'D'},
        {name: 'E'}
    ],
    // 设置边
    links: [
        {
            source: 'A',
            target: 'B',
            value: 10
        },
        {
            source: 'B',
            target: 'C',
            value: 20
        },
        {
            source: 'C',
            target: 'D',
            value: 30
        },
        {
            source: 'D',
            target: 'E',
            value: 40
        }
    ]
};

Antaranya, nod mengandungi semua nod, setiap nod ialah objek, dan name mewakili nama nod (jenis rentetan) . pautan mengandungi semua tepi, setiap tepi ialah objek, source mewakili nama nod sumber, sasaran mewakili nama nod sasaran, value mewakili nilai data (jenis angka). nodes包含了所有的节点，每个节点是一个对象，name表示节点的名称（字符串类型）。links包含了所有的边，每个边是一个对象，source表示源节点的名称，target表示目标节点的名称，value表示数据的值（数值类型）。

2.3 设置样式

样式是指桑基玫瑰图的整体风格和节点之间的关联。在ECharts中，样式可以通过配置series来实现。具体代码如下：

// 设置样式
var option = {
    series: [{
        type: 'sankey',
        data: data.nodes,
        links: data.links,
        layoutIterations: 32,
        lineStyle: {
            color: 'source',
            curveness: 0.5
        },
        label: {
            color: '#000',
            formatter: '{b}'
        }
    }]
};

其中，type表示图表类型，data和links分别对应前面定义的nodes和links。layoutIterations表示布局迭代次数，值越大表示布局越密集，通常设为32即可。lineStyle表示边的样式，color表示边的颜色，这里设为使用源节点的颜色；curveness表示边的弧度，设为0.5表示为曲线。label表示节点标签的样式，formatter表示节点标签的显示内容，这里设为使用节点的名称。

2.4 交互效果

交互效果指用户在与桑基玫瑰图进行互动时触发的效果和操作。在ECharts中，交互效果可以通过配置toolbox来实现。具体代码如下：

// 设置交互效果
option.toolbox = {
    feature: {
        dataZoom: {},
        restore: {},
        saveAsImage: {}
    }
};

其中，feature是一个包含多种交互型工具的对象。dataZoom表示缩放工具，restore表示还原工具，saveAsImage

2.3 Gaya set

Gaya merujuk kepada gaya keseluruhan gambar rajah Sankey Rose dan perkaitan antara nod. Dalam ECharts, gaya boleh dilaksanakan dengan mengkonfigurasi siri. Kod khusus adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>桑基玫瑰图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="sankey-rose" style="width: 800px;height: 600px;"></div>
    <script>
        // 初始化
        var myChart = echarts.init(document.getElementById('sankey-rose'));

        // 设置数据
        var data = {
            nodes: [
                {name: '华东地区'},
                {name: '华南地区'},
                {name: '华北地区'},
                {name: '东北地区'},
                {name: '中西部地区'},
                {name: '电子产品'},
                {name: '家用电器'},
                {name: '食品饮料'},
                {name: '化妆品'},
                {name: '家居生活'}
            ],
            links: [
                {
                    source: '华东地区',
                    target: '电子产品',
                    value: 300
                },
                {
                    source: '华东地区',
                    target: '家用电器',
                    value: 200
                },
                {
                    source: '华东地区',
                    target: '食品饮料',
                    value: 100
                },
                {
                    source: '华南地区',
                    target: '化妆品',
                    value: 400
                },
                {
                    source: '华南地区',
                    target: '家居生活',
                    value: 500
                },
                {
                    source: '华北地区',
                    target: '电子产品',
                    value: 200
                },
                {
                    source: '华北地区',
                    target: '家用电器',
                    value: 150
                },
                {
                    source: '东北地区',
                    target: '家用电器',
                    value: 100
                },
                {
                    source: '东北地区',
                    target: '化妆品',
                    value: 50
                },
                {
                    source: '中西部地区',
                    target: '电子产品',
                    value: 120
                },
                {
                    source: '中西部地区',
                    target: '食品饮料',
                    value: 80
                },
                {
                    source: '中西部地区',
                    target: '家居生活',
                    value: 200
                }
            ]
        };

        // 设置样式
        var option = {
            series: [{
                type: 'sankey',
                data: data.nodes,
                links: data.links,
                layoutIterations: 32,
                lineStyle: {
                    color: 'source',
                    curveness: 0.5
                },
                label: {
                    color: '#000',
                    formatter: '{b}'
                }
            }]
        };

        // 设置交互效果
        option.toolbox = {
            feature: {
                dataZoom: {},
                restore: {},
                saveAsImage: {}
            }
        };

        // 渲染图表
        myChart.setOption(option);
    </script>
</body>
</html>

Antaranya, type mewakili jenis carta, dan data dan links masing-masing sepadan dengan yang ditakrifkan sebelum ini nod dan links. layoutIterations mewakili bilangan lelaran reka letak Semakin besar nilai, semakin padat reka letak itu biasanya ditetapkan kepada 32. lineStyle mewakili gaya tepi, color mewakili warna tepi, di sini ia ditetapkan untuk menggunakan warna nod sumber curveness; > mewakili lengkok tepi, ditetapkan kepada 0.5 diwakili sebagai lengkung. label mewakili gaya label nod, formatter mewakili kandungan paparan label nod, di sini ia ditetapkan untuk menggunakan nama nod.

2.4 Kesan interaktif

Kesan interaktif merujuk kepada kesan dan operasi yang dicetuskan apabila pengguna berinteraksi dengan Carta Sankey Rose. Dalam ECharts, kesan interaktif boleh dicapai dengan mengkonfigurasi toolbox. Kod khusus adalah seperti berikut:

Antaranya, feature ialah objek yang mengandungi pelbagai alatan interaktif. dataZoom mewakili alat zum, restore mewakili alat pemulihan dan saveAsImage mewakili alat simpan. Alat ini boleh membantu pengguna menukar, bertanya dan mengeksport data.

🎜Kod penuh🎜🎜🎜Kod akhir ada di bawah. Berikut ialah contoh data jualan, menggunakan carta mawar Sankey untuk menunjukkan perkadaran jualan bagi jenis barangan yang berbeza di wilayah yang berbeza. 🎜rrreee🎜🎜Kesimpulan🎜🎜🎜Di atas ialah keseluruhan proses cara menggunakan carta mawar Sankey untuk memaparkan arah aliran data dan perubahan perkadaran dalam ECharts, termasuk langkah seperti pemulaan, penetapan data, gaya tetapan dan kesan interaktif. Dalam aplikasi sebenar, ia boleh diubah suai dan dikembangkan mengikut keperluan khusus. Saya harap artikel ini dapat membantu anda menguasai penggunaan gambar rajah mawar Sankey dengan lebih baik. 🎜

Atas ialah kandungan terperinci Cara menggunakan Carta Sankey Rose untuk memaparkan aliran data dan perubahan perkadaran dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

C dan JavaScript: Sambungan dijelaskanApr 23, 2025 am 12:07 AM

C dan JavaScript mencapai interoperabilitas melalui webassembly. 1) Kod C disusun ke dalam modul WebAssembly dan diperkenalkan ke dalam persekitaran JavaScript untuk meningkatkan kuasa pengkomputeran. 2) Dalam pembangunan permainan, C mengendalikan enjin fizik dan rendering grafik, dan JavaScript bertanggungjawab untuk logik permainan dan antara muka pengguna.

Dari laman web ke aplikasi: Aplikasi pelbagai JavaScriptApr 22, 2025 am 12:02 AM

JavaScript digunakan secara meluas di laman web, aplikasi mudah alih, aplikasi desktop dan pengaturcaraan sisi pelayan. 1) Dalam pembangunan laman web, JavaScript mengendalikan DOM bersama -sama dengan HTML dan CSS untuk mencapai kesan dinamik dan menyokong rangka kerja seperti JQuery dan React. 2) Melalui reaktnatif dan ionik, JavaScript digunakan untuk membangunkan aplikasi mudah alih rentas platform. 3) Rangka kerja elektron membolehkan JavaScript membina aplikasi desktop. 4) Node.js membolehkan JavaScript berjalan di sisi pelayan dan menyokong permintaan serentak yang tinggi.

Python vs JavaScript: Gunakan Kes dan Aplikasi MembandingkanApr 21, 2025 am 12:01 AM

Python lebih sesuai untuk sains data dan automasi, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python berfungsi dengan baik dalam sains data dan pembelajaran mesin, menggunakan perpustakaan seperti numpy dan panda untuk pemprosesan data dan pemodelan. 2. Python adalah ringkas dan cekap dalam automasi dan skrip. 3. JavaScript sangat diperlukan dalam pembangunan front-end dan digunakan untuk membina laman web dinamik dan aplikasi satu halaman. 4. JavaScript memainkan peranan dalam pembangunan back-end melalui Node.js dan menyokong pembangunan stack penuh.

Peranan C/C dalam JavaScript Jurubah dan PenyusunApr 20, 2025 am 12:01 AM

C dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.

JavaScript in Action: Contoh dan projek dunia nyataApr 19, 2025 am 12:13 AM

Aplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.

JavaScript dan Web: Fungsi teras dan kes penggunaanApr 18, 2025 am 12:19 AM

Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.

Memahami Enjin JavaScript: Butiran PelaksanaanApr 17, 2025 am 12:05 AM

Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.

Python vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanApr 16, 2025 am 12:12 AM

Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang laluByDDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang laluByDDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang laluByDDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

4 minggu yang laluByDDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

4 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),