华为云低代码平台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里有两种获…

javaScript 树形结构 递归查询方法。

1. 函数递归定义 程序调用自身的编程技巧称为递归&#xff08; recursion&#xff09;。 2.使用条件 1.存在限制条件&#xff0c;当满足这个限制条件的时候&#xff0c;递归便不再继续。 2.每次递归调用之后越来越接近这个限制条件。 3.既然是自己调用自己&#xff0c;那么整个…

【问题解决】mysql 数据库字符串分割之后多行输出方法

背景&#xff1a; 项目需要从一张表查询出来数据插入到另一张表&#xff0c;其中有一个字段是用逗号分隔的字符串&#xff0c;需要多行输入到另一张表&#xff0c;那么这个如何实现呢 方案&#xff1a; 下面先粘贴下sql语句&#xff1a; select SUBSTRING_INDEX(SUBSTRING_…

选数(c++题解)

题目描述 已知 n 个整数 x1​,x2​,⋯,xn​&#xff0c;以及 1 个整数 kk&#xff08;k<nk<n&#xff09;。从 nn 个整数中任选 kk 个整数相加&#xff0c;可分别得到一系列的和。例如当 n4&#xff0c;k3&#xff0c;4 个整数分别为 3,7,12,19 时&#xff0c;可得全部的…

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

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

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

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

用Rust实现23种设计模式之建造者模式

当使用 Rust 实现建造者模式时&#xff0c;我们可以通过结构体和方法链来实现。建造者模式是一种创建型设计模式&#xff0c;它允许你按照特定的顺序构建复杂对象&#xff0c;同时使你能够灵活地构建不同的变体。下面是一个使用 Rust 实现建造者模式的示例&#xff0c; 在示例中…

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

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

JAVA-@Configuration注解属性proxyBeanMethods

Configuration注释中的proxyBeanMethods参数是springboot1.0&#xff0c;升级到springboot2.0之后新增的比较重要的内容&#xff0c;该参数是用来代理bean的。 理论 首先引出两个概念&#xff1a;Full 全模式&#xff0c;Lite 轻量级模式 Full(proxyBeanMethods true) :pro…

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…

ATF(TF-A)安全通告

目录计划如下&#xff0c;相关内容补充中&#xff0c;待完成后进行超链接&#xff0c;敬请期待&#xff0c;欢迎关注 1、Advisory TFV-1 (CVE-2016-10319) 2、Advisory TFV-2 (CVE-2017-7564) 3、Advisory TFV-3 (CVE-2017-7563) 4、Advisory TFV-4 (CVE-2017-9607) 5、Adviso…

Docker root用户的pip使用方法

Docker下root用户 pip install XX 显示pip命令不存在 # 原始目标&#xff1a;pip install XX pip install --root-user-actionignore 【XX】# (要安装的包)参考&#xff1a;WARNING: Running pip as the ‘root‘ user can result in broken permissions Linux 中 root 与 su…

【Python:json常用函数,用于加载和保存json文件】load(), loads(), dump(), dumps()

文章目录 1、load()2、loads()3、dump()4、dumps() json文件为javascript object Notation文件&#xff0c;属于轻量级的数据交换格式&#xff0c;可以用于存储和交换数据。json文件是由类似{ }的key-value映射组成。 1、load() 把json文件加载为Python的数据格式&#xff0c…

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

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

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

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