小花带你去appcube 开发手机销售应用-星辰平台

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

使用华为 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.我们重新切回到appcube星辰平台首页,这里在我的应用里会看到刚刚构建好的源码包

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

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

16.等待模拟数据创建。

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

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


18.在开发环境星辰平台首页的“项目”下,单击“业务大屏”。

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 快捷键全屏浏览,防止显示不全或出现滚动条。

整体效果:

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

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

  • 附件: 1.42mb 下载次数:8
【星辰平台的版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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