Carta Corong ECharts: Cara Menunjukkan Perubahan Corong Data-tutorial js-php.cn

Carta Corong ECharts: Cara Menunjukkan Perubahan Corong Data

WBOY

Lepaskan： 2023-12-18 14:13:42

asal

947 orang telah melayarinya

Carta Corong ECharts: Cara Menunjukkan Perubahan Corong Data

Carta Corong ECharts: Cara memaparkan perubahan corong data memerlukan contoh kod khusus

Pengenalan
Carta corong ialah kaedah visualisasi data yang biasa digunakan yang boleh digunakan untuk memaparkan perubahan proses atau analisis peringkat data. ECharts ialah perpustakaan visualisasi data JavaScript sumber terbuka yang boleh digunakan untuk mencipta pelbagai carta interaktif. Artikel ini akan memperkenalkan cara menggunakan ECharts untuk memaparkan perubahan corong dalam data dan memberikan contoh kod khusus.
Konsep asas carta corong ECharts
Carta corong ialah jenis carta khas yang digunakan untuk mewakili bentuk corong data. Biasanya, lebar bawah carta corong mewakili data permulaan, lebar atas mewakili data akhir dan lebar setiap peringkat di antaranya mewakili data perantaraan. Carta corong boleh memaparkan dengan tepat proses perubahan data, membolehkan penonton memahami pertumbuhan atau penurunan data secara intuitif.
Langkah-langkah menggunakan carta corong ECharts
Mencipta carta corong menggunakan ECharts secara amnya boleh dibahagikan kepada langkah berikut:

3.1 Sediakan data
Pertama, anda perlu menyediakan data yang perlu dipaparkan. Data setiap peringkat hendaklah mengandungi dua atribut iaitu nama peringkat dan nilai peringkat. Sebagai contoh, kita boleh mempunyai data berikut:

var data = [
    { name: '访问', value: 100 },
    { name: '浏览', value: 80 },
    { name: '点击', value: 60 },
    { name: '转化', value: 40 },
    { name: '下单', value: 20 },
    { name: '支付', value: 10 }
];

Salin selepas log masuk

3.2 Buat contoh carta
Seterusnya, anda perlu mencipta tika carta ECharts. Contoh carta corong asas boleh dibuat dengan kod berikut:

var myChart = echarts.init(document.getElementById('chart'));

Salin selepas log masuk

Di sini 'carta' ialah id elemen HTML yang digunakan untuk menampung carta ECharts. 'chart'是一个HTML元素的id，用于容纳ECharts图表。

3.3 配置漏斗图
ECharts提供了丰富的配置选项，可以用来自定义漏斗图的样式。以下是一个基本的漏斗图配置示例：

var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    series: [
        {
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 20
                }
            },
            data: data
        }
    ]
};

Salin selepas log masuk

在上述配置中，我们可以设置tooltip的内容和格式，设置漏斗图的位置和大小，设置数据的排序方式和标签显示方式等。

3.4 渲染图表
最后，将配置应用到图表实例中，并使用setOption

3.3 Mengkonfigurasi Carta Corong

```
myChart.setOption(option);
```
Salin selepas log masuk
Dalam konfigurasi di atas, kita boleh menetapkan kandungan dan format petua alat, menetapkan kedudukan dan saiz carta corong, menetapkan kaedah pengisihan data dan kaedah paparan label, dsb.

3.4 Carta Render

Akhir sekali, gunakan konfigurasi pada contoh carta dan gunakan kaedah setOption untuk membuat:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 漏斗图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        var data = [
            { name: '访问', value: 100 },
            { name: '浏览', value: 80 },
            { name: '点击', value: 60 },
            { name: '转化', value: 40 },
            { name: '下单', value: 20 },
            { name: '支付', value: 10 }
        ];
        
        var myChart = echarts.init(document.getElementById('chart'));
        
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: '漏斗图',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20
                        }
                    },
                    data: data
                }
            ]
        };
        
        myChart.setOption(option);
    </script>
</body>
</html>

Salin selepas log masuk

Contoh kod penuh
Berikut ialah kod lengkap untuk mencipta carta corong menggunakan Contoh ECharts:

rrreee🎜Dengan kod di atas, anda boleh memaparkan carta corong dalam penyemak imbas, dan seterusnya menganalisis dan meneroka data melalui fungsi interaktif yang disediakan oleh ECharts. 🎜🎜🎜Ringkasan🎜Artikel ini memperkenalkan konsep asas dan langkah penggunaan carta corong ECharts, dan menyediakan contoh kod khusus. Saya harap artikel ini dapat membantu pembaca dan memberi mereka pemahaman yang lebih mendalam tentang cara menggunakan ECharts untuk memaparkan perubahan corong dalam data. Sudah tentu, ECharts mempunyai banyak fungsi berkuasa lain yang boleh dipelajari dan diterokai oleh pembaca. 🎜🎜

Atas ialah kandungan terperinci Carta Corong ECharts: Cara Menunjukkan Perubahan Corong Data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!