检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
使用AstroCanvas预置模板搭建交通管理大屏 场景说明 交通管理大屏用于监控城市的交通状态,如进出城车辆、路况信息和交通指数等,效果如图1所示。本入门以使用AstroCanvas中预置模板构建一个交通管理大屏为例,向您介绍如何在AstroCanvas中快速构建可视化页面。 图1
重命名组件 通过重命名功能,可自定义组件的名称,便于搜索和管理。 重命名组件 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在编辑页面状态下,选中组件,单击右键,选择“重命名”。 图1 重命名 您也可以在“图层”中,将鼠标悬浮在组件上,单击“重命名”。
list 配置项说明 表1 list配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "list" 配置项类型。 name String 是 name:"intervalColors" 双向绑定list名称。 label Object 否 label:
组件对齐 选中多个组件后,单击右侧配置面板的对齐或分布图标。支持左、水平居中、右、顶、垂直居中、底等多种对齐方式,以及水平和垂直的自动分布方式。 组件对齐 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在页面编辑模式下,选择所需的组件,单击下图红框中图标,进行组件对齐。
删除组件 组件删除后无法恢复,且会影响相关交互的组件,请谨慎操作。 删除组件 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在编辑页面状态下,选中组件,单击右键,选择“删除”。 图1 删除组件 您也可以在“图层”中,选中一个或多个组件,单击“删除”。
配置项总览 本章节介绍AstroCanvas支持的组件配置项,您可以通过{widget}.editor.js文件中定义的type字段,来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
跨页面复制组件 通过复制到功能,可快速将组件复制到其他页面,从而高效完成多个同类型组件配置项参数之间的传递。 跨页面复制组件 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在编辑页面状态下,选中一个或多个组件,单击右键,选择“复制到”,并选择组件待复制到的页面。
复制并粘贴组件 通过复制粘贴功能,可快速将组件的配置参数复制到同类型的另一个组件中,从而高效完成多个同类型组件配置项参数之间的传递。 复制并粘贴组件 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在编辑页面状态下,选中组件,单击右键,选择“复制并粘贴”。
隐藏组件 通过组件隐藏功能,可以隐藏多个已部署完成的组件,使得组件过多的可视化页面变得更加清晰,操作更加流程,从而提高可视化页面的开发效率。 组件隐藏后,在开发态和预览页面时,都会隐藏该组件。 隐藏组件 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。
propertiesConfig 字段介绍 propertiesConfig是一个数组,用于保存组件配置项的相关字段,包括数据接入配置、组件配置项。 图1 propertiesConfig配置示例 数据接入配置 数据接入配置详细介绍,请参见组件数据接入。 组件配置项 配置示例如下
自定义组件时,如何设置交互事件的输出变量 操作场景 开发者自定义组件时,可设置交互事件的输出变量,如图1所示,AstroCanvas支持将事件的输出变量(如“selectValue”)绑定页面级的全局变量(如“status”)。 图1 事件输出参数绑定全局变量 实现逻辑 自定义组
通用配置 配置项说明 表1 配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "input" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name: "commProps
登录AstroCanvas界面 在Astro轻应用中,您可以通过多种方式登录AstroCanvas。在使用AstroCanvas时,请结合实际情况,选择对应的方式登录AstroCanvas界面。本手册的界面操作及截图均以我是新用户为例。 我是新用户 新用户购买AstroCanva
将组件保存为卡片 将组件保存为卡片,方便后期有需要时,随时调用“我的卡片”中的组件。 将组件保存为卡片 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在编辑页面状态下,选中组件,单击右键,选择“保存为卡片”。 图1 选择保存为卡片 您也可以在“图层”
锁定/解锁组件 操作场景 通过锁定功能,锁定多个可视化页面中已配置完成的组件,使之不被随意改动。 组件锁定后,不受可视化页面布局过程中的其他操作影响。 组件锁定后,无法在画布上对组件进行任何操作,直到解锁后才能恢复。 组件锁定后,可避免组件过多引起的误操作。 锁定组件 参考登录A
echarts组件自定义事件交互设置 echarts组件作为触发器的事件时,可以在自定义事件中设置。 自定义事件交互设置 在大屏设计页面,从Echarts图表中拖拽一个折线图堆叠组件到画布中。 图1 拖拽折线图堆叠组件到画布中 选中折线图堆叠组件,单击。 在自定义事件中,单击“新
了解代码目录结构 当系统预置的组件无法满足用户需求时,用户可自定义组件并上传到AstroCanvas中使用。AstroCanvas为您预置了一些组件模板(Widget包),您可以基于组件模板开发自定义组件。 获取组件模板包 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。
AstroZero API数据集 通过调用AstroZero的接口,来获取数据。 前提条件 连接的数据源已创建,如何创建请参见AstroZero数据源。 数据集所使用的转换器已创建,如何创建请参见新建转换器。 AstroCanvas预置了转换器供用户直接使用,用于把调用API接口
如何通过全局变量,实现组件数据的动态变化 在AstroCanvas中,支持通过全局变量,来控制组件数据的动态显示。本章节以全局变量,控制地图组件中数据的动态显示为例进行介绍。 通过全局变量实现组件数据动态变化 参考关系型数据库数据源中操作,新建关系型数据库数据源。 图1 新建关系型数据库数据源
如何使用高级表格的后台排序功能 操作场景 后台排序必须和全局变量一起配合使用。后台分页、后台排序和后台筛选同时启用时,在添加转换器时,需要先筛选、再排序、最后分页,如图1。 图1 转换器添加顺序 后台排序 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。