学习AppCube开发业务大屏

举报
zekelove 发表于 2021/09/27 08:48:38 2021/09/27
【摘要】 学习AppCube开发业务大屏,使用数据源、静态数据和Excel数据,使用《手机销量销售大屏》自定义的热力图组件,以及使用相关图形组件开发能源化工管理看板。

在华为云学习应用魔方AppCube开发业务大屏,开发的过程记录如下:

1.创建项目

打开AppCube网站:https://www.huaweicloud.com/product/appcube.html

点击“立即使用”,打开会有之前免费的AppCube实例

点击“进入开发环境”,打开进入应用魔方AppCube

这里可以创建不同类型的项目,也可以打开以前创建开发应用,还可以去学习中心学习等功能。

本次作业是开发业务大屏,点击“业务大屏”,打开DMAX AI数据可视化大屏页面

点击“新建项目”,创建一个空白项目

点击左侧“+”,点击“新建页面”,创建一个新的页面

打开“新建页面”以后,可以选择“创建空白页”,“AI”,“预置”里的模板

创建“空白页”

2.页面开发

页面设置

右侧根据屏幕大小自定义设置,左侧打开“组件列表”,就可以拖拽组件进行大屏开发了。

选择合适组件,拖拽布局大屏,效果如下

3.数据定义

点击“新建分类”,创建一个“能源化工大屏”类型

点击“数据集管理”,创建“静态数据”

化工合格率

化工销售额

Excel数据表

产品库存表

产品名称 30天内 30天外
PVC 78 58
烧碱 70 50
盐酸 70 80
水泥 68 80

原料库存表

原料名称 30天内 30天外
电石 60 55
原煤 68 51
原盐 68 80

原料单价表

日期 原盐单价 煤炭单价 石灰石单价
2021/9/10 9 9 9
2021/9/11 4 4 4
2021/9/12 5 5 5
2021/9/13 3 3 3
2021/9/14 15 15 15
2021/9/15 22 22 22
2021/9/16 15 15 15
2021/9/17 22 22 22
2021/9/18 20 20 20
2021/9/19 18 18 18

4.图形组件设置

通用表格

选中“通用表格”,右侧组件设置点击“数据”, 桥接器数据类型选择“静态数据”,输入数据里面可以进行修改数据。

选中“通用表格”,右键“高级设置”

打开表格的属性设置,可以对标题,行,表头,数据映射进行设置

水位图

选中“水位图”,右侧组件设置点击“数据”, 数据源类型选择“数据集”,数据集名称“化工合格率”,每一个水位图的“系列”选择一个数据字段进行数据绑定

选中“水位图”,右键“高级设置”, 打开属性设置进行修改

柱状图

选中“柱状图”,右侧组件设置点击“数据”, 数据源类型选择“Excel文件”,输入数据后面点击“上传Excel”,上传数据完成后下方内容框可以进行数据修改

选中“柱状图”,右键“高级设置”, 打开属性设置进行修改

仪表盘

选中“仪表盘”,右侧组件设置点击“数据”,桥接器数据类型选择“静态数据”, 输入数据里面可以进行修改数据。

选中“仪表盘”,右键“高级设置”, 打开属性设置进行修改

线状图

选中“线状图”,右侧组件设置点击“数据”, 数据源类型选择“Excel文件”,输入数据后面点击“上传Excel”,上传数据完成后下方内容框可以进行数据修改

选中“线状图”,右键“高级设置”, 打开属性设置进行修改

饼图

选中“饼图”,右侧组件设置点击“数据”,桥接器数据类型选择“静态数据”, 输入数据里面可以进行修改数据。

选中“饼图”,右键“高级设置”, 打开属性设置进行修改

文本-翻牌器

选中“翻牌器”,右侧组件设置点击“数据”, 数据源类型 选择“数据集”,数据集名称“化工销售额”,对应的“数值”选择一个数据字段(应收金额,应用额)进行数据绑定

选中“翻牌器”,右键“高级设置”, 打开属性设置进行修改

文本

选中“文本编辑”,右侧组件设置 “属性”,文本内容参数代替

选中“文本编辑”,右侧组件设置点击“数据”,桥接器数据类型选择“静态数据”, 输入数据里面可以进行修改数据。

热力图

这个组件需要自定义,参考“手机销量监控大屏”,导入组件

5.组件升级

对自定义的“热力图”组件进行修改,这里可以进行下载,更新操作,对下载的源码文件可以进行修改。

 

先单击“释放锁”,然后再上传修改后组件的压缩文件

大屏开发页面进行“检查更新”升级

文章内容如果写的存在问题欢迎留言指出,让我们共同交流,共同探讨,共同进步~~~

文章如果对你有帮助,动动你的小手点个赞,鼓励一下,给我前行的动力。

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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

举报
请填写举报理由
0/200