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

ECharts漏斗圖：如何展示資料流程

WBOY

發布： 2023-12-18 14:37:06

原創

1007 人瀏覽過

ECharts漏斗圖：如何展示資料流程

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

引言

隨著大數據時代的到來，數據分析和數據視覺化變得越來越重要。在數據分析的過程中，了解數據的流程和轉換是非常關鍵的。而ECharts是一款強大的資料視覺化函式庫，可以幫助我們直觀地展示資料流程。本文將重點放在ECharts中的漏斗圖（Funnel Chart），並具體示範如何利用ECharts來展示資料流程。

漏斗圖的特徵

漏斗圖是一種特殊的長條圖，以漏斗形狀的圖形來展示資料的流程和轉換情況。漏斗圖的特性如下：

適用於展示階段性的資料流程，如銷售管道中的轉換流程、網站存取日誌中的使用者行為等。
數據從上到下逐漸減少，形成漏斗狀，可直觀反映轉化率的變化。
可以透過不同顏色的漏斗區塊來表示不同的階段，提高可讀性。

使用ECharts繪製漏斗圖

下面我們用ECharts來繪製一個簡單的漏斗圖範例。假設我們有一個銷售通路的數據，有總訪問量、增加購物車量、成功購買量這三個步驟。

首先，我們需要在HTML中引入ECharts的庫文件，並建立一個具備一定寬度和高度的DIV容器用於顯示圖表。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts漏斗图示例</title>
    <!-- 引入ECharts库文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
    <!-- 创建一个具备一定宽度和高度的DIV容器 -->
    <div id="funnelChart" style="width: 600px; height: 400px;"></div>
</body>
</html>

登入後複製

接下來，在JavaScript中使用ECharts的API來繪製漏斗圖。

// 使用ECharts的API绘制漏斗图
var chartDom = document.getElementById('funnelChart');
var myChart = echarts.init(chartDom);

var option;

// 指定漏斗图的配置项和数据
option = {
    title: {
        text: '销售渠道转化漏斗图',
        subtext: '示例数据'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}"
    },
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['总访问量', '添加购物车量', '成功购买量']
    },
    series: [
        {
            name: '转化率',
            type: 'funnel',
            left: '10%',
            top: 60,
            // 指定各个阶段的具体数值
            data: [
                {value: 1000, name: '总访问量'},
                {value: 800, name: '添加购物车量'},
                {value: 500, name: '成功购买量'}
            ],
            // 设置漏斗图的属性
            itemStyle: {
                borderWidth: 1,
                borderColor: '#fff'
            },
            // 指定漏斗图的标签样式
            label: {
                position: 'inside',
                formatter: '{c}'
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表
option && myChart.setOption(option);

登入後複製

在以上程式碼中，我們使用ECharts的API來建立了一個漏斗圖，指定了各個階段的數值和對應的標籤。透過設定漏斗圖的屬性和標籤樣式，我們可以獲得漏斗圖的更好的視覺化效果。最後，使用setOption方法將配置項目和資料套用到圖表上，實現圖表的展示。