数据可视化之漏斗图：概述，特点，应用场景，以及效果展示与代码绘制
数据可视化之漏斗图：概述，特点，应用场景，以及效果展示与代码绘制
·
- 学习：知识的初次邂逅
- 复习：知识的温故知新
- 练习：知识的实践应用
目录
一,来历
- 漏斗图（Funnel Chart）的概念源于对业务流程中各阶段转化率的直观展示需求。随着商业分析和销售管理等领域的发展，人们需要一种能够清晰呈现从起始阶段到最终目标阶段，各个环节数据逐渐递减情况的工具。
- 它的灵感可能来源于对实际业务流程中类似漏斗形状的环节流失现象的观察，例如销售过程中潜在客户从最初的线索收集，到最终成交这一系列步骤中，客户数量会逐步减少，这种递减关系很适合用漏斗形状的图表来展示。
二,概述
- 漏斗图是一种外形类似漏斗的可视化图表，通常由多个梯形（或矩形）层叠组成，从上到下依次表示业务流程中的各个阶段。
- 每个阶段的数据量通过梯形（或矩形）的宽度来体现，宽度逐渐变窄象征着数据随着流程推进而逐渐减少。
- 例如，在电商销售流程的漏斗图中，最上面一层可能代表商品曝光量，第二层是商品点击量，第三层是加入购物车的商品数量，第四层是下单量，最底层是成交量，各层的宽度变化直观地展示了每个环节的转化率情况。
三,特点
- 直观展示流程转化率
- 漏斗图最突出的特点是能够非常直观地呈现业务流程中各阶段的转化率。用户通过观察各阶段图形的宽度变化，可以快速了解每个环节的数据衰减情况。
- 例如，在分析营销活动的效果时，通过漏斗图可以清晰地看到从活动曝光、用户参与、线索收集到最终转化为客户的各个阶段的转化率，从而帮助营销人员定位转化率较低的环节，以便进行优化。
- 突出流程重点环节
- 它可以帮助用户聚焦于业务流程中的关键环节。由于漏斗图展示了完整的流程，用户可以很容易地发现哪个环节的数据流失最为严重，这通常是需要重点关注和改进的环节。
- 例如，在销售漏斗图中，如果发现从 “客户报价” 到 “签订合同” 这个环节的流失率很高，那么企业就可以针对这个环节进行深入分析，找出原因，如价格因素、合同条款等，进而采取相应的改进措施。
- 简单易懂的可视化形式
- 漏斗图的形状简单直观，不需要过多的解释，大多数用户都能够快速理解其含义。这种简单易懂的特性使得它在各种业务场景和跨部门沟通中都能够得到广泛应用。无论是销售团队、市场团队还是管理层，都可以通过漏斗图轻松地了解业务流程的整体情况和关键问题。
- 便于对比分析
- 可以用于对比不同业务流程、不同时间周期或不同产品的漏斗情况。例如，企业可以同时展示新产品和旧产品的销售漏斗图，对比两者在各个销售环节的差异，从而评估新产品的市场表现和销售策略的有效性；或者对比不同渠道的营销漏斗，分析各渠道的优劣，为渠道优化提供依据。
四,应用场景
- 销售与营销领域
- 销售流程分析：
- 用于分析销售过程中各个阶段的转化率，如潜在客户开发、销售机会评估、报价、谈判、成交等环节。通过漏斗图，销售团队可以找出销售流程中的瓶颈，针对性地制定销售策略，提高销售效率。例如，发现从 “销售机会评估” 到 “报价” 环节客户流失严重，可能是因为评估标准与客户需求不匹配，从而调整评估策略。
- 营销活动效果评估：
- 在营销活动中，展示从活动曝光、点击、注册、参与到最终转化的全流程转化率。帮助营销人员了解活动的各个环节的效果，优化活动设计和推广渠道。例如，通过对比不同营销活动的漏斗图，发现某个活动在 “注册” 环节转化率较低，可能是注册表单设计过于复杂，需要简化表单。
- 销售流程分析：
- 客户关系管理（CRM）
- 客户生命周期分析：
- 以客户生命周期的各个阶段（如潜在客户、新客户、活跃客户、沉睡客户、流失客户）为漏斗的各个层级，展示客户在不同阶段的数量变化和转化率。这有助于企业了解客户的动态变化，制定客户留存和激活策略。例如，如果发现从 “活跃客户” 到 “沉睡客户” 的转化率过高，企业可以及时采取措施，如推出个性化的营销活动来唤醒沉睡客户。
- 客户生命周期分析：
- 电商运营
- 购物流程优化：
- 展示电商购物流程中各个环节的转化率，如商品浏览、加入购物车、下单、支付等。通过分析漏斗图，电商运营者可以优化购物流程，减少用户在购物过程中的流失。例如，发现从 “加入购物车” 到 “下单” 环节转化率较低，可能是购物车结算页面设计不合理或者运费设置过高，需要进行相应的优化。
- 购物流程优化：
五,代码绘制与效果展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<title>漏斗图</title>
<script src="../echarts.js"></script>
<!-- 漏斗图就是金字塔图-->
<!-- 写一个马斯洛需求层次理论
自我实现,尊重需要,社会需要,安全需要,生理需要-->
</head>
<body>
<div id="rootdoudou" style="width: 600px;height: 500px;"></div>
<script>
var mychartdou = echarts.init(document.getElementById('rootdoudou'))
var optiondou = {
title: {
},
tooltip: {
trigger:"item",
},
series: {
name: "马斯洛需求论",
type: "funnel", //漏斗图的类目
width: "50%", //设置图表大小
sort: "ascending", //默认是漏斗形状 设置这个可以让他成为金字塔样式
label: {
formatter: (data) => { //回调函数 拿到每一个函数的值 用来设置文本内容
return data.data.name + data.data.num //修改name属性
},
fontsize: '16px',
color:"red"
},
data: [ //参数 第一个参数用于确定摆放顺序 第二个参数用于文本描述 第三个参数用于
{value: 3, name: "尊重需求", num: 900},
{value: 2, name: "社会需求", num: 1000},
{value: 4, name: "安全需求", num: 1100},
{value: 5, name: "生理需求", num: 1200},
{value: 1, name: "自我实现", num: 10},
],
labelLine: { //修改文本线条的样式
length: 40, //线条的长度
lineStyle: {
width: 2, //线条的宽度
type: "solid" //线条的类型
}
},
itemStyle: { //图形的样式
color: function (params) { //设置颜色属性 用回调函数的形式
var colorList = [ //可以自定义设置颜色 设置渐变的颜色
//当然颜色可以随便修改 最好是设置 rgba 然后0.1到0.5
{colorStops: [{ //第一个颜色样式
offset: 0, color: 'rgba(255,0,0,0.1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(255,0,0,1)' // 100% 处的颜色
}],
},
{colorStops: [{ //第二个颜色样式
offset: 0, color: 'rgba(0,255,255,0.1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0,255,255,1)' // 100% 处的颜色
}],
},
{colorStops: [{//第3个颜色样式
offset: 0, color: 'rgba(0,0,255,0.1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0,0,255,1)' // 100% 处的颜色
}],
},
{colorStops: [{//第4个颜色样式
offset: 0, color: '#6EE7FA' // 0% 处的颜色
}, {
offset: 1, color: '#3B88F5' // 100% 处的颜色
}],
},
{colorStops: [{//第5个颜色样式
offset: 0, color: '#6EE7FA' // 0% 处的颜色
}, {
offset: 1, color: '#3B88F5' // 100% 处的颜色
}],
},
]
return colorList[params.dataIndex];
}
},
emphasis:{//鼠标滑动过去
label:{ //鼠标滑动过去 让他变成
fontSize:20
}
},
},
};
mychartdou.setOption(optiondou)
</script>
</body>
</html>
- 学习：知识的初次邂逅
- 复习：知识的温故知新
- 练习：知识的实践应用
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
19
0- 0
已为社区贡献7条内容
所有评论(0)