【操作手册】零代码搭建疫情防控数据大屏

使用AppCube的DMAX能力快速搭建疫情防控大屏

介绍

体验通过AppCube中的DMAX能力，快速搭建一个疫情防控大屏。实现一个简单的大屏页面来呈现出基本数据，进行一些基础的样式修改。

您将会学到什么

您将学会如何通过AppCube实现快速搭建大屏页面，并可在此基础上基于AppCube产品开放能力进行对应用的自定义扩展，体验轻松拖拽开发的乐趣。

您需要什么

环境准备

本次快速体验大屏能力只需要注册华为云账号并且进行实名认证即可，账号整体流程：注册华为云账号→实名认证。

• 如何注册华为云账号
• 实名认证介绍（推荐进行个人实名认证）

资源准备

申请免费试用AppCube

本次体验使用免费版AppCube即可完成，点击链接“免费试用AppCube”中的免费试用，按照提示操作，完成免费版的资源领取。本次指导文档也是通过免费版账号进行大屏的搭建。

进入首页显示如下页面就完成了资源的所有准备了

疫情防控大屏的搭建

1. 创建疫情防控大屏应用

点击上一图片中的业务大屏“开始创建”创建空白应用，输入名称例如：疫情防控大屏。

创建完成后自动进入项目，点击“页面”→“新建空白页面”，输入标题例如：“疫情数据页面”，点击新建，这样就进入了项目中的第一个页面，项目搭建完成。

项目创建成功后的截图如下：

2. 内容制作

提示：若页面上方有【编辑页面】按钮，必须要点击进入编辑状态，否则无法进行页面编辑。

接下来是基础组件的使用，内置组件在文档中均有详细介绍，详情参考：组件介绍。

1）标题组件

选择【全部组件】下的【文本】，找到“标题”组件，并将该组件拉到画布最上方中间。

点击组件中的“配置”，填入【文本内容】，例如“疫情防控大屏”，修改其他选项，更改自己喜欢的样式即可。

注意：【卡片】这里的选项也是调整样式的，有的效果在黑色背景下效果不明显，可以根据个人爱好自定义设置，这里便不予展示。

2）基本饼图组件

选择【图表】中的【基本饼图】，拖到画布中

饼图属性大致分成两大部分：①是样式修改部分，②是数据内容修改。①部分大家可自行修改，这里主要介绍②数据修改部分，由于采用静态数据显示出来信息，本质我们就可以修改固定的json格式来展示数据。

点击【数据】，修改json即可修改组件显示出的数据内容，注意要保证格式的正确，格式错误会导致数据消失，修改完成后点击保存即可。

（注：这里修改json格式不是唯一修改显示数据的方式，但是比较方便，总览所有数据显示。本文组件的json参考数据在下方附件中，是否需要根据个人设计仅供参考。）

3）基本柱图

找到组件中的基本柱图，拖到画布中，柱图与饼图类似也是分为相似的两部分

同样，我们通过修改JSON数据来修改整体显示的数据

点击【保存】后，修改其余的样式及显示标题

类似的，我们可以直接修改JSON数据，直接将“单柱图”修改成“多柱图”。

4）折线图

将预置组件中的【多折线图】拖到画布中，折线图也是可以参考柱图或者饼图来进行修改的。

这里需要修改下【卡片】中默认的标题，通过JSON数据修改每条折线的小标题，其他样式可随意修改。

5）通用表格

从预置组件中找到【通用表格】，拖到画布中

表格的数据修改，可以通过修改静态JSON数据或者在【配置】中修改“数据系列”

修改“列名”，“列宽”等之后，就需要通过静态JSON数据修改表格内的数据。注意，关于“列宽占比”，所有的“数据系列”中的“列宽占比”之和需要小于“100”（例如这里是五列，每列的“列宽占比”设置成了“19”）。

由于表格加了一列，静态JSON数据大致修改如下：

至此，基础组件的使用已经完成。

3. 样式优化

基于以上组件的构建，我们可以使用别装饰组件来美化我们的整体页面。例如【边框修饰】、【文本编辑】、【趋势】等组件，大家可以通过已有组件来尽情发挥，构建出你认为的完美页面。

参考页面：

修改完成后，点击上方“保存”即可，点击“预览”后就能看到你创建的页面效果啦！

应用打包

下载项目应用包之前需要注意：项目中的页面必须要点击“发布”，开启“发布链接”。

发布完成后，点击【退出编辑】，并退回到项目列表中，并点击此项目中的发布。

点击【新建版本】

输入版本号，勾选自己发布的页面，点击确定后提示“发布成功”。

发布成功后，点击下载，选择【AppCube DMAX】下载即可将项目压缩包下载到本地。

可以通过【导入项目包】的形式检查自己的项目是否打包成功。

恭喜您

已完成体验。