检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
使用页面模板文件新建页面 创建移动端页面操作和大屏&PC端页面相同,本章节以创建大屏&PC端页面为例进行介绍。 操作场景 使用页面模板文件,构建开发页面,减少重复开发,提高交付效率。 前提条件 已获取对应的页面模板文件,详情请参见下载当前页面。
如何基于页面级的全局变量实现组件交互 AstroCanvas支持设置页面级的全局变量,通过页面组件间的交互,可给全局变量赋值。本章节将以开发一个告警监控页面为例,逐步介绍如何开发一个基于全局变量的交互页面。
移动页面 操作场景 通过移动页面,将页面移动到其他文件夹中,便于页面集中管理。 操作步骤 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在项目列表中,单击页面所在的项目,进入项目。 将鼠标放在对应的页面上,单击,选择“移动”。
输入页面标题,单击“新建”。 复制成功后,系统自动进入开发页面。 图1 输入页面标题 父主题: 页面管理
页面删除后,不可恢复,删除前请确认无需再使用该页面。 父主题: 页面管理
图1 编辑页面设置 页面标题:输入页面的标题,长度为1~100个字符。 页面描述:通常设置为页面的功能或使用场景。 父主题: 页面管理
初识开发页面 可视化开发页面 AstroCanvas一站式数据可视化开发页面,由可视化组件、图层、页面数据集、画布、功能按钮和主题六个区域组成,各区域功能介绍请参见表1。
图4 选择模板创建页面 输入页面标题,单击“新建”,即可完成页面的创建。 您可以直接使用该页面,也可以根据自身业务的需求进行二次开发。 单击页面上方的,保存页面。 单击页面上方的,预览应用页面。 如果页面预览效果和预期效果不一致,可再次返回开发页面进行调整。
在项目列表中,单击页面所在的项目,进入项目。 在所有页面中,单击待下载的页面。 单击“编辑页面”,进入大屏开发页面。 在页面上方工具栏中,单击,即可将当前页面下载到本地。 下载到本地的页面模板文件命名为“当前页面的名称”.page。
管理页面版本 使用AstroCanvas开发大屏、移动端页面,支持通过管理页面版本,设置发布具体哪个版本的页面或者回退到具体哪个版本的页面进行开发。 操作场景 在AstroCanvas中,如下两个场景会使用到页面版本: 场景一:开发者开发好第一个页面版本后,发布呈现给用户。
发布页面 操作场景 通过发布功能,无需进入开发页面,即可获取页面的访问地址。 操作步骤 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在项目列表中,单击页面所在的项目,进入项目。 将鼠标放在待发布的页面上,单击,进行页面发布设置。
在项目列表中,单击已创建项目的名称,进入对应的项目页面。 在项目页面,单击“新建页面”。 在新建页面中,单击“新建空白页面”。 输入页面标题,单击“新建”。 页面标题的长度范围为1~100个字符。 拖入组件,根据业务需求开发页面。 页面创建完成后,单击页面上方的,保存页面。
下面以开发网站中常用的柱状图(vue2+Echarts)组件为例,向您介绍如何开发自定义组件。 本节使用的示例组件开发过程中使用了前端开发框架Vue及Echarts,请提前了解。 图1 最终呈现效果 操作步骤 下载图表模板。
创建页面 初识开发页面 使用空白画布新建页面 使用模板新建页面 使用页面模板文件新建页面
管理页面 管理组件模板 桥接器模板 查看操作日志
轮播页面 轮播页面是指通过页面轮播的方式,来实现页面广告的展示。 在大屏设计页面,从“全部组件 > 媒体”中,拖拽“轮播页面”组件至画布空白区域,如图1。
页面管理 复制页面 发布页面 页面设置 删除页面 移动页面 发布为首页 下载当前页面 发布为模板 发布为全局模板 管理页面版本
页面间交互 操作场景 页面间交互是指在不同页面中,进行的相互跳转动作。可跳转同一项目中的任一页面,或跳转外部页面。在跳转项目内部页面时,用户可设置跳转携带相关参数。
在页面数据集页签中,可查看到已创建的数据集。 图9 查看页面数据集 使用页面数据集 在开发页面,从“组件 > 图表”中,拖拽基本柱图组件到画布中。 图10 拖拽基本柱图到画布中 选中组件,单击组件上方的,进入数据源设置页面。
页面数据来源介绍 组件是大屏应用页面的组成元素,配置页面数据即为配置组件数据。AstroCanvas中,页面组件的数据来源包括非数据源(包括桥接器预置、静态数据和数据集等)和数据源(包括关系型数据库、Roma连接器、AstroZero和HTTP连接器等)。