---
url: /chart/funnel.md
---
# 漏斗图 funnel

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

## 何时使用

* 有明确的**流程顺序**（访问 → 注册 → 激活 → 付费）；
* 关心相邻环节的转化效率，哪一层"漏"得最厉害；
* 无顺序关系的占比对比不该用漏斗，改用[环形图](/chart/doughnut)。

## 示例

专属数据字段 `funnelData`（`{ label, value }` 数组），按数组顺序自上而下排列。

### 校招招聘漏斗

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

### 极差悬殊时压缩尾段

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

### 线索到回款

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

## 配置要点

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

## 相关

* [环形图](/chart/doughnut) · [柱状图](/chart/bar)
* [API 参考](/chart/api)