检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
边距:组件中视频流距离整个组件四边(上、下、左、右,如图2)的距离,默认为0,即铺满整个组件。 配置 在配置中,设置视频流组件的视频流地址、视频流类型等。视频流组件中,配置项的配置高于数据配置。 图4 视频流配置 视频流地址:视频流的URL地址。 视频流类型:视频流的协议类型,目前
“保存”。 图2 配置流程 在组件上方单击,配置组件交互事件。 在作为触发器中,单击“+交互事件”,选择“当点击数据时”事件。 单击“+响应动作”,选择“赋值全局变量”。 在“动作详情”中,单击“+”,将页面级全局变量“url”赋值给组件数据源中的字段“url”,单击“确定”。 图3
echarts组件自定义事件交互设置 echarts组件作为触发器的事件时,可以在自定义事件中设置。 自定义事件交互设置 在大屏设计页面,从Echarts图表中拖拽一个折线图堆叠组件到画布中。 图1 拖拽折线图堆叠组件到画布中 选中折线图堆叠组件,单击。 在自定义事件中,单击“新
面,如页面一,并拖入实心圆饼图和下拉选择框。 选中实心圆饼图,单击,进入交互设置页面。 设置实心圆饼图和下拉选择框之间的交互动作。 在作为触发器中,单击“+ 交互事件”,选择“当点击数据时”。 在响应动作中,单击“+ 响应动作”,选择“组件响应”。 在动作详情中,设置具体的响应动作。
在组件上方单击,配置组件交互事件。 单击“交互事件”,选择“选中值发生变化时触发”事件,单击“响应动作”,选择“赋值全局变量”,在“赋值到变量”下拉框中单击“新建全局变量”,新建全局变量“status”,将事件的输出变量(如“selectValue”)赋值给页面级的全局变量“status”,单击“确定”后,单击“完成”。
组件自定义事件实现 组件之间的交互,主要包括组件自定义事件和组件响应动作,本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器,当用户操作组件(比如下拉框选中选项)时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的event
组件响应动作实现 组件除了可以作为事件的触发器,还可以处理事件的响应动作,在响应动作中选择组件响应,就可以选择对应的组件响应动作,数据刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍,如何实现组件响应动作。 注册动作 在响应动作中,单击“响应动作”,在下拉框中选择对应的响应动作。
新建全局变量。 后台分页需要搭配全局变量使用,请创建pageSize、offset两个变量(变量名称可自定义),并为变量添加默认值。因为在触发分页或改变每页数量时需要使用上述两个变量,所以需要一个初始值,否则无法执行到数据配置。 图2 新建分页全局变量 交互设置。 选中高级表格组件,单击,进行组件交互设置。
其它”中,找到BarGraph组件,拖入到画布中。 图3 拖拽BarGraph组件到画布中 在画布中选中TabsWidget组件,单击组件上方的。 在作为触发器中,单击“+ 交互事件”,选择“点击系列”。 在响应动作中,单击“+ 响应动作”,选择“赋值全局变量”。 在动作详情中,单击“赋值到变量”后的,选择“新建全局变量”。
单击“新增参数”,设置参数名称为“dataIndex”。 图2 新增dataIndex字段 选中echarts组件,单击,进入组件交互页面。 在作为触发器中,单击“交互事件”,选择“组件加载”。 在响应动作中,单击“响应动作”,选择“组件响应”。 在动作详情中,“响应组件”选择echart
如何基于页面级的全局变量实现组件交互 AstroCanvas支持设置页面级的全局变量,通过页面组件间的交互,可给全局变量赋值。本章节将以开发一个告警监控页面为例,逐步介绍如何开发一个基于全局变量的交互页面。 场景说明 开发一个告警监控页面,如图1所示,在页面上方下拉框中选择告警状
组件间交互 操作场景 组件间交互是指在同一页面中,不同组件之间进行的交互事件。组件和组件之间可互为触发器和响应器,根据用户所定义的事件不同,可定义组件行为、赋值全局变量以及响应自定义动作。 本章节以在同一区域中,添加多个组件,使用tab来切换不同tab页签下需要呈现的组件为例,向您介绍如何设置组件间的交互能力。
项目级全局变量 AstroCanvas中的全局变量包括项目级全局变量和页面级全局变量两种。项目级全局变量是整个项目中所有页面都可以使用的变量,当项目中页面较多且各页面会使用同一个变量时,通过创建项目变量,可以提高开发效率,提升易用性。页面级全局变量仅针对当前页面生效。 如果在页面
change change 仅在输入框失去焦点或用户按下回车时触发 (data, field) blur blur 在输入框获得焦点时触发 (value, data, field) focus focus 在输入框失去焦点时触发 (value, data, field) 配置示例 in
registerResizeEvent 监听dom尺寸变化,触发组件重新绘制。使用方式参考如下: /** * 监听dom尺寸变化,触发组件重新绘制 * @param resizeFunc 页面resize时,需要触发的回调函数,可选 */ this.registerResizeEvent(
回调参数 input blur 在input值改变时触发 (event, data, field) change change 仅在输入框失去焦点或用户按下回车时触发 (data, field) blur blur 在输入框获得焦点时触发 (value, data, field) focus
/cool__app_0000000000NABzEjpNIH”。 triggerEvent:用于触发事件,参数说明如下: eventName:指定触发的事件名称。 {}:为事件触发时传递的参数赋值,例如{param: value}。 Studio对象预置API Studio.r
change change 值改变时触发 (value, data, field) addItemFunc addAssembleType 单击新增时触发 (vm) itemDelCallBack delAssembleType 单击删除时触发 (value) 配置示例 配置后效果,如图1所示。
一般用于在组件初始化阶段注册事件,只有通过此API注册后的事件才会在组件的事件列表中展现。同样只有注册的事件之后才能通过triggerEvent触发,使用方式参考如下: /* @param {obj} widgetInst 组件对象自身 * @param {string} eventName
change change 仅在输入框失去焦点或用户按下回车时触发 (data, field) blur blur 在输入框获得焦点时触发 (value, data, field) focus focus 在输入框失去焦点时触发 (value, data, field) 配置示例 te