Carta corong ECharts (berbilang peringkat): cara menunjukkan aliran data dan kadar penukaran

Carta corong ECharts (berbilang peringkat): Bagaimana untuk memaparkan aliran data dan kadar penukaran, contoh kod khusus diperlukan

Pengenalan:
Dengan pembangunan Internet dan analisis data, analisis dan paparan aliran data dan kadar penukaran telah menjadi semakin penting. ECharts ialah perpustakaan visualisasi data berasaskan JavaScript yang menyediakan pelbagai jenis carta untuk digunakan oleh pembangun. Antaranya, carta corong ialah salah satu jenis carta biasa yang digunakan untuk memaparkan aliran data dan kadar penukaran. Artikel ini akan memperkenalkan cara menggunakan ECharts untuk mencipta carta corong berbilang peringkat dan memberikan contoh kod khusus.

1. Apakah carta corong berbilang peringkat Carta corong berbilang peringkat ialah lanjutan daripada carta corong tradisional dan boleh memaparkan proses data dan kadar penukaran dalam berbilang peringkat. Corong pada setiap peringkat mewakili proses dan terdapat hubungan kadar penukaran antara dua corong bersebelahan. Carta corong berbilang peringkat boleh memaparkan arah aliran dan kesan transformasi data dengan lebih intuitif, membantu kami memahami dengan lebih baik proses transformasi data.

1. Memasang ECharts

   Pertama, kita perlu memasang perpustakaan ECharts dalam projek. Anda boleh menggunakan npm untuk memasang, arahannya adalah seperti berikut:
   

   npm install echarts --save

   Salin selepas log masuk

2. Perkenalkan perpustakaan ECharts

   Perkenalkan perpustakaan ECharts ke dalam halaman yang anda perlu gunakan, anda boleh memperkenalkannya terus ke halaman html:
   

   <script src="echarts.min.js"></script>

   Salin selepas log masuk

3. Sediakan bekas

   Sediakan bekas dalam halaman html , digunakan untuk memaparkan carta corong berbilang peringkat. Contohnya:
   

   <div id="chartContainer1" style="width: 600px;height: 400px;"></div>

   Salin selepas log masuk

Menulis kod JavaScript
4. Dalam kod JavaScript, kita perlu mendapatkan bekas yang disediakan terlebih dahulu dan mencipta contoh ECharts. Kemudian, konfigurasikan parameter berkaitan carta corong berbilang peringkat, termasuk data, gaya, kadar penukaran dan maklumat lain. Akhir sekali, hantar parameter yang dikonfigurasikan ke dalam contoh dan jadikan carta.
   

// 获取容器
var container = document.getElementById('chartContainer1');
// 创建ECharts实例
var myChart = echarts.init(container);
// 配置参数
var option = {
    title: {
        text: '多级漏斗图',
        subtext: '数据流程和转化率'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show: true,
        feature: {
            magicType: {
                type: ['funnel', 'pyramid']
            },
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['阶段1', '阶段2', '阶段3']
    },
    calculable: true,
    series: [
        {
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            width: '80%',
            label: {
                normal: {
                    formatter: '{b} : {c}%'
                }
            },
            data: [
                {value: 60, name: '阶段1'},
                {value: 40, name: '阶段2'},
                {value: 20, name: '阶段3'}
            ]
        }
    ]
};
// 渲染图表
myChart.setOption(option);

Paparan kesan berjalan
5. Simpan kod di atas dan buka fail html dalam penyemak imbas untuk melihat carta corong berbilang peringkat yang dijana.
   

ECharts menyediakan pelbagai jenis carta untuk digunakan oleh pembangun Dengan mengkonfigurasi parameter yang berkaitan, pelbagai carta visualisasi data boleh dihasilkan. Carta corong berbilang peringkat boleh memaparkan secara visual proses data dan kadar penukaran, membantu kami memahami dengan lebih baik proses penukaran data. Melalui langkah dan contoh kod yang diperkenalkan dalam artikel ini, kami boleh membuat carta corong berbilang peringkat dengan cepat. Saya harap artikel ini dapat membantu pembelajaran dan amalan semua orang dalam visualisasi data.

Atas ialah kandungan terperinci Carta corong ECharts (berbilang peringkat): cara menunjukkan aliran data dan kadar penukaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!