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

news2024/11/15 11:11:28

实验背景

大屏应用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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Docker】Docker安装Consul

文章目录 1. 什么是Consul2. Docker安装启动Consul 点击跳转:Docker安装MySQL、Redis、RabbitMQ、Elasticsearch、Nacos等常见服务全套(质量有保证,内容详情) 1. 什么是Consul Consul是HashiCorp公司推出的开源软件,提…

JVM面试题--类加载器

什么是类加载器,类加载器有哪些 类加载子系统,当java源代码编译为class文件之后,由他将字节码装载到运行时数据区 BootStrap ClassLoader 启动类加载器或者叫做引导类加载器,是用c实现的,嵌套在jvm内部,…

站群站点日志优化

需求: 1,每个站点的日志需要记录到请求的域名 2,日志需要自动切割保存前三天的内容,防止日志无限增长 3,日志要有利于二次分析 实现: 1,nginx需要修改两个地方 nginx配置 时间 …

JavaScript(二)函数及对象

函数 函数体中return后面不能再添加任何代码&#xff0c;因为不会执行 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&quo…

【论文阅读24】Better Few-Shot Text Classification with Pre-trained Language Model

论文相关 论文标题&#xff1a;论文标题&#xff1a;Label prompt for multi-label text classification&#xff08;基于预训练模型对少样本进行文本分类&#xff09; 发表时间&#xff1a;2021 领域&#xff1a;多标签文本分类 发表期刊&#xff1a;ICANN&#xff08;顶级会…

PyCharm安装使用2023年教程,PyCharm与现流行所有编辑器对比。

与PyCharm类似的功能和特性的集成开发环境&#xff08;IDE&#xff09;和代码编辑器有以下几种&#xff1a; Visual Studio Code&#xff08;VS Code&#xff09;&#xff1a;由Microsoft开发&#xff0c;VS Code是一个高度可定制和可扩展的代码编辑器。它支持多种编程语言&am…

动手学深度学习(一)预备知识

目录 一、数据操作 1. N维数组样例 2. 访问元素 3. 基础函数 &#xff08;1&#xff09; 创建一个行向量 &#xff08;2&#xff09;通过张量的shape属性来访问张量的形状和元素总数 &#xff08;3&#xff09;reshape()函数 &#xff08;4&#xff09;创建全0、全1、…

机器学习笔记之优化算法(六)线搜索方法(步长角度;非精确搜索;Glodstein Condition)

机器学习笔记之优化算法——线搜索方法[步长角度&#xff0c;非精确搜索&#xff0c;Glodstein Condition] 引言回顾&#xff1a; Armijo Condition \text{Armijo Condition} Armijo Condition关于 Armijo Condition \text{Armijo Condition} Armijo Condition的弊端 Glodstein…

开源项目-知识库管理系统(中国软件杯项目)

简述 哈喽,大家好,今天带来一个开源项目-知识库管理系统,项目通过Spring MVC技术实现。通过readme了解到这是某位大神大三暑假(2016年)参加第五届中国软件杯项目的源码。由三人团队完成(Yu yufeng\Zhou changqin\Liu chenzhe) 此作品获得了本科组全国二等奖。项目本身用…

ROS处理kitti数据集

一、参考资料 kitti2bag代码仓库 二、KITTI数据集之tracking数据集 ROS1结合自动驾驶数据集Kitti开发教程(七)下载图像标注资料并读取显示 1. tracking数据集简介 tracking tracking任务分为三种类型&#xff0c;分别是Multi-Object Tracking&#xff08;多目标跟踪&…

2023牛客暑期多校训练营5-C Cheeeeen the Cute Cat

2023牛客暑期多校训练营5-C Cheeeeen the Cute Cat https://ac.nowcoder.com/acm/contest/57359/C 文章目录 2023牛客暑期多校训练营5-C Cheeeeen the Cute Cat题意解题思路兰道定理&#xff1a; 代码 题意 解题思路 可以将边 ( i , j n ) (i,jn) (i,jn)转变成 ( i , j ) (…

项目管理中的需求分析:实施策略与最佳实践

引言 在项目管理的过程中&#xff0c;需求分析起着至关重要的作用。理解和定义项目需求是项目成功的关键一步&#xff0c;它可以帮助我们确定项目的目标和范围&#xff0c;以及如何有效地达到这些目标。在本文中&#xff0c;我们将深入探讨需求分析的重要性&#xff0c;讨论如…

使用 AntV X6 + vue 实现单线流程图

使用 AntV X6 vue 实现单线流程图 X6 是 AntV 旗下的图编辑引擎&#xff0c;提供了一系列开箱即用的交互组件和简单易用的节点定制能力&#xff0c;方便我们快速搭建 DAG 图、ER 图、流程图等应用。 官方文档 安装 yarn add antv/x61.34.6Tips&#xff1a; 目前 X6 有 1.x…

css滚动条样式指南

css滚动条样式指南 滚动条是网页设计中经常被忽视的元素。虽然它看起来像是一个小细节&#xff0c;但它在网站导航中起着至关重要的作用。默认的滚动条可能看起来不合适&#xff0c;有损整体美观。本文将介绍如何使用 CSS 自定义滚动条。 在 Chrome、Edge 和 Safari 中设置滚…

微信小程序接入腾讯云天御验证码

腾讯云新一代行为验证码&#xff08;Captcha&#xff09;&#xff0c;基于十道安全防护策略&#xff0c;为网页、APP、小程序开发者打造立体、全面的人机验证。在保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时&#xff0c;提供更精细化的用户体验。 …

Uniapp_app端使用重力感应实现横屏竖屏自动切换

1、进入页面默认是竖屏当手机横着的时候页面也跟着横着 进入页面开启定时器调用相关api去触发横屏竖屏&#xff0c;主要核心代码都在onShow()里面和onHide()里 <template> <view class"monitor"><u-no-network></u-no-network><web-view …

6.使用typeof注释,只读修饰符

目录 1 使用typeof注释 2 只读修饰符 readonly 2.1 在类中使用 2.2 在接口中使用 2.3 在很多的地方都能使用 1 使用typeof注释 比如我就像传入像 p 这个变量的样子的参数 如果你给的不是这个样子的就会报错 也可以这样用 ts中的typeof后面不能跟未定义返回值类型的…

金融学复习博迪(第1-5章)

第一部分 金融和金融体系 第1章 金融学 金融&#xff1a;资金的流通&#xff0c;即储蓄&#xff0c;信贷、汇兑、股票和证券交易等经济活动的总称。 金融学&#xff1a;研究货币流通的学问。 传统的金融学研究领域大致有两个方向&#xff1a; >宏观层面的金融市场运行理论…

k8s概念-深入pod

回到目录 工作负载&#xff08;workloads&#xff09; 工作负载&#xff08;workload&#xff09;是在kubernetes集群中运行的应用程序。无论你的工作负载是单一服务还是多个一同工作的服务构成&#xff0c;在kubernetes中都可以使用pod来运行它 workloads分为pod与control…

Android 13(T) - Media框架(2)- MediaPlayer与native的串接 libmedia

这一节学习有两个目标&#xff1a; 1 熟悉Android Media API的源码路径与调用层次 2 从MediaPlayer的创建与销毁了解与native的串接 1、源码路径 Media相关的API位于&#xff1a;frameworks/base/media/java/android/media&#xff0c;里面提供有MediaPlayer MediaCodecList M…