华为云低代码平台Astro Canvas 搭建汽车展示大屏——实验指导手册

实验背景

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

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

本次实验资源需开通Astro免费试用:

  1. 点击免费试用Astro Canvas基础版:

实验目的

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

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

实验介绍

  1. 项目名称:Astro Canvas 汽车展示大屏搭建
  2. 项目简介:在Astro Canvas汽车大屏模板上,进行个性化操作
  3. 开发语言:不需要
  4. 涉及云服务:华为云Astro
  5. 项目示例

1.png

前提条件

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

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

注册华为帐号并开通华为云_帐号中心_用户指南_华为云

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

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

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

华为云登录请参考:

登录华为云_统一身份认证服务 IAM_用户指南_华为云

操作流程

0.PNG

操作指导

开通Astro Canvas基础版免费试用

本次实验使用Astro Canvas基础版即可完成,单击链接“申请免费试用Astro Canvas”,完成免费资源领取。

2.png

3.png

4.png

5.png

支付完成后,点击进入首页

6.png

创建静态数据数据集

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

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

7.png

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

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

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

8.png

9.png

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

10.png

11.png

备注:除了Excel导入,静态数据还可以手工输入:在数据配置页面,单击

000.png

输入对应数据。若需要添加列或行,可单击“添加列/行”,新增列和行,也可以对导入的数据进行修改。>>查看更多数据接入方法介绍

12.png

创建Astro Canvas数据大屏项目

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

13.png

14.png

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

15.png

个性化大屏创建

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

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

16.png

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

17.png

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

18.png

19.png

20.png

然后,可以对柱状图样式进行编辑。参考:Astro基本柱图组件介绍

21.png

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


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

23.png

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

24.png

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

25.png

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

26.png

交互事件生效后,单击“发布”,勾选“发布链接”,即可发布成功。

27.png

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

28.png

29.png

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

30.png

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

31.png

关闭项目发布页面,在项目列表中单击项目上的

00.png

可预览发布后的项目,也可以将创建的模板分享到社交平台。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/55450.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构——绪论

一、绪论 (一)基本概念 数据:数据是对客观事物的符号表示,在计算机科学中是指所有能输入到计算机中并被计算机程序处理的符号的总称。 数据元素:数据元素是数据的基本单位,在计算机程序中通常作为一个整…

消息队列总结(4)- RabbitMQ Kafka RocketMQ高性能方案

1.RabbitMQ的高性能解决方案 1.1 发布确认机制 RabbitMQ提供了3种生产者发布确认的模式: 简单模式(Simple Mode):生产者发送消息后,等待服务器确认消息已经被接收。这种模式下,生产者发送消息后会阻塞&am…

学习系统编程No.34【线程同步之信号量】

引言: 北京时间:2023/7/29/16:34,一切尽在不言中,前几天追了几部电视剧,看了几部电影,刷了n个视屏,在前天我们才终于从这快乐的日子里恢复过来,然后看了两节课,也就是上…

真机搭建中小网络

这是b站上的一个视频,演示了如何搭建一个典型的中小网络,供企业使用 一、上行端口:上行端口就是连接汇聚或者核心层的口,或者是出广域网互联网的口。也可理解成上传数据的端口。 二、下行端口:连接数据线进行下载的端…

Scratch Blocks自定义组件之「旋律播放」

一、背景 看到microbit edit有旋律编辑器,就在scratch块中也写了一个,如下图所示 这是我写的 这是Micro:bit的 二、功能配置说明 支持8个音符8拍旋律控制 三、使用说明 (1)引入添加field_tone.js到core文件夹中,代码在…

信息系统网络安全整改方案

第1章 项目概述 1.1 项目目标 本方案将通过对公司网络信息系统的安全现状进行分析工作,参照国家信息系统等级保护要求,找出信息系统与安全等级保护要求之间的差距,给出相应的整改意见,推动 XX 企业公司网络信息系统安全整改工作的…

计算机毕设 深度学习手势识别 - yolo python opencv cnn 机器视觉

文章目录 0 前言1 课题背景2 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 3 YOLOV53.1 网络架构图3.2 输入端3.3 基准网络3.4 Neck网络3.5 Head输出层 4 数据集准备4.1 数据标注简介4.2 数据保存 5 模型训练5.1 修…

与“云”共舞,联想凌拓的新科技与新突破

伴随着数字经济的高速发展,IT信息技术在数字中国建设中起到的驱动和支撑作用也愈发凸显。特别是2023年人工智能和ChatGPT在全球的持续火爆,更是为整个IT产业注入了澎湃动力。那么面对日新月异的IT信息技术,再结合疫情之后截然不同的经济环境和…

