小花带你去AppCube 开发手机销售应用

举报
花溪 发表于 2021/04/13 12:01:42 2021/04/13
【摘要】 使用华为 AppCube 开发手机销售监控大屏应用

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

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

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

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

1.登录华为云账号，进入华为云，产品-搜索app 找到应用魔方
image.png
2.选中应用魔方 AppCube，点击之后跳转到应用魔方介绍页面，这里我们可以看到应用魔方的相关介绍信息
image.png
3.点击立即使用，进入应用魔方控制台
image.png
4.点击进入开发环境，进入到AppCube的开发环境（学习中心和实战演练可以帮助你快速入手AppCube，项目下面放着你自己的项目）
image.png
导入数据应用

5.在开发环境页面，点击管理，切换到管理页面，选择“应用管理 > 软件包管理 > 软件包安装”，单击“新建”。
image.png
6.将实验里的手机销量统计App.zip拖拽到上传处进行上传。
image.png
7.上传成功之后，点击安装
image.png
8.等待安装成功。
image.png
导入数据包

9.在开发环境页面，点击管理，切换到管理页面，选择“系统管理 > 数据处理 > 数据导入”，在数据导入下，单击“新建”。
image.png
10.将实验里的dict_data.zip拖拽到上传处进行上传。
image.png
11.上传成功之后，点击导入。
image.png
12.等待导入成功。
image.png
数据导入成功你会收到一封数据导入成功的邮件，内容如下：
image.png
生成模拟数据

13.我们重新切回到AppCube首页，这里在我的应用里会看到刚刚构建好的源码包
image.png
14.：在“手机销量统计”应用右下角，单击预览图标，在应用预览页面，创建模拟数据。
image.png
15.在打开的预览页面，点击创建模拟数据按钮，创建模拟数据。这里创建的数据后续大屏将会通过接口调用。
image.png
16.等待模拟数据创建。
image.png
17.数据创建完成会有提示，提示你模拟数据创建成功。
image.png
创建手机销售监控大屏应用

18.在开发环境首页的“项目”下，单击“业务大屏”。
image.png
19.在 DMAX AI 数据可视化大屏页，单击“新建项目”。
image.png
20.设置项目信息，单击“新建”，进入创建大屏页面界面。
标签：手机销售监控大屏
名称：MobileSales
image.png
21.单击“目录”右侧“+”，再单击“新建页面”。
image.png
22.创建可视化大屏页面：选择“空白”模板，在右侧单击“创建空白页”。
image.png
23.输入页面名称“MobileSalesMonitor”，单击“新建”。
image.png
24.页面创建成功。
image.png

拖拽组件

大屏页面新建完成后，需要从组件库中，拖拽各种组件到大屏中，完成页面开发。分析下页面构成，发现我们需要“文本”、“自定义数据标记柱图”、“热力图”、“多折线图”、“水位图”“数据标记柱图”以及 3 个“矩形装饰图”等组件。
我们按照从上到下，从左到右的顺序来构建大屏页面。
25.先单击右侧锁定按钮，锁定页面，再单击组件图标，展开组件库。选择文本-文本组件，长按鼠标左键拖动“文本”组件到页面中。
image.png
26.右键高级设置，进行文本编辑。
image.png
image.png
27.选中默认内容del清空，之后输入手机销售情况监控大屏，调整字体大小和颜色。
image.png
28.设置组件位置大小。距离左侧760 距离上侧40 宽度400 高度60 堆叠顺序1
image.png
配置热力图

29.组件框中长按鼠标左键拖动“矩形装饰”到页面中。
image.png
30.组件框中长按鼠标左键拖动“热力图”到页面中。调整热力图大小，和矩形装饰居中对齐，设置堆叠顺序为2
image.png
31.单击“数据”配置热力图数据
接口url：/service/AppCube__SalesStatBO/1.0.0/statSalesDataset
image.png
配置水位图

32.组件框中长按鼠标左键拖动“矩形装饰”到页面中。
image.png
33.组件框中长按鼠标左键拖动“水位图”到页面中。调整水位图大小，和矩形装饰居中对齐，
image.png
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 个季度的水位图标。
image.png
选中水位图，单击鼠标右键，选中“高级设置”，设置水位图模板、
image.png
标题、
image.png
数据系列
image.png
配置数据标记柱图

35.组件框中长按鼠标左键拖动“数据标记柱图”到页面中。调整数据标记柱图大小，和矩形装饰居中对齐
image.png
36.单击“数据”，设置“数据”下“报表”为“全国月度总销量趋势”。
image.png
37.单击鼠标右键，选中“高级设置”，设置模板样式及标题：
参考配色模板：蓝色渐变不排序，选中后，大屏上会展示预览效果。
image.png
设置标题的文本内容：全国月度销量（千部）
image.png
配置自定义数据标记柱图

38.组件框中长按鼠标左键拖动“矩形装饰”到页面中。
image.png
39.组件框中长按鼠标左键拖动“自定义数据标记柱图”到页面中。调整自定义数据标记柱图大小，和矩形装饰居中对齐
image.png
40.单击“数据”配置自定义数据标记柱图
接口url：/service/AppCube__SalesStatBO/1.0.0/salesByRegion
image.png
41.单击鼠标右键，选中“高级设置”，参考下图，设置标题：
文本内容：地区销量 TOP10（千部）
image.png
配置多折线图
42.组件框中长按鼠标左键拖动“多折线图”到页面中。调整多折线图大小，和矩形装饰居中对齐
image.png
43.配置“数据”下“报表”为“全国月度总销量趋势”：
image.png
44.单击鼠标右键，选中“高级设置”，参考下图，设置标题：
文本内容：不同价位区间月度销量（千部）
image.png
45.添加热力图下钻事件，添加后热力图和自定义数据标记柱图互相联动：
选择热力图，在右侧设置面板中的“事件”下，单击“下钻”行中的设置图标：
image.png
在弹窗中单击“添加动作”，选择“自定义数据标记柱图”下的“改变地区”，然后单击“关闭”退出：
image.png
46.最后看一下整体效果，微调使其更具观赏性
image.png
47.单击保存图标，保存页面后，预览时按 F11 快捷键全屏浏览，防止显示不全或出现滚动条。
image.png
整体效果：
image.png
您也可以单击热力图中的某省，查看该省销售情况：
image.png
单击热力图右上角返回按钮，可以返回全国图。
如有不足，请多多指正，谢谢。

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Astro轻应用 Astro Zero
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入