如何使用AppCube应用魔方创建业务大屏应用
【摘要】 华为云大前端活动接近尾声，受益良多，本文将自己第三阶段的作业考核-使用AppCube应用魔方创建业务大屏应用的开发过程做一个分享，如有错误，欢迎指正！
华为云大前端活动接近尾声，受益良多，本文将自己第三阶段的作业考核-使用AppCube应用魔方创建业务大屏应用的开发过程做一个分享，如有错误，欢迎指正！
按照考核作业中给的设计图，将页面布局大致如下，具体细节后面会有微调。
说明：
第二部分：主要组件说明
一、图表组件
1、主要参数设置
2、数据配置
{
"resCode": "0",
"resMsg": "成功",
"result": [
{
"order": {
"dataValue": [
{
"output": "PVC",
"order_day": 16,
"order_month": 480,
"sales_day": 13,
"sales_month": 390,
"shipments_day": 10,
"shipments_month": 300
},
{
"output": "烧碱",
"order_day": 20,
"order_month": 600,
"sales_day": 16,
"sales_month": 480,
"shipments_day": 15,
"shipments_month": 450
},
{
"output": "盐酸",
"order_day": 15,
"order_month": 450,
"sales_day": 9,
"sales_month": 270,
"shipments_day": 5,
"shipments_month": 150
},
{
"output": "水泥",
"order_day": 25,
"order_month": 750,
"sales_day": 13,
"sales_month": 280,
"shipments_day": 8,
"shipments_month": 240
}
],
"total": 4
}
}
]
}3、效果图
二、柱形图组件
1、主要参数设置
2、数据配置
{
"resCode": "0",
"resMsg": "成功",
"result": [
{
"order": {
"dataX": [
"PVC",
"烧碱",
"盐酸",
"水泥"
],
"dataValue": [
{
"title": "30天内",
"value": [
78,
68,
70,
70
]
},
{
"title": "",
"value": [
0,
0,
0,
0
]
},
{
"title": "30天外",
"value": [
55,
50,
85,
85
]
}
]
}
}
]
}3、效果图
三、仪表盘组件
1、主要参数设置
2、数据配置
{
"resCode": "0",
"resMsg": "成功",
"result": [
{
"dataValue": [
{
"name": "完成率",
"data": [
{
"value": 96
}
]
}
]
}
]
}3、效果图
四、线状图组件
1、主要参数设置
2、数据配置
{
"resCode": "0",
"resMsg": "成功",
"result": [
{
"order": {
"dataX": [
"7/22",
"7/23",
"7/24",
"7/25",
"7/26",
"7/27",
"7/28",
"7/29",
"7/30",
"7/31"
],
"dataValue": [
{
"title": "原盐单价",
"value": [
9,
4,
5,
3,
15,
24,
15,
24,
22,
21
]
}
]
}
}
]
}3、效果图
五、饼图组件
1、主要参数设置
2、数据配置
{
"resCode": "0",
"resMsg": "成功",
"result": [
{
"dataValue": [
{
"name": "化工",
"value": [
{
"value": 64.29,
"name": "30天内"
},
{
"value": 35.71,
"name": "30天外"
}
]
}
]
}
]
}3、效果图
六、水球图组件
1、主要参数设置
2、数据配置
{
"resCode": "0",
"resMsg": "成功",
"result": [
{
"dataValue": [
{
"name": "PVC合格率",
"value": [
{
"value": 0.96,
"name": "percent"
}
]
}
]
}
]
}3、效果图
第三部分：效果图
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）