小花带你去appcube 开发手机销售应用-4008云顶国际网站

使用华为 appcube 开发手机销售监控大屏应用

一、实验内容
基于 appcube 低代码开发平台，开发手机销售监控大屏应用。
第一步为导入模拟数据，这些数据将会大屏页面中展示。
第二步为创建手机销售大屏应用

• 创建大屏项目及空白大屏页面
• 拖拽组件
• 配置组件属性及数据

您需要先注册华为云账号，并进行实名认证，开通 appcube 云服务。
如果您还没有华为云账号，请参考注册并。
练习资料见附件
大屏效果：

1.登录华为云账号，进入华为云，产品-搜索app 找到应用魔方

2.选中应用魔方 appcube，点击之后跳转到应用魔方介绍页面，这里我们可以看到应用魔方的相关介绍信息

3.点击立即使用，进入应用魔方控制台

4.点击进入开发环境，进入到appcube的开发环境（学习中心和实战演练可以帮助你快速入手appcube，项目下面放着你自己的项目）

导入数据应用

5.在开发环境页面，点击管理，切换到管理页面，选择“应用管理 > 软件包管理 > 软件包安装”，单击“新建”。

6.将实验里的手机销量统计app.zip拖拽到上传处进行上传。

7.上传成功之后，点击安装

8.等待安装成功。

导入数据包

9.在开发环境页面，点击管理，切换到管理页面，选择“系统管理 > 数据处理 > 数据导入”，在数据导入下，单击“新建”。

10.将实验里的dict_data.zip拖拽到上传处进行上传。

11.上传成功之后，点击导入。

12.等待导入成功。

数据导入成功你会收到一封数据导入成功的邮件，内容如下：

生成模拟数据

13.我们重新切回到appcube4008云顶国际集团首页，这里在我的应用里会看到刚刚构建好的源码包

14.：在“手机销量统计”应用右下角，单击预览图标，在应用预览页面，创建模拟数据。

15.在打开的预览页面，点击创建模拟数据按钮，创建模拟数据。这里创建的数据后续大屏将会通过接口调用。

16.等待模拟数据创建。

17.数据创建完成会有提示，提示你模拟数据创建成功。

创建手机销售监控大屏应用

18.在开发环境4008云顶国际集团首页的“项目”下，单击“业务大屏”。

19.在 dmax ai 数据可视化大屏页，单击“新建项目”。

20.设置项目信息，单击“新建”，进入创建大屏页面界面。
标签：手机销售监控大屏
名称：mobilesales

21.单击“目录”右侧“ ”，再单击“新建页面”。

22.创建可视化大屏页面：选择“空白”模板，在右侧单击“创建空白页”。

23.输入页面名称“mobilesalesmonitor”，单击“新建”。

24.页面创建成功。

拖拽组件

大屏页面新建完成后，需要从组件库中，拖拽各种组件到大屏中，完成页面开发。分析下页面构成，发现我们需要“文本”、“自定义数据标记柱图”、“热力图”、“多折线图”、“水位图”“数据标记柱图”以及 3 个“矩形装饰图”等组件。
我们按照从上到下，从左到右的顺序来构建大屏页面。
25.先单击右侧锁定按钮，锁定页面，再单击组件图标，展开组件库。选择文本-文本组件，长按鼠标左键拖动“文本”组件到页面中。

26.右键高级设置，进行文本编辑。


27.选中默认内容del清空，之后输入手机销售情况监控大屏，调整字体大小和颜色。

28.设置组件位置大小。距离左侧760 距离上侧40 宽度400 高度60 堆叠顺序1

配置热力图

29.组件框中长按鼠标左键拖动“矩形装饰”到页面中。

30.组件框中长按鼠标左键拖动“热力图”到页面中。调整热力图大小，和矩形装饰居中对齐，设置堆叠顺序为2

31.单击“数据”配置热力图数据
接口url：/service/appcube__salesstatbo/1.0.0/statsalesdataset

配置水位图

32.组件框中长按鼠标左键拖动“矩形装饰”到页面中。

33.组件框中长按鼠标左键拖动“水位图”到页面中。调整水位图大小，和矩形装饰居中对齐，

34.单击“数据”，选择“桥接器预置>水位图数据桥接器>静态数据”，输入静态数据内容如下：

{
    "rescode":"0",
    "resmsg":"成功",
    "result":[
        {
            "datavalue":[
                {
                    "name":"1 季度",
                    "value":[
                        {
                            "value":0.15,
                            "name":""
                        }
                    ]
                },
                {
                    "name":"2 季度",
                    "value":[
                        {
                            "value":0.17,
                            "name":""
                        }
                    ]
                },
                {
                    "name":"3 季度",
                    "value":[
                        {
                            "value":0.2,
                            "name":""
                        }
                    ]
                },
                {
                    "name":"4 季度",
                    "value":[
                        {
                            "value":0.3,
                            "name":""
                        }
                    ]
                }
            ]
        }
    ]
}

设置后，水位图中将出现 4 个季度的水位图标。

选中水位图，单击鼠标右键，选中“高级设置”，设置水位图模板、

标题、

数据系列

配置数据标记柱图

35.组件框中长按鼠标左键拖动“数据标记柱图”到页面中。调整数据标记柱图大小，和矩形装饰居中对齐

36.单击“数据”，设置“数据”下“报表”为“全国月度总销量趋势”。

37.单击鼠标右键，选中“高级设置”，设置模板样式及标题：
参考配色模板：蓝色渐变不排序，选中后，大屏上会展示预览效果。

设置标题的文本内容：全国月度销量（千部）

配置自定义数据标记柱图

38.组件框中长按鼠标左键拖动“矩形装饰”到页面中。

39.组件框中长按鼠标左键拖动“自定义数据标记柱图”到页面中。调整自定义数据标记柱图大小，和矩形装饰居中对齐

40.单击“数据”配置自定义数据标记柱图
接口url：/service/appcube__salesstatbo/1.0.0/salesbyregion

41.单击鼠标右键，选中“高级设置”，参考下图，设置标题：
文本内容：地区销量 top10（千部）

配置多折线图
42.组件框中长按鼠标左键拖动“多折线图”到页面中。调整多折线图大小，和矩形装饰居中对齐

43.配置“数据”下“报表”为“全国月度总销量趋势”：

44.单击鼠标右键，选中“高级设置”，参考下图，设置标题：
文本内容：不同价位区间月度销量（千部）

45.添加热力图下钻事件，添加后热力图和自定义数据标记柱图互相联动：
选择热力图，在右侧设置面板中的“事件”下，单击“下钻”行中的设置图标：

在弹窗中单击“添加动作”，选择“自定义数据标记柱图”下的“改变地区”，然后单击“关闭”退出：

46.最后看一下整体效果，微调使其更具观赏性

47.单击保存图标，保存页面后，预览时按 f11 快捷键全屏浏览，防止显示不全或出现滚动条。

整体效果：

您也可以单击热力图中的某省，查看该省销售情况：

单击热力图右上角返回按钮，可以返回全国图。
如有不足，请多多指正，谢谢。