在追踪连续步骤或转化流程中的逐步流失时，漏斗图是标准的视觉工具。通过将数值以堆叠的梯形块形式展示，并在各阶段逐渐变窄或变宽，漏斗图使用户能够快速识别转化瓶颈、流失率和流程效率一目了然——例如销售管道阶段、电子商务结账流程或潜在客户生成漏斗。
漏斗图的工作原理
在 Apache ECharts 中，漏斗图通过使用type: 'funnel'来渲染。每个数据对象包含一个name和一个数值型value。引擎会自动将数据按从大到小（或反之）排序，并根据系列中的最大值来缩放每个梯形的宽度。
1. 基础设置
要构建一个基本的漏斗图，请在系列数据数组中提供类别阶段，并设置type: 'funnel':
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center',
data: ['咨询', '提案', '报价', '谈判', '成交']
},
series: [
{
name: '销售漏斗',
type: 'funnel',
left: '10%',
top: '18%',
bottom: '10%',
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
data: [
{ value: 100, name: '咨询' },
{ value: 80, name: '提案' },
{ value: 60, name: '报价' },
{ value: 40, name: '谈判' },
{ value: 20, name: '成交' }
]
}
]
};
高级结构技巧
漏斗图可以通过金字塔布局、自定义阶段对齐方式或双漏斗叠加来定制，以比较不同的转化渠道。
1. 倒金字塔布局与自定义对齐
将sort: 'ascending'改为创建倒金字塔，或调整funnelAlign以将阶段对齐到左侧或右侧边缘：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '转化漏斗',
type: 'funnel',
left: '15%',
top: '18%',
bottom: '10%',
width: '70%',
sort: 'ascending', // 将最小阶段显示在顶部，最大阶段显示在底部
funnelAlign: 'center',
label: {
show: true,
position: 'right'
},
data: [
{ value: 20, name: '阶段 1：认知' },
{ value: 40, name: '阶段 2：兴趣' },
{ value: 60, name: '阶段 3：决策' },
{ value: 80, name: '阶段 4：行动' }
]
}
]
};
微调布局与阶段样式
添加间距、圆角边框和自定义标签格式化器，可在转化阶段之间创建清晰的间距。
1. 自定义阶段间距与百分比标签
控制间距梯形之间的间距，并使用自定义标签格式化器来突出显示各阶段之间的百分比留存率：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} 用户'
},
series: [
{
name: '用户引导',
type: 'funnel',
left: '10%',
top: '10%',
bottom: '10%',
width: '80%',
gap: 6, // 在各阶段之间添加清晰的分隔
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
borderRadius: 4
},
label: {
show: true,
position: 'inside',
formatter: '{b}n{c} ({d}%)',
color: '#fff',
fontSize: 12
},
data: [
{ value: 5000, name: '应用访问' },
{ value: 3400, name: '注册' },
{ value: 2100, name: '资料设置' },
{ value: 1200, name: '首次操作' },
{ value: 800, name: '已订阅' }
]
}
]
};
战略最佳实践
- 保持阶段顺序：漏斗图依赖于顺序流程逻辑。请确保数据项代表实际的逐步流程，而非无关的类别。
- 使用
间距以明确视觉阶段边界：设置较小的间距（例如 4px 到 6px）的间距可防止相邻颜色融合成一个整体块。 - 显示阶段百分比：将原始数值与各阶段百分比结合（例如使用
{d}%在标签格式化器中）以便用户能够立即评估每个里程碑的流失率。