【抖音小游戏】 Unity制作抖音小游戏方案 最新完整详细教程来袭【持续更新】

前言 【抖音小游戏】 Unity制作抖音小游戏方案 最新完整详细教程来袭【持续更新】一、相关准备工作1.1 用到的相关网址1.2 注册字节开发者后台账号 二、相关集成工作2.1 下载需要的集成资源2.2 安装StarkSDK和starksdk-unity-tools工具包2.3 搭建测试场景 三、构建发布3.1 发布…

【深度学习】MAT: Mask-Aware Transformer for Large Hole Image Inpainting

论文:https://arxiv.org/abs/2203.15270 代码:https://github.com/fenglinglwb/MAT 文章目录 AbstractIntroductionRelated WorkMethod总体架构卷积头Transformer主体Adjusted Transformer Block Multi-Head Contextual Attention Style Manipulation Mo…

探索Vue组件通信的秘密:打破隔阂,实现数据共享

一、Vue组件通信 每个组件都有自己的数据, 提供在data中, 每个组件的数据是独立的, 组件数据无法互相直接访问 (合理的)但是如果需要跨组件访问数据, 就需要用到组件通信 要是有一万个商品????就要写一万个吗?函数调用…

KubeSphere 3.4.0 发布:支持 K8s v1.26

2023 年 07 月 26 日,KubeSphere 开源社区激动地向大家宣布,KubeSphere 3.4.0 正式发布! 让我们先简单回顾下之前三个大版本的主要变化: KubeSphere 3.1.0 新增了“边缘计算”、“计量计费” 等功能,将 Kubernetes 从…

myeclipse的Debug模式

1.表示当前实现继续运行直到下一个断点,快捷键为F8。 2.表示打断整个进程 3.表示进入当前方法,快捷键为F5。 4.表示运行下一行代码,快捷键为F6。 5.表示退出当前方法,返回到调用层,快捷键为F7。 6.表示当前线程的…

kotlin 编写一个简单的天气预报app(五)增加forcast接口并显示

参考资料 OpenWeatherMap提供了一个/forecast接口,用于获取未来几天的天气预报。你可以使用HTTP GET请求访问该接口,并根据你所在的城市或地理坐标获取相应的天气数据。 以下是一个示例请求的URL和一些常用的参数: URL: http://api.openwe…

我的创作纪念日——256天

机缘 最开始我写博客没有什么特别的原因,主要是因为以下几点: 练习自己的语言组织能力 记录自己学习生活中学到的知识 为和我同一个学习阶段的朋友提供帮助 事实上最开始我根本不指望我的博客有多少人看,主要是想找一个好的保存 Markdown 笔…

花费7元训练自己的GPT 2模型

在上一篇博客中,我介绍了用Tensorflow来重现GPT 1的模型和训练的过程。这次我打算用Pytorch来重现GPT 2的模型并从头进行训练。 GPT 2的模型相比GPT 1的改进并不多,主要在以下方面: 1. GPT 2把layer normalization放在每个decoder block的前…

PHP最简单自定义自己的框架(一)

为啥要定义自己的框架: 定制化需求:每个项目都有不同的需求和特点,使用通用的框架可能无法满足所有的要求。自定义框架可以根据具体需求进行定制,提供更加灵活和符合项目需求的解决方案。学习和成长:自定义框架是一个很…

STM32存储左右互搏 I2C总线读写EEPROM ZD24C1MA

STM32存储左右互搏 I2C总线读写EEPROM ZD24C1MA 在较低容量存储领域,EEPROM是常用的存储介质,不同容量的EEPROM的地址对应位数不同,在发送字节的格式上有所区别。EEPROM是非快速访问存储,因为EEPROM按页进行组织,在连…

一文搞懂Redis架构演化之路

目录 从最简单的开始:单机版 Redis 数据持久化:有备无患 主从复制:多副本 哨兵:故障自动切换 分片集群:横向扩展 总结 这篇文章我想和你聊一聊 Redis 的架构演化之路。 现如今 Redis 变得越来越流行,…

图为科技加入深圳市智能交通行业协会 ,打 …

图为科技加入深圳市智能交通行业协会,打造智能交通新生态! 交通是国民经济发展的“大动脉”,交通拥堵、事故频发等问题不仅影响了人们的出行体验,也对经济的发展产生了负面影响。安全、高效、便捷的出行,一直是人们的…