乐趣区

关于深度学习:用华为云低代码Astro-Zero10分钟搭建-图书馆数据可视化大屏-应用

作者:福州司马懿
原文链接:应用 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 快捷键删除,换成“工夫翻盘器”控件

而后调整工夫显示的大小即可

批改卡片题目

点击卡片上的“配置”图标,而后批改文本内容,顺次批改为

  1. 累计青年读者
  2. 累计中年读者
  3. 累计老年读者

最终成果如下图

各类书籍借阅状况(雷达图)

鼠标挪动到该控件上,点击“配置”按钮,将“多组单数据模板”改为“单组多数据模板”

点击“数据源”图标能够批改数据源

其中 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 年的资深工程师,老本还低,还稳固,未来必成大器!

退出移动版