漏斗图 funnel
流程逐层转化:从上到下逐层收窄,每层宽度即该环节数值。注册转化、成交流程、招聘漏斗的标准表达。
何时使用
- 有明确的流程顺序(访问 → 注册 → 激活 → 付费);
- 关心相邻环节的转化效率,哪一层"漏"得最厉害;
- 无顺序关系的占比对比不该用漏斗,改用环形图。
示例
专属数据字段 funnelData({ label, value } 数组),按数组顺序自上而下排列。
校招招聘漏斗
HR 的年度复盘图:从简历到 Offer 每一层的「漏损率」直接暴露招聘瓶颈在筛简历还是在终面。
极差悬殊时压缩尾段
同一份校招数据,传 funnelMinRatio 把尾层最小宽度抬起来:宽度不再是严格等比(数值与占比仍逐层标注),换来的是尾部两层能看清——数据量级相差两个数量级时按需取舍。
线索到回款
销售运营的结算口径:市场线索一路走到财务回款,用漏斗对齐市场、销售、财务三个团队的共同语言——每层转化率就是团队的 KPI。
配置要点
- 段色按层序同一色相递浅(首层品牌色 → 末层最浅):漏斗讲的是一条流程的逐层收窄, 不是并列类目;某层要定色写
funnelData[].color,该层即不再参与递浅; - 宽度即数值,末层下宽等于自身宽度——漏斗底部收成平边而不是针尖;极差悬殊 (4860 → 212 这种)时尾层必然很窄,这是数据的真实形态,要让尾层更可读就传
funnelMinRatio(0–0.5,0 = 严格等比)压缩尾段; - 段内两行标签(名称 + 数值占比)在梯形与层高放得下时自动内嵌,文字色按段底色取 对比度更高的一方;放不下自动转右侧引线标签,纵向 36px 最小步进防重叠;
- 标签随进度平滑淡入,形状展开带缓动收尾;悬浮层片同色加深,不位移;
funnelData按流程顺序排列,漏斗形状自动生成;pyramid: true反转成金字塔;- 悬浮显示每层数值,配合图例交互;
- 相邻层差值即"流失",需要更强对比时可两条漏斗并排放。