如何使用AppCube应用魔方创建业务大屏应用

华为云大前端活动接近尾声，受益良多，本文将自己第三阶段的作业考核-使用AppCube应用魔方创建业务大屏应用的开发过程做一个分享，如有错误，欢迎指正！

按照考核作业中给的设计图，将页面布局大致如下，具体细节后面会有微调。

说明：作业中给的设计图是1274x708，考虑到构图的美观性和考核作业的性质还是决定使用1920x1080，但是组件大小设置和原设计图基本是成比例设置的！

{ "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 } } ] }

{ "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 ] } ] } } ] }

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "完成率", "data": [ { "value": 96 } ] } ] } ] }

{ "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 ] } ] } } ] }

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "化工", "value": [ { "value": 64.29, "name": "30天内" }, { "value": 35.71, "name": "30天外" } ] } ] } ] }

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "PVC合格率", "value": [ { "value": 0.96, "name": "percent" } ] } ] } ] }

第三部分：效果图

应用魔方 AppCube

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。