检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
“保存”。 图3 新建数据集 数据集名称:数据集的名称,用于标识该数据集。本示例配置为getWarnDetailByStatus。 数据源连接:选择1中创建的数据源。 目录:设置数据集的存放目录。 责任人:数据集的创建者。 描述:数据集的描述信息,通常设置为数据集的功能。 配置数据集,单击“保存”。
tab 配置项说明 表1 tab配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "tab" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name: "commProps
radio 配置项说明 表1 radio配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "radio" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name: "commProps
colorpicker 配置项说明 表1 colorpicker配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "colorpicker" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name
组件自定义事件实现 组件之间的交互,主要包括组件自定义事件和组件响应动作,本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器,当用户操作组件(比如下拉框选中选项)时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的event
switch 配置项说明 表1 switch配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "switch" 配置项类型。 value String 否 value: false 默认值。 name String 是 name: "commProps
自定义围栏数据:地图自定义围栏数据桥接器,数据中省/直辖市code一致,则认为属于同一围栏区域。预览或发布页面时,单击围栏区域,地图会下钻到围栏区域。若未配置该连接器,则下钻到单独省/直辖市。 图12 自定义围栏数据 热力图层数据:热力图层数据桥接器/数据集,根据省/直辖市数值大小,热力图层颜色深浅不一。
checkbox 配置项说明 表1 checkbox配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "checkbox" 配置项类型。 value Boolean 否 value: true 默认值。 name String 是 name: "commProps
time 配置项说明 表1 time配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "time" 配置项类型。 subType String 否 subType: "date" 子类型,支持的类型有time、date和datetime。 value
SafeUtils安全工具类预置API一览表 表1 SafeUtils安全工具类预置API一览表 API API说明 escapeHtml() 将HTML字符串进行转义。 getSafeUrl() 对外部链接进行xss安全过滤,获取安全的绝对URL地址。 escapeHtml()
textarea 配置项说明 表1 textarea配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "textarea" 配置项类型。 value String 否 - 默认值。 name String 是 name: "commProps.myString"
{widget}.css 文件介绍 {widget}.css为组件的样式文件,在该文件中编写组件的CSS样式。 AstroCanvas的组件未进行打包编译,CSS样式可能存在互相影响的风险。因为,CSS选择器务必要加上组件id,通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
slider 配置项说明 表1 slider配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "slider" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name:
input 配置项说明 表1 input配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "input" 配置项类型。 subType String 否 subType: "password" 子类型,支持的类型有number、password。
select 配置项说明 表1 select配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "select" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name:
input-number 配置项说明 表1 input-number配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "input-number" 配置项类型。 value String 否 value: 1 默认值。 name String 是
echarts组件自定义动作交互设置 echarts组件作为响应器的动作时,可以在自定义动作中设置。 当前仅“Astro大屏应用专业版”实例,才提供Echarts图表组件。 自定义动作交互设置 选中某个echarts组件,单击。 在自定义动作中,单击“新增自定义动作”,修改动作名称为“设置数据高亮”。
自定义组件时,如何设置交互事件的输出变量 操作场景 开发者自定义组件时,可设置交互事件的输出变量,如图1所示,AstroCanvas支持将事件的输出变量(如“selectValue”)绑定页面级的全局变量(如“status”)。 图1 事件输出参数绑定全局变量 实现逻辑 自定义组
{widget}.js 文件介绍 {widget}.js为组件逻辑文件,整个Widget的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构,应包含表1中API。其中,init、render和beforeDestory为组件的通用生命周期函数,其余为推荐模板实现。
组件数据接入 组件对接数据配置开关 组件的数据可来自于静态数据或通过数据集获取,以EchartsWidgetTemplate组件为例,在“{Widget}”.editor.js文件中,可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类