检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
初识开发页面 可视化开发页面 AstroCanvas一站式数据可视化开发页面,由可视化组件、图层、页面数据集、画布、功能按钮和主题六个区域组成,各区域功能介绍请参见表1。 图1 可视化开发页面 表1 可视化开发页面功能说明 序号 名称 说明 1 组件 在全部组件中,可以查看到各种类型的组件
组件对齐 操作场景 选中多个组件后,单击右侧配置面板的对齐或分布图标。支持左、水平居中、右、顶、垂直居中、底等多种对齐方式,以及水平和垂直的自动分布方式。 操作步骤 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在页面编辑模式下,选择所需的组件,单击下图红框中图标
echarts组件自定义事件交互设置 echarts组件作为触发器的事件时,可以在自定义事件中设置。 当前仅“Astro大屏应用专业版”实例,才提供Echarts图表组件。 自定义事件交互设置 在大屏设计页面,从Echarts图表中拖拽一个折线图堆叠组件到画布中。 图1 拖拽折线图堆叠组件到画布中
分割线 分割线是装饰组件的一种,用于分割组件,起装饰作用,包括分割线和竖分割线。 以分割线16-1为例,在大屏设计页面,从“全部组件 > 装饰”中,拖拽“分割线16-1”组件至画布空白区域,如图1。 图1 分割线16-1 页面背景色设置为白色时,分割线组件很难显示出来。使用该组件时
新建连接器 操作场景 在AstroCanvas中,通过新建HTTP连接器,可引入第三方的API作为组件的数据来源。 图1 在组件中有引入连接器流程 操作步骤 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,
配置项总览 本章节介绍AstroCanvas支持的组件配置项,您可以通过{widget}.editor.js文件中定义的type字段,来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
删除组件 操作场景 组件删除后无法恢复,且会影响相关交互的组件,请谨慎操作。 操作步骤 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在编辑页面状态下,选中组件,单击右键,选择“删除”。 图1 删除组件 您也可以在“图层”中,选中一个或多个组件,单击“
跨页面复制组件 操作场景 通过复制到功能,可快速将组件复制到其他页面,从而高效完成多个同类型组件配置项参数之间的传递。 操作步骤 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在编辑页面状态下,选中一个或多个组件,单击右键,选择“复制到”,并选择组件待复制到的页面
复制并粘贴组件 操作场景 通过复制粘贴功能,可快速将组件的配置参数复制到同类型的另一个组件中,从而高效完成多个同类型组件配置项参数之间的传递。 操作步骤 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在编辑页面状态下,选中组件,单击右键,选择“复制并粘贴
隐藏组件 操作场景 通过组件隐藏功能,可以隐藏多个已部署完成的组件,使得组件过多的可视化页面变得更加清晰,操作更加流程,从而提高可视化页面的开发效率。 组件隐藏后,在开发态和预览页面时,都会隐藏该组件。 操作步骤 参考登录AstroCanvas界面中操作,登录AstroCanvas
propertiesConfig 字段介绍 propertiesConfig是一个数组,用于保存组件配置项的相关字段,包括数据接入配置、组件配置项。 图1 propertiesConfig配置示例 数据接入配置 数据接入配置详细介绍,请参见组件数据接入。 组件配置项 配置示例如下,
创建移动端项目 操作场景 在AstroCanvas中创建页面前,需要先创建一个项目。项目可以理解为是一种业务场景的集合,在项目中可以创建多个页面。 创建项目 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在“项目列表”中,单击“新建项目”。 在新建项目页面
自定义组件时,如何设置交互事件的输出变量 操作场景 开发者自定义组件时,可设置交互事件的输出变量,如图1所示,AstroCanvas支持将事件的输出变量(如“selectValue”)绑定页面级的全局变量(如“status”)。 图1 事件输出参数绑定全局变量 实现逻辑 自定义组件开发过程如下
将组件保存为卡片 操作场景 将组件保存为卡片,方便后期有需要时,随时调用“我的卡片”中的组件。 操作步骤 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在编辑页面状态下,选中组件,单击右键,选择“保存为卡片”。 图1 选择保存为卡片 您也可以在“图层”
通用配置 配置项说明 表1 配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "input" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name: "commProps.myString
锁定/解锁组件 操作场景 通过锁定功能,锁定多个可视化页面中已配置完成的组件,使之不被随意改动。 组件锁定后,不受可视化页面布局过程中的其他操作影响。 组件锁定后,无法在画布上对组件进行任何操作,直到解锁后才能恢复。 组件锁定后,可避免组件过多引起的误操作。 锁定组件 参考登录AstroCanvas
发布页面 操作场景 通过发布功能,无需进入开发页面,即可获取页面的访问地址。 操作步骤 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在项目列表中,单击页面所在的项目,进入项目。 将鼠标放在待发布的页面上,单击,进行页面发布设置。 发布链接:单击发布链接后的图标
AstroZero API 操作场景 通过调用AstroZero的接口,来获取数据。 前提条件 连接的数据源已创建,如何创建请参见AstroZero数据源。 数据集所使用的转换器已创建,如何创建请参见新建转换器。 AstroCanvas预置了转换器供用户直接使用,用于把调用API接口返回的数据转换成二维结构
如何通过全局变量,实现组件数据的动态变化 操作场景 在AstroCanvas中,支持通过全局变量,来控制组件数据的动态显示。本章节以全局变量,控制地图组件中数据的动态显示为例进行介绍。 操作步骤 参考关系型数据库数据源中操作,新建关系型数据库数据源。 图1 新建关系型数据库数据源
按钮组件 按钮组件通常与其他组件配合使用, 用于展示链接页面或提示信息等。 在大屏设计页面,从“全部组件 > 其它”中,拖拽“按钮组件”组件至画布空白区域,如图1所示。 图1 按钮组件 配置 在配置中,设置按钮快捷样式和基础样式。 图2 配置 快捷样式设置:设置按钮的样式,如常规按钮