检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
自定义组件时，如何设置交互事件的输出变量 操作场景 开发者自定义组件时，可设置交互事件的输出变量，如图1所示，华为云Astro大屏应用支持将事件的输出变量（如“selectValue”）绑定页面级的全局变量（如“status”）。 图1 事件输出参数绑定全局变量 实现逻辑 自定义组
如何在数据集或跳转事件动作中设置变量 在组件的数据集或组件的跳转事件动作中，是支持设置变量的。 在数据集或事件动作中设置变量 在大屏编辑页面上方，单击，新建并设置页面级全局变量。 例如，新增全局变量“url”，设置变量说明为“数据详情页面URL”。 图1 新增全局变量 从“全部组件 > 图
线图”组件呈现的告警数据会随着全局变量值变化而变化。 如图1所示，也可以不使用“下拉选择框”组件，直接在发布的页面URL末尾加上“?全局变量名=值”，给页面全局变量赋值，查看组件的数据变化。 图1 在URL参数中给全局变量赋值 父主题： 全局变量
新建关系型数据库数据源 参考关系型数据库数据集中操作，新建关系型数据库数据集（新建变量value）。 图2 新建关系型数据库数据集 新建全局变量。 参考使用空白画布新建页面中操作，新建大屏空白页面。 在大屏开发页面，单击，新建全局变量，如hotSelect。 图3 新建全局变量hotSelect
使用项目变量。 图4 在交互动作中使用项目变量 更新项目变量。 方式一：通过交互动作，更新变量。 图5 在交互动作中更新变量 方式二：通过自定义动作，更新项目变量。 图6 通过自定义动作更新变量 其中，key为项目变量的名称，value为项目变量的值。 父主题： 全局变量
全局变量 项目级全局变量 如何基于页面级的全局变量实现组件交互 如何设置页面间参数传递 自定义组件时，如何设置交互事件的输出变量 如何在页面URL参数中给全局变量赋值 如何在数据集或跳转事件动作中设置变量 如何通过全局变量，实现组件数据的动态变化
单击“新建空白页面”，输入页面标题“全局变量示例页面”，单击“新建”。 在页面上方单击，新建并设置页面级全局变量。 新增全局变量“status”，设置默认值为“1”，设置变量说明为“告警服务状态码，1为待派单，2是已派单，3是处理中，4是已关闭”。 图5 设置页面变量 在页面中拖入并设置下拉选择框组件。
事件中，可通过“页面跳转”响应动作传递页面参数。当跳转页面时，当前页面参数会传入到打开的页面中，支持自定义传参为固定值，也可绑定页面级全局变量。 例如，在如何基于页面级的全局变量实现组件交互开发的页面中，在“多区域折线图”组件上方单击，配置组件交互事件。参考图1，单击“+交互事件
如何自定义动作 操作场景 在配置组件交互时，可以通过编写代码实现自定义交互动作，从而实现对应的业务需求。 图1 自定义动作 自定义动作参数说明 在自定义动作中，支持直接使用的参数如下： eventParam：组件传递出的参数。 以日期选择器组件为例，介绍如何获取eventParam。
echarts组件自定义事件交互设置 echarts组件作为触发器的事件时，可以在自定义事件中设置。 自定义事件交互设置 在大屏设计页面，从Echarts图表中拖拽一个折线图堆叠组件到画布中。 图1 拖拽折线图堆叠组件到画布中 选中折线图堆叠组件，单击。 在自定义事件中，单击“新增自定义事件”
开启后台分页 新建全局变量。 后台分页需要搭配全局变量使用，请创建pageSize、offset两个变量（变量名称可自定义），并为变量添加默认值。因为在触发分页或改变每页数量时需要使用上述两个变量，所以需要一个初始值，否则无法执行到数据配置。 图2 新建分页全局变量 交互设置。 选中高级表格组件，单击，进行组件交互设置。
响应动作”，选择“赋值全局变量”。 在动作详情中，单击“赋值到变量”后的，选择“新建全局变量”。 图4 选择新建全局变量 “变量”设置为“seriesName”，“变量说明”设置为“系列名称”，单击“保存”。 图5 新建全局变量seriesName 返回组件交互页面，“赋值到变量”选择5.g中新建的变量，
选择“关系型数据库”，配置数据源参数。 图1 新建关系型数据库数据源 数据源名称：新建数据源的名称，用于标识该数据源。长度为1~32个字符，可包括中文、字母、数字及下划线，且不能以下划线开头或结尾。 数据库类型：数据库支持的类型，按需选择。 域名：数据库所在的域名。 端口：数据库端口，取值范围为0~65535。
组件自定义事件实现 组件之间的交互，主要包括组件自定义事件和组件响应动作，本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器，当用户操作组件（比如下拉框选中选项）时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的event
、设置变量，变量定义格式为“${变量名}”，如图4。自定义的SQL语句（仅支持以select或with开头），返回数据字段如果为变量则需指定别名，同时样例数据需使用别名。 select * from student where 身高> ${height}; 图4 定义变量 创建
新建并开发自定义组件 操作场景 当系统预置的组件无法满足用户需求时，用户可自定义组件包进行上传，在页面中进行使用。在开发自定义组件前，请仔细阅读自定义组件开发规范章节内容，了解组件的开发规范。下面以开发网站中常用的柱状图（vue2+Echarts）组件为例，向您介绍如何开发自定义组件。
eventConfig为组件事件配置项，用于定义组件事件暴露的变量结构，以及事件和对外透传变量的业务含义。eventConfig配置好后，在组件配置交互时可以将事件的itemVal传递给页面全局变量中，供其他组件使用。 典型示例 典型的eventConfig示例如下： // 组件事件配置项，定义组件事件结构及说明，给全局变量映射使用
文件介绍及示例 文件介绍 {widget}.editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor
创建DWS数据集中创建的数据集。 配置全局变量。 全局变量可以理解为参数变量，用于控制组件之间参数的传递，从而达到交互的目的，例如图表联动、自定义字段等功能。如何使用全局变量，可参考如何基于页面级的全局变量实现组件交互~如何通过全局变量，实现组件数据的动态变化。本示例不做配置。
操作场景 组件间交互是指在同一页面中，不同组件之间进行的交互事件。组件和组件之间可互为触发器和响应器，根据用户所定义的事件不同，可定义组件行为、赋值全局变量以及响应自定义动作。 本章节以在同一区域中，添加多个组件，使用tab来切换不同tab页签下需要呈现的组件为例，向您介绍如何设置组件间的交互能力。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
