教你快速搭建数据可视化大屏！_可视化数据大屏-CSDN博客

本文链接：https://blog.csdn.net/Gemcoder/article/details/131519543

该教程详细介绍了如何在捷码低代码平台上创建一个页面，包括设置固定宽高布局，添加地球地图组件，应用渐变遮罩，布局页面元素如顶部、左侧和右侧的Web组件，以及插入各种业务图表。最后强调了将组件与业务数据绑定以展示动态信息的重要性。

摘要由CSDN通过智能技术生成

捷码低代码平台使用教程：https://www.bilibili.com/video/BV1oc411J7YS/?spm_id_from=333.337.search-card.all.click&vd_source=70274c8183ecd283476e351f689c4cd7

效果展示：

操作步骤：

1、创建一个空白页面，填写页面名称，选择固定宽高布局。

2、主场景搭建：往画布中拖入地图组件中的地球，调整属性。

3、添加渐变遮罩：某些场景中需要使用渐变遮罩淡化主场景四周内容，突出中间内容和四周的业务图表。在画布中拖入大屏组件中的渐变遮罩。

4、布局：在主场景之上进行页面布局，为下一步添加业务图表做好准备

●将3个web组件中的fixedContainer加入到画布，配置在页面顶部、左边、右边。

●顶部fixedContainer中拖入一个flexContainer，配置属性，用于放置标题

●在左右FixedContainer分别拖入一个AbsoluteCol，配置属性，用于放置业务数据相关内容

属性	值
行栅格	25px ; 1; 25px ; 1 ; 25px ; 1（配置出6行）

5加入业务图表
●顶部flexContainer中拖入大屏组件中的流光文字，
●左侧依次拖入大屏组件中的标题、基础柱状图、嵌套环形图、立体图片，
●右侧依次拖入大屏组件中的标题、立体环饼图、基础折线图、轮播表格，
●配置属性后保存后查看预览效果

上述完成的页面还是使用的静态数据，为了能正确展示业务，需要将组件与业务数据通过平台的绑定功能连接起来。