来源：https://ui.docs.xihanfun.com/components/funnel-chart # FunnelChart 漏斗图 `new` 看一个流程里各阶段的保留量与逐级转化率。每个阶段一行，宽度与数值成正比，相邻阶段之间写出转化率。

Headless Styles Vue React Web Components

## 用法一行数据一个阶段、按先后排好：宽度与数值成正比，相邻阶段之间写出相对上一阶段的转化率 ```vue ``` ```html

本月购买流程

``` ## 组件结构加粗的是必需部件。 `data-scope="funnel-chart"`：**`root`** · `caption` · **`viewport`** · **`plot`** · `stage` · `stage-label` · `conversion` · `focus-ring` · `tooltip` · `tooltip-header` · `tooltip-row` · `tooltip-swatch` · `tooltip-value` · `tooltip-name` · `empty` · `summary` · `table-region` · `table` ## 示例 ### 条形 shape="bar" 画成等高的条形：阶段之间要仔细比较宽度时比梯形的斜边好对齐 ```vue ``` ```html

本月购买流程

``` ### 相对第一阶段 conversion="first" 让每个阶段写相对第一阶段的转化率：读者关心从头到尾留下多少 ```vue ``` ```html

本月购买流程

``` ### 靠左对齐 align="start" 让阶段靠起始边对齐，逐级缩短看得更清楚 ```vue ``` ```html

招聘流程

``` ### 金字塔 direction="up" 画成金字塔：第一阶段在最下面，往上逐级收窄；层级之间是包含关系，不写转化率 ```vue ``` ```html

会员等级分布

``` ## 设计指引 ### 何时使用 - 流程有固定的先后，每一步都从上一步里留下一部分：访问 → 注册 → 下单、线索 → 商机 → 成交。 - 读者要找的是「在哪一步流失最多」，以及从头到尾留下多少。 - 金字塔（`direction="up"`）用于层级之间有包含关系、越往上越少的构成：人口年龄段、组织层级。 ### 何时不用 - 阶段之间没有先后，只是几个并列的类目：用[直角坐标图](./cartesian-chart)的横向条形图。 - 要看各部分占整体的比例：用[饼图](./pie-chart)。 - 要看转化随时间的变化：一串漏斗读不出趋势，把每一步的转化率画成折线。 - 只有两个阶段：一个百分比就说清了，用[统计数值](./statistic)。 ### 特性 - 数据是对象数组，按阶段的先后排好，每行一个阶段：`nameField` 指定阶段名所在的字段，`valueField` 指定数值所在的字段。数值为负时报 `chart.negative-share`，字段不存在时报 `chart.unknown-field`，根上写 `data-state="error"`；阶段值不要求递减，递增时转化率写成大于 100%。 - 阶段的宽度与数值成正比，最宽的阶段铺满漏斗占的宽度。`shape` 取 `trapezoid`（缺省）时上下两条边分别接着自己与下一阶段的宽度，最后一个阶段两条边一样宽；`bar` 画成等高的条形，各阶段之间更好比较。`align` 取 `center`（缺省）居中，`start` 靠起始边对齐，逐级缩短看得更清楚。 - `direction="up"` 画成金字塔：第一阶段在最下面，往上逐级收窄。 - 颜色取有序色阶：第一阶段最深，往后逐级变浅，到色阶的 30% 为止（更浅的一段压在承载面上看不清）。阶段有固有次序，不用分类色，也就没有图例，阶段名直接标在阶段上。`palette` 把色阶换到基础色板里同名的色相上，与热力图、按值着色的散点同名。 - 阶段标签写阶段名与数值：`labels="outside"`（缺省）跟在各阶段的右边，漏斗让出最长那条标签的宽度，字压在承载面上，深浅两端都读得清；`inside` 写在阶段里、描一圈承载面色，放不下时写到阶段右边。 - `conversion` 取 `previous`（缺省，相对上一阶段）或 `first`（相对第一阶段）时，转化率写在左侧一列、落在两个阶段的交界处；`none` 不写，左侧不留列。 - 指着一行就命中那个阶段，窄的阶段两侧的空白也算；提示框写数值与两种转化率（第一阶段只有数值），其余阶段与它们的标签淡出到 `--xh-chart-dim-alpha`，被指着的阶段不位移、不放大。 - `hiddenSeries` 隐藏的阶段不画，转化率跳过它按相邻的可见阶段重算。 - `format` 指定数值格式（数字格式或函数），标签、提示框、可及名与数据表共用；转化率固定写成一位小数的百分数。 - 多张图接到同一个受控的 `activeKey` 上时，漏斗图按阶段名与其他图的类目对齐。 - `pending` 表示正在重新取数：保留上一帧、整体降低不透明度并在根上写 `aria-busy`。首次取数、手里还没有阶段时，空态写 `translations.loadingText` 并转一个圈，取完仍没有数据才写 `emptyText`。 - 首次出现时各阶段从中线（`align="start"` 时从起始边）一起横向展开，标签与转化率淡入，数据晚于挂载到达（异步取数，或 Web Components 连上之后才赋 `data`）时同样播这段入场；之后的数据变化从当前宽度插值到新宽度。`animated={false}`（Web Components 写 `animated="false"`）关闭过渡；系统开了减弱动效或容器写了 `data-motion="reduce"` 时几何直接到位，只保留淡入淡出。 - 三个适配器的作者侧写法不同，最终 DOM 一致：Vue 与 React 不写默认内容时铺开缺省结构（标题、视口与绘图区、空态、提示框），提示框内容可由作用域插槽 / 函数式 children 替换；Web Components 侧作者写外壳（root、caption、viewport 与其中空的 `