作者:福州司马懿
原文链接:应用Astro Zero带你从零开始,10分钟搭建一套 “图书馆数据可视化大屏” 利用【华为云Astro低代码体验季】-云社区-华为云
产品介绍
点击下方链接进入工具页:
https://auth.huaweicloud.com/authui/login.html?locale=zh-cn&s...
最新版的Astro Zero界面如下
创立大屏我的项目
切换到“利用开发”选项卡,鼠标挪动到“业务大屏”处,点击“开始创立”
这时候会让你抉择“PC大屏”还是“手机大屏”(绝大部分都是构建PC端大屏利用,很少有手机的),因而咱们这里抉择PC端,而后输出利用名“图书馆数据可视化大屏”
新建利用
创立好我的项目后,因为还没有任何界面,Astro Zero会提醒你“新建页面”
点击“新建页面”按钮后,会进去好多个模板供你筛选 (绝大多数状况下,用这些模板进行革新的我的项目,都能合乎你或者你们领导的需要)
咱们应用模板进行创立,点击左侧模板,右侧会呈现该模板的放大效果图(本例基于“用户剖析”模板进行创立)
点击位于地方底部的“应用此模板按钮”,输出模板名字“图书馆数据可视化大屏”
页面布局
快捷键 Ctrl + A,能够看到所有应用到的控件名称
批改题目
在“文本编辑”控件上点击“配置”按钮,而后批改文本内容为“图书馆数据可视化大屏”
批改字体大小为48(这样像个题目),而后扭转字体控件宽高和地位,让它们程度居中
批改后的效果图如下
增加工夫显示
聚焦到“翻牌器”,应用Delete快捷键删除,换成“工夫翻盘器”控件
而后调整工夫显示的大小即可
批改卡片题目
点击卡片上的“配置”图标,而后批改文本内容,顺次批改为
- 累计青年读者
- 累计中年读者
- 累计老年读者
最终成果如下图
各类书籍借阅状况(雷达图)
鼠标挪动到该控件上,点击“配置”按钮,将“多组单数据模板”改为“单组多数据模板”
点击“数据源”图标能够批改数据源
其中dataValue
对应各坐标轴上的值;dataX
存储的是坐标轴信息。将数据批改为
{ "dataValue": [{ "name": "男性", "value": [ [ 83, 54, 34, 64, 24, 63, 83, 92, 34 ] ] }, { "name": "女性", "value": [ [ 4, 92, 75, 82, 52, 93, 33, 54, 34 ] ] } ], "dataX": [ "少儿读物", "文史类", "艺术类", "摄影", "IT", "修建", "医学", "厨艺", "法律" ]}
批改后如下图
批改题目文本框的内容,将题目改为“各类书籍借阅状况”
读者趋势
批改读者趋势的文本框,将题目内容改为“今日读者新增趋势”
读者年龄散布
批改右上角柱状图的数据
将JSON数据批改为入下
{ "dataX": [ "20岁以下", "20-30岁", "30-40岁", "40-50岁", "50-60岁", "60-70岁", "70-80岁", "80岁以上" ], "dataValue": [{ "title": "读者数", "value": [ 450, 990, 710, 870, 1290, 140, 33, 46 ] }]}
而后批改卡片题目为“读者年龄散布”
读者沉闷状况
将题目批改为“近一周到馆读者趋势”
接着,批改图表数据,将静态数据改为
{ "dataX": [ "周一", "周二", "周三", "周四", "周五", "周六", "周日" ], "dataValue": [{ "title": "本周", "value": [ 392, 300, 387, 201, 271, 264, 351, 331 ] }, { "title": "上周", "value": [ 152, 200, 187, 201, 251, 364, 151, 251 ] } ]}
点击“保留”按钮后,成果如下
天气组件
先把原来这一块的组件全副删掉,而后拖动右边的天气组件,批改下大小即可
而后在点开“配置”按钮,批改题目。改好后,这一块的卡片就算操作实现了
踊跃读者滚动榜单
首先,将题目批改为“踊跃读者榜单”
而后点击“数据图标”对数据进行批改
将静态数据改为如下格局,dataValue中,每个JSONObject的键名,就是列名
{ "dataValue": [{ "date": "2020-08-05", "amount": 1258, "name": "陈*龙", "age": "91" }, { "date": "2020-08-05", "amount": 4500, "name": "黄*敏", "age": "31" }, { "date": "2020-08-05", "amount": 2300, "name": "林*", "age": "26" }, { "date": "2020-08-05", "amount": 800, "name": "严*", "age": "38" }, { "date": "2020-08-05", "amount": 3500, "name": "海*", "age": "53" }, { "date": "2020-08-06", "amount": 1000, "name": "欧阳*冰", "age": "24" }, { "date": "2021-05-07", "amount": 1430, "name": "黄*凯", "age": "29" }, { "date": "2021-07-17", "amount": 1790, "name": "陈*磊", "age": "74" } ]}
数据批改后要记得保留。而后点击“图形按钮”,批改表头名字
顺次开展每个“数据系列”,而后批改表头题目
[]()公布利用
首先来看一下,批改前后的比照图,能够看到,根本八九不离十,就换了几个控件,而后批改了数据。
点击“小飞机”一样的公布按钮,即可公布利用
勾选公布链接开关,后续间接用该地址即可浏览大屏了,无需再进行服务器搭建(除非数据要从后盾获取)
总结
用Astro做大屏真的很不便,能够说是“知行合一”,想到怎么做,就拖什么控件。根本款式能够间接从模板里选,而后挑一个适合的进行革新,一个我的项目顶多30分钟搞定,秒杀那些毕业10年的资深工程师,老本还低,还稳固,未来必成大器!