企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
### 漏斗图组件就是添加漏斗图样式的组件。点击“![](https://img.kancloud.cn/7e/94/7e943cbae6d2a0148ea1b1fe46f2a6ca_31x31.png)”图标,再点击“漏斗图”,即可创建新的图像,如图2.81; ![](https://img.kancloud.cn/42/44/4244bc0f09c23ce85c4c10b2213a8258_1008x439.png) ![](https://img.kancloud.cn/64/1e/641e4e2cbd02642db60e969ecedf9921_799x35.png) ## **一、组件名称设置** ### 选中漏斗图组件,在操作界面右侧的“图层名称”处可修改组件的名称,如图2.82。(名称最好要设置一下,方便后期组件管理) ![](https://img.kancloud.cn/29/c5/29c5dd97cbbbd3e5cd0e396eda1abfea_1049x466.png) ![](https://img.kancloud.cn/8e/96/8e96b4c7620b800d12d60c440410acf3_782x41.png) ## **二、系统配色** ### 选中该漏斗图组件,在操作界面右侧,打开“系统配色”开关,在“配色选择”下拉框中选择主题,来修改漏斗图组件的配色,如图2.83。 ![](https://img.kancloud.cn/37/d0/37d0c1fe0c0775b522ab9cbb39dd0c91_1054x517.png) ![](https://img.kancloud.cn/70/97/70971b755ebdb77cb52e4f8a87b4fcd4_790x36.png) ## **三、文字设置** ### 选中该漏斗图组件,在操作界面右侧的“文字设置”处可修改漏斗图组件内文字样式,如图2.84。 * ### 显示开关:该开关控制内部文字的显示与隐藏; * ### 字体大小:设置内部文字的大小; * ### 字体颜色:设置内部文字的颜色; * ### 字体粗细:设置内部文字的粗细; ![](https://img.kancloud.cn/b1/1b/b11b3b57d3ce776ff6cd5a89902f864c_1028x517.png) ![](https://img.kancloud.cn/17/bf/17bf6b0eee6f31293c28e21ad9351dc1_796x38.png) ## **四、反转** ### 选中该漏斗图组件,在操作界面右侧,打开“反转”开关,可将漏斗图反转180度,如图2.85。(效果图2.851) ![](https://img.kancloud.cn/e5/b8/e5b852a98c7bede2a0e46e615b272e4f_969x464.png) ![](https://img.kancloud.cn/0c/bf/0cbf0e7779241a98b3960580c4292787_799x39.png) ![](https://img.kancloud.cn/50/d0/50d050d1a294c7adf6bd7913f14c989b_844x599.png) ![](https://img.kancloud.cn/92/54/92545ef6edf4a9e895eeeeeb05762ef5_803x39.png) ## **五、标题设置** ### 选中该漏斗图组件,在操作界面右侧的“标题设置”处可修改漏斗图组件的标题样式,如图2.86。 * ### 标题开关:该开关控制标题的显示与隐藏; * ### 标题:标题显示的内容; * ### 字体颜色:标题的颜色; * ### 字体粗细:标题字体的粗细; * ### 字体大小:标题字体大小; * ### 字体位置:标题的位置,分为:居中、左对齐、右对齐; * ### 副标题:副标题内容; * ### 字体颜色:副标题字体颜色; * ### 字体粗细:副标题字体的粗细; * ### 字体大小:副标题字体大小; ![](https://img.kancloud.cn/46/0c/460c8385a7a68d5e074f98bde0368595_934x634.png) ![](https://img.kancloud.cn/5c/96/5c96398c1ffbe5fabbb6182e4c28d971_796x43.png) ## **六、字体设置** ### 选中该漏斗图,在操作界面右侧的“字体设置”处可修改漏斗图组件的文字样式,如图2.87。 * ### 显示:文字是否显示; * ### 字体大小:文字的大小; * ### 字体颜色:文字的颜色; * ### 字体粗细:文字的粗细; ![](https://img.kancloud.cn/18/c2/18c23c9b4aa894c68c8654d03f97766d_1044x402.png) ![](https://img.kancloud.cn/e8/49/e849fd90dca5b6925413a2c46677f99b_800x42.png) ## **七、提示语设置** ### 选中该漏斗图组件,在操作界面右侧的“提示语设置”处可修改漏斗图组件的提示语样式,如图2.88。 * ### 字体大小:提示语的字体大小; * ### 字体颜色:提示语的字体颜色; ![](https://img.kancloud.cn/1a/73/1a73150993f1817fec34ca8a709a478c_1053x380.png) ![](https://img.kancloud.cn/31/00/31006ed616f68a4220b174fd8f074392_784x39.png) ## **八、图例设置** ### 选中该漏斗图组件,在操作界面右侧的“图例设置”处可设置图例的样式,如图2.89。 * ### 图例开关:是否显示图例; * ### 位置:图例的位置,分为:居中、左对齐、右对齐; * ### 布局朝向:图例的排列顺序,分为:横排和竖排; * ### 字体大小:图例的字体大小; ![](https://img.kancloud.cn/2c/59/2c5990f19e57b11d66be6d60251e88b6_1033x374.png) ![](https://img.kancloud.cn/dc/45/dc45d1d48c525a80f633f53af404afac_804x46.png) ## **九、自定义配色设置** ### 选中该漏斗图组件,在操作界面右侧的“自定义配色”处可配置上边不能设置的内容,如图2.891。 * ### 文字颜色:轴文字的颜色;(因为漏斗图没有轴,所以不需要设置) * ### 轴线颜色:轴线颜色;(因为漏斗图没有轴,所以不需要设置) * ### 配色:漏斗图每层的颜色,如果开启了“系统配色”,需要先把系统配色先关掉,这样自定义的颜色才起作用; ![](https://img.kancloud.cn/69/3d/693d6b63f0a4f87fb815b660e4594ab9_1005x504.png) ![](https://img.kancloud.cn/a6/22/a6228f4f0b78eee960bae394333ee37b_803x49.png) ## **八、接口设置** ### 选中该漏斗图组件,在操作界面右侧,点击“![](https://img.kancloud.cn/49/06/4906ead2d133a7cfb9e739053c2d5930_389x49.png)”,可设置接口,如图2.892。 ### 1\. 数据类型 ### 数据类型分为静态数据和动态数据; * ### 静态数据:写死的数据; * ### 动态数据:会随着接口传过来的数据实时变化; ### 2\. 接口地址 ### (1)静态数据,接口地址传过来的内容要类似以下格式: ~~~ [{"value":335,"name":"直接访问"},{"value":310,"name":"邮件营销"},{"value":234,"name":"联盟广告"}] ~~~ ### (2)动态数据,接口地址传过来的内容要类似以下格式: ~~~ {"data":[{"value":335,"name":"直接访问"},{"value":310,"name":"邮件营销"},{"value":234,"name":"联盟广告"}]} ~~~ ### 3\. 刷新时间 ### 这个参数主要针对动态数据设置的,完成数据的实时更新。 * ### 如果你想设置成5秒刷新一次,可以将刷新时间设置成“5000”; ### 4\. 刷新数据 ### 这个参数主要是重新请求以下接口,完成数据的更新。 ![](https://img.kancloud.cn/4e/47/4e47ea68c6af6acaa8b5d738065df18c_688x1028.png)