华为云 Astro Canvas 个性化搭建汽车展示大屏
引导式阅读
Others
华为云 Astro Canvas 个性化搭建汽车展示大屏
作者
Codelabs 助理
上架时间
2023-09-19 14:48:33

实验背景

大屏应用 Astro Canvas 是华为云低代码平台 Astro 的子服务之一,是以数据可视化为核心,以屏幕轻松编排,多屏适配可视为基础,用户可通过图形化界面轻松搭建专业水准的数据可视化大屏。例如汽车展示大屏、监控大屏、项目开发大屏和数据分析看板等。

本实验所有操作都基于华为云 Astro 平台,通过本实验,用户能够熟悉华为云 Astro 低代码平台的开发流程。

本次实验资源需开通 Astro Canvas 基础版免费试用:

实验目的

本实验指导使用华为云 Astro 来进行大屏应用的开发,通过本实验,您将能够:

  • 熟悉华为云服务,了解 Astro Canvas 基本功能、部分组件和应用模板;
  • 了解 Astro Canvas 大屏应用开发的整体流程,数据创建-组件应用-添加交互-应用发布;
  • 利用华为云 Astro Canvas 的模板资源,完成个性可视化大屏的操作。

实验介绍

  • 项目名称:华为云 Astro Canvas 个性化搭建汽车展示大屏

  • 项目简介:在 Astro Canvas 汽车大屏模板上,进行个性化操作

  • 开发语言:不需要

  • 涉及云服务:华为云 Astro

  • 项目示例:

前提条件

本实验需在华为云上进行,所以用户需要使用华为帐号进行登录;没有华为帐号的用户请先注册华为帐号并开通华为云,同时完成实名认证,实验过程中请使用Chrome浏览器(建议使用116.0、115.9或115.8三个版本)完成相关操作。

华为帐号注册步骤请参考:

https://support.huaweicloud.com/usermanual-account/account_id_001.html

实名认证操作步骤请参考:

https://support.huaweicloud.com/usermanual-account/zh-cn_topic_0077914254.html

已有帐号或注册完成的用户登录华为云官网:https://www.huaweicloud.com/

华为云登录请参考:

https://support.huaweicloud.com/usermanual-iam/iam_01_0033.html

操作流程

操作指导

开通 Astro Canvas 基础版免费试用

本次实验使用 Astro Canvas 基础版即可完成,点击链接“【限时特惠】产品新用户免费试用1个月,立即体验!”,完成免费资源领取。

支付完成后,回到Astro Canvas 主页,点击“立即使用”,再“进入首页”

创建静态数据数据集

在下载汽车模板之前,我们需要先准备好数据。这里我们会用到静态数据的Excel表格导入。大家可以从浏览代码中下载文档提供的Excel表格模板:

在主菜单中,选择“数据中心”,在左侧导航栏中,选择“数据集 > 全部 > 我创建的”。在数据集管理页面,单击“新建数据集”。

70ECEEA-010C-4B80-AFAB-5B07E92DB5F9.png

在新建数据集页面,“数据来源”选择“静态数据”。

“目录”选“预置分类”,“数据集名称”可以自定义,这里可以写“汽车参数表”。

然后点击新增静态数据,将本地Excel文件(文件大小不能超过512KB)拖入“上传文件”中,单击“保存”。

F00E0B0A-40EC-4E62-9224-3E047FAA4155.png

AA0F248B-E770-484C-9620-DFBF8A1D22C2.png

上传完成后,能看到右侧的数据配置,点击保存即可。

38254098-8FE0-4183-99CC-E88439BA8FBF.png

备注:除了Excel导入,静态数据还可以手工输入:在数据配置页面,单击https://support.huaweicloud.com/usermanualcanvas-astrozero/zh-cn_image_0000001614420398.png,输入对应数据。若需要添加列或行,可单击“添加列/行”,新增列和行,也可以对导入的数据进行修改。Astro Canvas支持关系型数据库、Roma连接器、DLI、DWS、Astro Zero和Http连接器等多种数据来源。>>查看更多数据接入方法介绍

创建 Astro Canvas 数据大屏项目

数据集创建完成后,在主菜单中,选择“项目列表”返回 Astro Canvas 项目列表页面。选择“查看所有”模板,找到“汽车展示”模板,点击“使用此模板”。

输入“项目名称”、“页面标题”,即可进入该模板应用。

个性化大屏创建

首先,我们学习如何在组件中使用数据集

鼠标双击基本柱图,上方会出现一些配置项,点击“数据”组件按钮。

选择“数据类型”-“数据集”,选择汽车参数表。

然后点击组件预览,可以看到表格字段,将左侧的表格字段,分别放到配置项的X轴数据和Y轴数据,可以看到预览效果,点击保存。

然后,然后可以对柱状图样式进行编辑,如图形颜色、柱条宽度、图例标记等,具体可以参考:Astro 基本柱图组件介绍

这样,属于你的个性化的大屏就完成了。

用同样的方式,我们还可以对报价的通用表格进行编辑创作。感兴趣的小伙伴可以自由发挥,这里不再赘述。备注:更多产品组件使用请查看组件管理

接下来,我们可以添加交互事件, 在画布单击“预约试驾”,然后左上角的图层,找到“文本编辑”,单击交互按钮,即可进入交互事件页面。

按照下图,输入必选参数等选项,单击“确定”、“完成”,即可保存退出。

4AA9F36B-F6D7-437F-BC1B-7BF716945129.png

单击保存后,再单击预览,可查看交互事件是否生效。以下三个按钮分别是保存、预览、发布。

交互事件生效后,单击“发布”,勾选“发布链接”,即可发布成功。这里可以设置访问限制,支持分享码访问,Token认证,内容安全策略等设置。

页面发布成功后,可以单击左上角退出到项目列表页,选择自己的项目进行发布。项目发布可以填写版本号进行项目管理。

单击“新建版本”,输入必选项,勾选发布的页面单击“确定”。

确定后项目就发布完成了。

关闭项目发布页面,在项目列表中单击项目上的,可预览发布后的项目,也可以将创建的模板分享到社交平台。