华为云低代码平台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

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

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

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

相关文章

华为QinQ技术的基本qinq和灵活qinq 2种配置案例

基本qinq配置: 运营商pe设备在收到同一个公司的ce发来的的包,统一打上同样的vlan ,如上图,同一个家公司两边统一打上vlan 2,等于在原内网vlan 10或20过来的包再统一打上vlan 2的标签,这样传输就不会和其它…

Stable Diffusion教程(6) - 图片高清放大

放大后细节 修复图片损坏 显存占用 速度 批量放大 文生图放大 好 是 高 慢 否 附加功能放大 一般 否 中 快 是 图生图放大 好 是 低 慢 是 tile模型放大 非常好 是 高 快 是 通过文生图页面的高清修复 优点:放大时能添加更多细节&am…

道本科技受邀参加建筑产业互联网推动建筑产业现代化体系构建座谈会,以数字化产品为建筑行业注入新动能!

2023年7月底,道本科技作为中国建筑业协会合作伙伴,受邀参加了建筑产业互联网推动建筑产业现代化体系构建座谈会。在这次座谈会上,道本科技旗下产品“合规数”“合同智能审查”和“智合同范本库”被中国建筑(中小企业)产…

HTML5中的data-*属性

介绍&#xff1a; data-*全局属性是一类被称为自定义数据属性的属性&#xff0c;它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力。 data-*的使用 <div class"child" data-name"小红" data-age"18"></div> 在js里有两种获…

【办公自动化】使用Python一键提取PDF中的表格到Excel(文末送书5本)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项

一、实际工作中需要对转换选项细化内容 在昨天我们实现了最简单的半角字符和全角字符相互转换功能&#xff0c;就是将英文字母、阿拉伯数字、标点符号、空格全部进行转换。 在实际工作中&#xff0c;我们有时只想英文字母、阿拉伯数字、标点符号、空格之中的一两类进行转换&a…

python中计算2的32次方减1,python怎么算2的3次方

大家好&#xff0c;给大家分享一下怎么样用python编写2的n次方,n由键盘输入&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; ---恢复内容开始--- 1、内置函数&#xff1a;取绝对值函数abs() 2、内置函数&#xff1a;取最大值max()&#xff…

uniapp 返回上一页并刷新

如要刷新的是mine页面 在/pages/mine/improveInfo页面修改信息&#xff0c;点击保存后跳转到个人中心&#xff08;/pages/mine/index&#xff09;页面并刷新更新数据 点击保存按钮时执行以下代码&#xff1a; wx.switchTab({url: /pages/mine/index }) // 页面重载 let pages …

Socks IP轮换:为什么是数据挖掘和Web爬取的最佳选择?

在数据挖掘和Web爬取的过程中&#xff0c;IP轮换是一个非常重要的概念。数据挖掘和Web爬取需要从多个网站或来源获取数据&#xff0c;而这些网站通常会对来自同一IP地址的请求进行限制或封锁。为了避免这些问题&#xff0c;数据挖掘和Web爬取过程中需要使用Socks IP轮换技术。在…

css实现,正常情况下div从左到右一次排列,宽度超出时,右侧最后一个div固定住,左侧其他div滚动

需求:正常情况下 宽度超出时: 实现: <templete><div class"jieduanbox"><div v-for"(item, index) in stageList" :key"index" style"display: inline-block">.......</div><div class"rightBtn&q…

“科创中国”青百会轮值主席吴甜:以大语言模型为代表的AI将引发产业变革

8月1日&#xff0c;“科创中国”青年百人会&#xff08;后文简称青百会&#xff09;联合百度举办“青创汇”高端对话&#xff0c;围绕人工智能技术创新与产业发展交流研讨&#xff0c;同时正式成立“科创中国”青年百人会女性工作委员会。该委员会将鼓励更多女性投身科技创新事…

供水管网漏损监测,24小时保障城市供水安全

供水管网作为城市生命线重要组成部分&#xff0c;其安全运行是城市建设和人民生活的基本保障。随着我国社会经济的快速发展和城市化进程的加快&#xff0c;城市供水管网的建设规模日益增长。然而&#xff0c;由于管网老化、外力破坏和不当维护等因素导致的供水管网漏损&#xf…

算法与数据结构(五)--树【1】树与二叉树是什么

一.树的定义 树是一个具有层次结构的集合&#xff0c;是由一个有限集和集合上定义的一种层次结构关系构成的。不同于线性表&#xff0c;树并不是线性的&#xff0c;而是有分支的。 树&#xff08;Tree&#xff09;是n&#xff08;n>0&#xff09;个结点的有限集。 若n0&…

Stephen Wolfram:机器学习与神经网络训练

Machine Learning, and the Training of Neural Nets 机器学习与神经网络训练 We’ve been talking so far about neural nets that “already know” how to do particular tasks. But what makes neural nets so useful (presumably also in brains) is that not only can t…

测试人员简单使用Jenkins

一、测试人员使用jenkins干什么&#xff1f; 部署测试环境 二、相关配置说明 一般由开发人员进行具体配置 1.Repository URL&#xff1a;填写git地址 2.填写开发分支&#xff0c;测试人员可通过相应分支进行测试环境的构建部署 当多个版本并行时&#xff0c;开发人员可以通过…

【51单片机】晨启科技,7针OLED显示驱动程序,STC89C52RC

文章目录 原理图oled.coled.hmain.c 原理图 sbit OLED_SCLP4^3;//SCL-D0 sbit OLED_SDAP4^1;//SDA-D1 sbit OLED_RES P3^6;//RES sbit OLED_DC P3^7;//DC sbit OLED_CSP2^7; //CS oled.c #include "OLED.h"//******************************说明*******************…

如何维护你的电脑:打造IT人的重要武器

文章目录 方向一&#xff1a;介绍我的电脑方向二&#xff1a;介绍我的日常维护措施1. 定期清理和优化2. 保持良好的上网习惯和安全防护3. 合理安排软件和硬件的使用4. 数据备份和系统还原 方向三&#xff1a;推荐的维护技巧1. 数据分区和多系统安装2. 内部清洁和散热优化3. 安全…

war包方式安装linux和windows的geoserver

注意&#xff1a; 从Java 9开始&#xff0c;Oracle已经不再单独提供JRE&#xff08;Java Runtime Environment&#xff09;了&#xff0c;而是直接将JRE集成在JDK&#xff08;Java Development Kit&#xff09;中。这是因为JRE包含了运行Java程序所需的环境&#xff0c;而JDK除…

图解java.util.concurrent并发包源码系列——深入理解ReentrantLock,看完可以吊打面试官

图解java.util.concurrent并发包源码系列——深入理解ReentrantLock&#xff0c;看完可以吊打面试官 ReentrantLock是什么&#xff0c;有什么作用ReentrantLock的使用ReentrantLock源码解析ReentrantLock#lock方法FairSync#tryAcquire方法NonfairSync#tryAcquire方法 Reentrant…

(7.28-8.3)【大数据新闻速递】《数字孪生工业软件白皮书》、《中国绿色算力发展研究报告》发布;华为ChatGPT要来了

【数字孪生工业软件白皮书&#xff08;2023&#xff09;】 近日&#xff0c;第七届数字孪生与智能制造服务学术会议成功举行&#xff0c;2023《数字孪生工业软件白皮书》在会上正式发布。《白皮书》在《Digital Twin》国际期刊专家顾问委员会指导下&#xff0c;由国家重点研发计…