> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 漏斗图

> 本文详细介绍了漏斗图的功能、使用场景及其基本要求，并提供了如何在报表中配置和使用漏斗图组件的操作步骤，包括选择组件与数据集、设置图标展示字段、样式配置等。

## 1. 简介

### 1.1 功能简介

漏斗图是通过对业务的各个关键环节的描述，来衡量各个环节的业务表现。从漏斗图可以非常直观地看到各个业务的转化程度。从某种意义来说，漏斗图是路径分析的特殊应用，主要是针对关键路径的转化分析。

以淘宝的购买为例子来讲一下，在淘宝购买一件商品需要经过以下几个步骤：

浏览 → 加入购物车 → 付款 → 收货 → 评价

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625467863945-64fb8d70-8cdb-423e-94ae-04619941bf01.png)
</Frame>

亮点：可以自行控制组件的大小和随意移动组件位置（靠左、居中、靠右）

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626418672681-8a440fea-d639-44e5-8ed2-b0822bf1e4ae.png)
</Frame>

### 1.2 使用场景

在淘宝的购买一件商品需要经过以下几个步骤：

浏览 → 加入购物车 → 付款 → 收货 → 评价

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625467863945-64fb8d70-8cdb-423e-94ae-04619941bf01.png)
</Frame>

### 1.3 基本要求

漏斗图的基本要求：

| **指标**        | **分组**   |
| ------------- | -------- |
| 可多选字段，最多30个字段 | 最多 1 个字段 |

## 2. 操作步骤

### 2.1 选择组件，配置数据集

创建报表，添加漏斗图组件，选择一个数据集

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640585644471-dba2e8fb-6987-418d-8e29-9c53b6857570.png)
</Frame>

选择数据集

### 2.2 选择图标展示字段

将右边的字段拖动放到【指标】、【分组】上，

可以直接选择数据集下的字段，也可以通过公式生成，**如何使用公式请查看**[**报表公式**](/zh/yida/form/yrofmw)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640586104726-7f8bc379-d6cb-4be1-81d3-1509453e8f1f.png)
</Frame>

配置指标、分组

#### 2.2.1 数据设置面板

可以对展示的字段进行排序、格式化等操作

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626405060415-6f1bfb35-6bd3-4e07-83d9-15575f9d246e.png)
</Frame>

对字段进行编辑

### 2.3 配置数据

可以查看柱线混合图的配置数据说明。

此处为语雀内容卡片，点击链接查看：[柱线混合图](/zh/yida/report/wfno1e)

### 2.4 样式设置

分为六小类，有样式配置、分类顺序、标签、百分比小数位数、图例、提示信息，如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626405163838-e6116d52-6a39-4e72-8950-95f0b7b99471.png)
</Frame>

样式设置

#### 2.4.1 样式配置

支持调整漏斗的颜色，开启或关闭动态高度、水平布局和转化率，调整分组的顺序

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626405350966-1ac59a9a-d9c5-4621-8da7-5026917f7f09.png)
</Frame>

图表套色

**自定义颜色**：自定义颜色支持写英文或 16 进制颜色值：#5894FF，多值用英文逗号隔开，如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626405415278-fd01ed6d-072d-4784-a9e0-672611379a49.png)
</Frame>

自定义颜色

#### 2.4.2 动态高度

会根据数值的变化大小来展示漏斗每个层的高度，可以查看以下截图比较清晰展示了该功能区别：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626406808869-249afd35-b001-419e-9287-73e917e1b0bf.png)
</Frame>

开启与关闭的展示效果

#### 2.4.3 水平布局

漏斗图水平展示，如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626407261374-5502e8df-0bda-4461-8863-19cfec66976f.png)
</Frame>

水平展示

#### 2.4.4 转化率

以下面案例说明该功能；

例如：淘宝购物时，浏览器商品网页数量是10000 ---> 放入购物车 4000 转化率是40% （4000/10000）

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625468262526-a7fcf8a8-ddd0-4e38-b9f4-c35192e6f265.png)
</Frame>

开启转化率效果

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625468268364-aaa52997-23b2-4e37-8eec-b24f494e6dea.png)
</Frame>

关闭转化率效果

#### 2.4.5 分类顺序

按分类名称以逗号形式分开

例如：浏览器商品网页,评价订单,放入购物车,生成订单,支付订单,完成交易

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625468276632-b6a59d6a-b4b1-4c08-95c7-3aae7601c33f.png)
</Frame>

设置分类顺序

#### 2.4.6 标签

支持开启与关闭，开启后支持调整位置，字号大小，颜色（默认是黑色）

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626407849360-ab7af4b7-e0e6-4853-a0cf-8491b2d1def3.png)
</Frame>

设置标签内容

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626407890166-ff8d1c3a-132b-4e52-a42a-3ab7e846f7e2.png)
</Frame>

关闭标签

#### 2.4.7 图例

支持开启与关闭，开启后支持调整位置与是否分页（默认是开启），如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626408077181-29c14d69-5347-4047-a4de-45c83140d114.png)
</Frame>

设置图例

#### 2.4.8 提示信息

支持开启与关闭，开启的效果：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1626408147736-69504687-2790-490d-ba26-9193351e9652.png)
</Frame>

## 3. 更多信息

此处为语雀内容卡片，点击链接查看：[https://www.yuque.com/go/doc/49490921](/zh/yida/report/qpdzl5)