作者：福州司马懿
原文链接：应用 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 年的资深工程师，老本还低，还稳固，未来必成大器！