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

这篇具有很好参考价值的文章主要介绍了华为云低代码平台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. 项目示例

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

前提条件

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

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

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

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

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

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

华为云登录请参考:

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

操作流程

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

操作指导

开通Astro Canvas基础版免费试用

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

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

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

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

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

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

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

创建静态数据数据集

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

创建Astro Canvas数据大屏项目

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

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

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

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

个性化大屏创建

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

可预览发布后的项目,也可以将创建的模板分享到社交平台。文章来源地址https://www.toymoban.com/news/detail-625985.html

到了这里,关于华为云低代码平台Astro Canvas 搭建汽车展示大屏——实验指导手册的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何一键展示全平台信息?Python手把手教你搭建自己的自媒体展示平台

    灵感源于之前写过的Github中Readme.md中可以插入自己的js图片和动态api解析模块,在展示方面十分的美观: 这方面原理可以简化为,在Markdown中,你可以使用HTML标签来添加图像,就像这样: 具体来说,你可以使用 img 标签来嵌入图像,并使用 src 属性指定图像的URL。我们可以通

    2024年04月09日
    浏览(41)
  • 《低代码指南》——维格云低代码模板中心

    目录 1. 简介 1.1 功能简介 1.2 应用场景 2. 模板中心入口 2.1 新建应用 2.2 工作台 3. 模板安装 4. 意见征集 1.1 功能简介 为了让大家更快速的熟悉应用搭建,LCHub维格云为大家提供了模板中心。通过从模板中心安装使用与自己工作相匹配的模版,可以加快应用搭建的进程,除此之

    2024年02月09日
    浏览(30)
  • 《低代码指南》——维格云低代码应用管理

    目录 1. 简介 1.1 功能简介 1.2 应用场景 1.3 快速使用 2. 创建入口 3. 应用删除与恢复 1.1 功能简介 在使用过程中,可以把一个应用理解为 一个包含各种表单和仪表盘、具备一定功能的系统 。 1.2 应用场景 如可以创建一个应用,命名为「人事管理系统」,在此应用中创建「入职

    2024年02月10日
    浏览(42)
  • Astro + Vercel 快速搭建自己的博客网站

    Astro 和 Vercel 彼此相得益彰,前者提供出色的开发者体验,用于构建现代静态站点,而后者负责部署和托管代码。 两者结合我们就可以轻轻松松 零成本 搭建自己的博客网站。查看示例。 如果对原项目感兴趣,可以查看源码。 在部署博客之前,我们先创建一个用于评论的 g

    2024年02月14日
    浏览(27)
  • 《低代码指南》——维格云低代码应用基础设置方法

    目录 1. 简介 1.1 功能简介 1.2 设置条件 2. 应用设置 2.1 设置入口 2.2 修改应用信息 2.4 复制应用 2.5 应用的删除与恢复 3. 应用排序 4. 应用访问

    2024年02月08日
    浏览(26)
  • 《低代码指南》——维格云低代码系统超量超限处理方案

    目录 1. 简介 1.1 超限情况简介 1.2 超限场景 2. 系统用量查看 2.1 系统查看 2.2 功能提示 3. 用量超限处理方案 3.1 不付费处理方案 3.2 付费处理方案 4

    2024年02月09日
    浏览(28)
  • 毕业季 | 程序员初入职场必备软件开发神器,华为云Astro带你开启新篇章

    摘要: 5分钟写出应用,10分钟开发大屏,新手程序员必学技能之华为云Astro,快来get。 本文分享自华为云社区《毕业季 | 程序员初入职场必备软件开发神器,华为云Astro带你开启新篇章》,作者:华为云社区精选 。 这一届初入IT职场的毕业生有多难? 既要在“最难”就业季

    2024年02月11日
    浏览(44)
  • 多语言对接电商平台api接口获取京东商品评论数据代码展示示例

    商品评论接口的意义: 确认消费者关注与产品卖点是否一致; 洞察用户对价格、促销、直播的敏感度;发现产品质量、客服、物流等方面的问题;找到品牌宣称与用户预期、实际场景之间差异化;挖掘消费者偏好的差异性,进行用户分群偏好研究;还原客户故事,分析其购

    2024年02月11日
    浏览(33)
  • 华为私有云平台FusionCompute搭建

                           一、FusionCompute架构 架构CNA作为虚拟化操作系统,VRM作为虚拟化管理平台   正常主机都安装CNA,单独建立VRM集群作为管理集群,我测试环境就一台主机,所以CNA和VRM装在同一台主机上,并且用这台主机分配虚拟机进行测试。 二、安装VRM 1、VRM安

    2024年02月04日
    浏览(27)
  • 15. Canvas制作汽车油耗仪表盘

    1. 说明 本篇文章在14. 利用Canvas组件制作时钟的基础上进行一些更改,想查看全面的代码可以点击链接查看即可。 效果展示: 2. 整体代码

    2024年02月11日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包