检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
组件配置项(Config配置) 配置项总览 通用配置 input textarea input-number slider tab switch radio checkbox colorpicker time select list 父主题: 自定义组件开发规范
在画布中,拖入地图组件和下拉选择框组件。 配置地图组件。 选中组件,单击组件上方的,设置组件数据来源。 在全局变量中,选择3中创建的全局变量hotSelect。 图4 选择全局变量hotSelect 在组件预览中,从表格字段中,拖拽对应的字段到配置中。 设置完成后,单击“保存”。 选择
量。 例如,在如何基于页面级的全局变量实现组件交互开发的页面中,在“多区域折线图”组件上方单击,配置组件交互事件。参考图1,单击“+交互事件”,选择“点击”事件,单击“+响应动作”,选择“页面跳转”,跳转到内部其他页面,打开“设置页面参数”开关,设置参数。 配置效果:在发布后的页
参考设置项目锁中操作,获取项目锁。 在左侧导航栏中,选择“组件”。 单击“本地调试设置”,进行本地调试设置。 在本地开发组件后,频繁地打包组件包上传至公共环境再查看页面显示效果,是一件效率极低的事情。通过该配置,可打通本地环境与公共环境,实现实时在线调测组件。 单击“检查更新”,检查组件
构数据进行探索。 新建DLI数据源 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“数据源”。 在数据源管理页面,单击“新建数据源”。 选择“DLI”,配置数据源参数。 图1 DLI数据源 数据源名
设置交互方式 资产迁移 发布项目 安装项目 常见问题 了解更多常见问题、案例和解决方案 热门案例 如何基于页面级的全局变量实现组件交互? 自定义组件时,如何设置交互事件的输出变量? 如何在数据集或跳转事件动作中设置变量? 如何通过全局变量,实现组件数据的动态变化? 如何使用高级表格的后台分页功能?
如何在页面URL参数中给全局变量赋值 如何基于页面级的全局变量实现组件交互中实现的场景是:用户在“下拉选择框”中选择某个告警状态时,通过配置的交互事件将告警状态赋值给全局变量,“多区域折线图”组件呈现的数据来源于封装了AstroZero某API接口的数据集,将该接口的入参与全局变
前页面。 通过页面模板文件新建页面 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在项目列表中,单击已创建项目的名称,进入对应的项目页面。 在项目中,单击,选择本地的页面模板文件,单击“打开”。 图1 添加本地页面模板文件 在创建页面对话框中,输入页面标题,单击“新建”。
自定义模板:当前账号下发布的模板,如何将当前页面发布为模板,请参见发布为模板。 如果安装的是安全云脑类大屏,进入大屏页面后,您还需要根据实际情况设置全局变量和数据源等信息,如图2、图3。 图1 输入项目名称和页面标题 图2 配置全局变量 图3 设置数据源信息 通过模板新建页面 参考登录AstroCa
自定义的事件名为“sendSelect”,必须配置。 在组件“.js”文件逻辑代码中,使用“thisObj.triggerEvent()”方法触发该事件时,要将变量字段传入发送的data中。 desc 事件的中英文描述,可描述事件的具体场景、作用,必须配置。 fields 变量列表,必须配置,即事件对外输出的
input 配置项说明 表1 input配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "input" 配置项类型。 subType String 否 subType: "password" 子类型,支持的类型有number、password。
checkbox 配置项说明 表1 checkbox配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "checkbox" 配置项类型。 value Boolean 否 value: true 默认值。 name String 是 name: "commProps
colorpicker 配置项说明 表1 colorpicker配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "colorpicker" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name
append: "%" 添加的字符串。 事件 表2 事件 事件名称 调用配置项中的方法 说明 回调参数 change change 值改变的时候触发 (value, data, field) 配置示例 slider配置示例如下,配置后效果如图1所示。 { type: 'slider', name:
是否显示该配置项,可自定义函数,根据其他选项的值来判定是否显示,返回true显示function定义。 事件 表2 事件 事件名称 调用配置项中的方法 说明 回调参数 change change 值改变时触发 (value, data, field) 配置示例 switch配置示例如下,配置后效果如图1所示。
time 配置项说明 表1 time配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "time" 配置项类型。 subType String 否 subType: "date" 子类型,支持的类型有time、date和datetime。 value
textarea 配置项说明 表1 textarea配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "textarea" 配置项类型。 value String 否 - 默认值。 name String 是 name: "commProps.myString"
input-number 配置项说明 表1 input-number配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "input-number" 配置项类型。 value String 否 value: 1 默认值。 name String 是
您也可以将“联合方式”设置为“连接”,通过连接实现数据的汇总,如图8。 左连接:返回左表中的所有行,如果左表中的行在右表中没有匹配的行,则结果中右表中的列返回“null”。 右连接:与左连接相反,返回右表中的所有行,如果右表中的行在左表中没有匹配的行,则结果中左表中的列返回“null”。 内连接:取两个表的交集,两张表都有的才能显示出来。
list 配置项说明 表1 list配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "list" 配置项类型。 name String 是 name:"intervalColors" 双向绑定list名称。 label Object 否 label: