ECharts漏斗圖：如何展示資料漏斗變化-js教程-PHP中文網

ECharts漏斗圖：如何展示資料漏斗變化

WBOY

發布： 2023-12-18 14:13:42

原創

909 人瀏覽過

ECharts漏斗圖：如何展示資料漏斗變化

ECharts漏斗圖：如何展示資料漏斗變化，需要具體程式碼範例

引言
漏斗圖是一種常用的資料視覺化方式，可以用於展示資料的流程變化或階段分析。 ECharts是一個開源的JavaScript資料視覺化函式庫，可以用來建立各種互動式的圖表。本文將介紹如何使用ECharts來展示資料的漏斗變化，並提供具體的程式碼範例。
ECharts漏斗圖基本概念
漏斗圖是一種特殊的圖表類型，用於表示資料的漏斗形狀。通常情況下，漏斗圖的底部寬度表示起始數據，頂部寬度表示最終數據，中間各階段的寬度表示中間數據。漏斗圖可以精確地展示數據的流程變化，讓觀眾直觀地理解數據的成長或減少情況。
ECharts漏斗圖的使用步驟
使用ECharts建立漏斗圖一般可以分為以下幾個步驟：

3.1 準備資料
首先，需要準備好需要展示的數據。每個階段的資料都應該包含兩個屬性，分別是階段的名稱和階段的數值。例如，我們可以有以下的資料：

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

登入後複製

3.2 建立圖表實例
接下來，需要建立一個ECharts圖表實例。可以透過以下的程式碼來建立一個基本的漏斗圖實例：

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

登入後複製

這裡的'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
        }
    ]
};

登入後複製

在上述配置中，我們可以設定tooltip的內容和格式，設定漏斗圖的位置和大小，設定資料的排序方式和標籤顯示方式等。

3.4 渲染圖表
最後，將設定套用到圖表實例中，並使用setOption方法進行渲染：

myChart.setOption(option);

登入後複製

完整程式碼範例
下面是一個完整的使用ECharts創建漏斗圖的程式碼範例：

<!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>

登入後複製

透過上述程式碼，你可以在瀏覽器中展示一個漏斗圖，並可以透過ECharts提供的互動功能對數據進行進一步的分析和探索。