漏斗图

文档基于漏斗图v1.1.12版本

组件说明

漏斗图可以以漏斗或者金字塔的形式分层显示不同数据系列占比情况。

效果案例

如下案例图所示为“漏斗”和“金字塔”两种不同漏斗图展示示例。

**漏斗图效果案例

一、样式

在样式中可以设置组件的基本属性、全局样式、图例和标签、边框、提示框和颜色。

1、基本属性

位置尺寸

位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

基本柱状图组件尺寸不影响组件内容显示、组件动画。

*组件位置尺寸说明

默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。

2、全局样式

在全局样式中可设置漏斗图排序和边距。

排序	分为漏斗图和金字塔两种排序方式。
边距	可以进一步调整组件上下左右边距。

3、图例

图例文本

字号	图例文本字号。
颜色	图例文本颜色。

数字

小数点位数	即图例中数字小数点位数。
真实数值	开启真实数值后，可进一步设置数值单位和单位字号、颜色和间距。
方向	图例排列顺序，分垂直和水平两种方式。
间距	图例中数字之间间距。
文本样式	图例中数字文本样式，可进一步调整数字大小和阴影值。

图例布局

分为默认布局和自定义布局两种情况。

a. 默认布局

间距	图例间间距，可通过行和列两种维度调整。
排列	图例排列方式，分为垂直和水平两种方式。
位置	图例位置，可放在组件上下左右四个位置。
对齐	图例对齐方式，分为开头、中央和结尾三种方式。
图形	可调整图例中图形样式，包括图形间距、大小和图形形状三项配置项。

b. 自定义布局

与默认布局不同主要体现在网格和间距两项配置项。

网格	在网格中可配置图例行数和列数。
间距	可分别调整图例行和列间距。
位置	图例位置，可放在组件上下左右四个位置。
对齐	图例对齐方式，分为开头、中央和结尾三种方式。
图形	可调整图例中图形样式，包括图形间距、大小和图形形状三项配置项。

4、标签

标签是针对漏斗组件内标签的配置项。

对齐	组件外部标签对齐方式，分为开头、中央和结尾三种形式。
偏移距离	组件外部标签偏移距离。
位移	组件内标签的位移距离，分x轴和y轴两种位移。
类目	漏斗图有不同系列，不同系列对应类目，在此项配置组件外部标签类目样式，包括后缀、间距、字体、字号和颜色。
数值	组件外部标签数值样式，包括字体、字号、颜色和小数点位数，如开启真实数值设置，还可设置真实数值单位。
中央标签	组件中央标签数值样式，包括字体、字号、颜色和小数点位数，如开启真实数值设置，还可设置真实数值单位。

5、边框

组件边框样式，可调整边框间距和颜色。

6、提示框

当鼠标移动到组件内数值时会触发提示框，在此可设置提示框尺寸、背景、类目和数值四项配置。

尺寸	提示框尺寸
背景	提示框背景：填充方式分为纯色、渐变和自定义图片三种形式；颜色：当设置为纯色和渐变时更改背景颜色。
类目	提示框内类目样式，可设置字体、字号和颜色。
数值	提示框内数值样式，包括字体、字号、颜色和小数点位数，如开启真实数值设置，还可设置真实数值单位。

7、颜色

每一层数据其实都是一个系列值，点击即可增加一个系列，删除一个系列。

填充方式：可设置为纯色和渐变两种形式。

颜色：设置数据系列颜色。

**颜色配置项示例图

二、数据

组件数据格式

y	文本
s	值

JSON数据案例

[
	{
		"y": 60,
		"s": "访问"
	},
	{
		"y": 40,
		"s": "咨询"
	},
	{
		"y": 20,
		"s": "订单"
	},
	{
		"y": 80,
		"s": "点击"
	},
	{
		"y": 100,
		"s": "展现"
	}
]

数据配置项说明

配置项	说明
数据源	数据源类型、数据源选择等
数据过滤器	勾选启用数据过滤器，单击添加过滤器，可在设置数据源页面中配置数据过滤器，详情请参见数据过滤器使用说明
数据响应结果	展示数据请求的响应结果
自动更新	选中后可以设置数据请求时间间隔

数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门

三、交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

载入动画配置项：

配置项	说明
渐隐渐显	启用是
速率	匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))
方向	动画方向
持续时间	载入动画持续时间，单位为ms
延时	载入动画延时长，单位为ms

自定义事件

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；

详细的自定义事件教学👉自定义事件教学

欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群说出您的想法，采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0