当前位置：首页 > article >正文

ECharts漏斗图的使用详解

article 2025/2/24 2:37:40

漏斗图 (Funnel Chart) 是一种常用的图表类型，尤其适用于展示数据流转的过程或转化率（如销售漏斗、营销活动转化等）。ECharts 提供了丰富的漏斗图配置选项，允许我们清晰地展现各个阶段之间的转化情况。

1. 漏斗图的基本概念

漏斗图通常由多个层级的矩形条组成，每一层代表数据流程的一个阶段，且条的宽度通常表示数量的多少。在漏斗的顶部，宽度最大，表示进入的数量；随着数据的逐层流转，宽度逐渐减小，表示流失的数量或比例。

2. 漏斗图的基本使用

ECharts 提供了内置的漏斗图支持，只需配置 type: 'funnel' 即可轻松创建漏斗图。下面是一个基本示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 漏斗图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
    <style>
        #chart {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="chart"></div>

    <script>
        var chart = echarts.init(document.getElementById('chart'));

        var option = {
            title: {
                text: '销售漏斗示例',
                subtext: '从潜在客户到成交客户的转化过程',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['访问', '咨询', '订单', '支付']
            },
            series: [
                {
                    name: '销售过程',
                    type: 'funnel',
                    left: '10%',
                    width: '80%',
                    data: [
                        { value: 1000, name: '访问' },
                        { value: 800, name: '咨询' },
                        { value: 600, name: '订单' },
                        { value: 400, name: '支付' }
                    ]
                }
            ]
        };

        chart.setOption(option);
    </script>
</body>
</html>

3. 详细解析配置项

title：图表的标题配置
- text: 主标题内容，这里是“销售漏斗示例”。
- subtext: 副标题内容，描述了漏斗的含义或数据背景。
- left: 控制标题的位置，center表示居中。
tooltip：提示框配置
- trigger: 触发方式，item表示当鼠标悬浮在漏斗的各个阶段上时会触发提示框。
- formatter: 自定义提示框显示的格式，{b}是系列项的名称（例如：访问、咨询等），{c}是该阶段的值，{d}是该阶段的转化率百分比。
legend：图例配置
- orient: 图例的排列方式，vertical表示竖直排列，horizontal表示水平排列。
- left: 图例的位置，left表示左对齐，center表示居中。
- data: 图例的名称数组，这里包含漏斗图的各个阶段，依次是“访问”，“咨询”，“订单”，“支付”。
series：系列数据配置，漏斗图的主要配置项
- name: 系列的名称，显示在图例中，描述数据的内容。
- type: 图表类型，设置为 funnel 表示漏斗图。
- left: 控制漏斗图的起始位置，10% 表示距离左边的10%。
- width: 控制漏斗图的宽度，80% 表示占容器宽度的80%。
- data: 数据项，展示各个阶段的名称和值。在这里，表示从“访问”到“支付”的转化数据。

4. 使用场景：销售漏斗分析

假设你是一名销售经理，你需要展示某个产品的销售过程，具体包括潜在客户到成交客户的转化过程。在这个场景中，可以使用漏斗图来反映不同销售阶段的转化情况。

场景说明：

访问：网站或广告的访问量。
咨询：潜在客户进行咨询或留有联系方式的数量。
订单：客户下单的数量。
支付：最终完成支付的客户数量。

通过漏斗图，可以非常清晰地看到各阶段的数量变化，以及从每个阶段流失的客户数量。

5. 高级功能：动态漏斗图

ECharts 支持动态数据更新，允许图表在不重新加载页面的情况下根据实时数据变化进行更新。以下是一个动态更新漏斗图的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态销售漏斗</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
    <style>
        #chart {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="chart"></div>

    <script>
        var chart = echarts.init(document.getElementById('chart'));

        var option = {
            title: {
                text: '实时销售漏斗',
                subtext: '数据实时更新示例',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
            },
            series: [
                {
                    name: '销售过程',
                    type: 'funnel',
                    left: '10%',
                    width: '80%',
                    data: [
                        { value: 1000, name: '访问' },
                        { value: 800, name: '咨询' },
                        { value: 600, name: '订单' },
                        { value: 400, name: '支付' }
                    ]
                }
            ]
        };

        chart.setOption(option);

        // 模拟数据更新
        setInterval(function() {
            var newData = [
                { value: Math.floor(Math.random() * 1200), name: '访问' },
                { value: Math.floor(Math.random() * 1000), name: '咨询' },
                { value: Math.floor(Math.random() * 800), name: '订单' },
                { value: Math.floor(Math.random() * 600), name: '支付' }
            ];

            chart.setOption({
                series: [{
                    data: newData
                }]
            });
        }, 3000);  // 每3秒更新一次数据
    </script>
</body>
</html>