项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

漏斗图 funnel ​

流程逐层转化:从上到下逐层收窄,每层宽度即该环节数值。注册转化、成交流程、招聘漏斗的标准表达。

何时使用 ​

  • 有明确的流程顺序(访问 → 注册 → 激活 → 付费);
  • 关心相邻环节的转化效率,哪一层"漏"得最厉害;
  • 无顺序关系的占比对比不该用漏斗,改用环形图。

示例 ​

专属数据字段 funnelData({ label, value } 数组),按数组顺序自上而下排列。

校招招聘漏斗 ​

HR 的年度复盘图:从简历到 Offer 每一层的「漏损率」直接暴露招聘瓶颈在筛简历还是在终面。

极差悬殊时压缩尾段 ​

同一份校招数据,传 funnelMinRatio 把尾层最小宽度抬起来:宽度不再是严格等比(数值与占比仍逐层标注),换来的是尾部两层能看清——数据量级相差两个数量级时按需取舍。

线索到回款 ​

销售运营的结算口径:市场线索一路走到财务回款,用漏斗对齐市场、销售、财务三个团队的共同语言——每层转化率就是团队的 KPI。

配置要点 ​

  • 段色按层序同一色相递浅(首层品牌色 → 末层最浅):漏斗讲的是一条流程的逐层收窄, 不是并列类目;某层要定色写 funnelData[].color,该层即不再参与递浅;
  • 宽度即数值,末层下宽等于自身宽度——漏斗底部收成平边而不是针尖;极差悬殊 (4860 → 212 这种)时尾层必然很窄,这是数据的真实形态,要让尾层更可读就传 funnelMinRatio(0–0.5,0 = 严格等比)压缩尾段;
  • 段内两行标签(名称 + 数值占比)在梯形与层高放得下时自动内嵌,文字色按段底色取 对比度更高的一方;放不下自动转右侧引线标签,纵向 36px 最小步进防重叠;
  • 标签随进度平滑淡入,形状展开带缓动收尾;悬浮层片同色加深,不位移;
  • funnelData 按流程顺序排列,漏斗形状自动生成;pyramid: true 反转成金字塔;
  • 悬浮显示每层数值,配合图例交互;
  • 相邻层差值即"流失",需要更强对比时可两条漏斗并排放。

相关 ​