# 如何从0到1创建一个大屏 ### 一、大屏简介 大屏设计是使用可视化大屏的方式来分析并展示数据。大屏设计帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用,满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。 ``` 注意: 大屏设计组件接口,只支持https协议,不支持http协议!!! ``` ![](https://img.kancloud.cn/20/ea/20ea4669b5012e2f853035a5dbed9912_813x29.png) ### 二、如何从0到1设计一个大屏 以下图大屏为例,为大家讲解一下,如何从0到1设计一个大屏; ![](https://img.kancloud.cn/ed/e6/ede6c314c2eb6eae87d1df5ac9299e1c_1920x1061.png) ![](https://img.kancloud.cn/20/ea/20ea4669b5012e2f853035a5dbed9912_813x29.png) #### 2.1 新建大屏 * 新建空白大屏 进入大屏设计界面后,点击下图中的“新建大屏”按钮,填写相关信息,即可新建空白大屏; 在积木报表管理后台,点击“新建 ->新建大屏”,输入大屏的名称、密码等信息,就可以设计大屏了; ``` 备注: 1、默认新建的大屏在“我的大屏”类别下; 2、新建或者复制模版新建大屏的时候,需要设置密码,避免别人修改,或者删除; ``` ![](https://img.kancloud.cn/59/06/59068d5841fb5c98e5f33181f5d568f2_1917x937.png) ![](https://img.kancloud.cn/23/1a/231a5a1852f55478e4fc80c5bc11d304_1918x934.png) ![](https://img.kancloud.cn/c6/2b/c62be40767be16a5417caf6e6dc4c06f_1918x940.png) #### 2.2 插入背景 点击右侧样式设置栏中的“背景图片”按钮,可上传大屏的背景图片; ![](https://img.kancloud.cn/c7/9d/c79d32090b937a28bfdfa7d841c7c324_1910x934.png) #### 2.3 插入模块,安排好整体布局 如果想使大屏的样子好看,需要先把相应的模块安排好,这样页面布局才好看; * 点击上传图片按钮,把整理好的模块背景,按大屏样式挨个上传; ![](https://img.kancloud.cn/11/4f/114fd0dd70d584356b3cd7ad597f39b6_1918x935.png) ![](https://img.kancloud.cn/20/ea/20ea4669b5012e2f853035a5dbed9912_813x29.png) * 接着需要上传各个模块的图表,比如各个模块的图表、名称等元素; ![](https://img.kancloud.cn/1a/cb/1acb57f79b73a5182838dd4241fc32e4_1918x942.png) ![](https://img.kancloud.cn/20/ea/20ea4669b5012e2f853035a5dbed9912_813x29.png) #### 2.4 插入数据集 为了使图表会实时数据变化,我们需要为各个图表添加动态数据集; 选择右侧操作栏中的“数据 ->动态数据”,在接口地址中填写对应的API地址,点击“刷新”按钮,就添加成功了; ![](https://img.kancloud.cn/24/fb/24fb973253ae8362c1d9aa5d00e5faad_1920x874.png) ![](https://img.kancloud.cn/20/ea/20ea4669b5012e2f853035a5dbed9912_813x29.png) #### 2.5 修改图表样式 要想图表好看,还需要对图表的样式做修改,点击右侧操作栏中的“配置”,可对图表的标题、数值、颜色、字体等样式做设置; ![](https://img.kancloud.cn/85/66/85664dda432109d33c22a66f50c55d83_1917x940.png) ![](https://img.kancloud.cn/20/ea/20ea4669b5012e2f853035a5dbed9912_813x29.png) #### 2.6 保存、预览 制作好图表后,一定记得点击“保存”按钮,这样数据才不会丢失;再点击“预览”按钮,可对图表进行预览; ![](https://img.kancloud.cn/ef/a3/efa3a8f115cfdcf52e8857705aec34c9_1920x928.png) ![](https://img.kancloud.cn/20/ea/20ea4669b5012e2f853035a5dbed9912_813x29.png)