# 设置组件事件交互
本章节以Tab列表和线状图配合使用为例，介绍组件的交互配置。在DLV中组件交互配置是指某个组件在响应用户操作或者自动触发更新时，向其他组件传递参数，这个参数可以在其他组件中作为数据查询时的动态变量。当组件的"交互"页签支持勾选![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0272332436.png)开启交互功能的事件及参数配置时表示该组件支持交互功能，否则不支持交互功能。
图1支持交互功能   
![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0272330995.png)
图2不支持交互功能   
![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0272325405.png)
#### 前提条件
- 已开通或购买相应的云服务，创建数据库实例。
- 已将相应的数据存储在数据库实例中。
 
#### 添加和配置组件
1. 打开大屏开发页面，在左侧组件中心，选择"交互 \> 地理搜索"。 
   图3选择地理搜索组件   
   ![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001086733321.png)
   
   
2. 在"样式"面板，配置地理搜索的样式，本示例使用默认样式。 
   图4配置地理搜索样式   
   ![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001086733875.png "点击放大")
   
   
3. 切换到"数据"面板，设置地理搜索组件的数据。 
   图5设置地理搜索组件的数据   
   ![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001086594773.png "点击放大")
   
   
4. 切换到"交互"面板，定义交互变量，并启用该变量。
   
   图6定义并启用交互变量   
   ![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001086734341.png)
   
   
5. 在左侧组件中心，选择"常用图表 \> 柱状图"。 
   图7选择柱状图组件   
   ![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001083170105.png)
   
   
6. 在"样式"面板，配置柱状图组件的样式，本示例使用默认样式。 
   图8配置柱状图样式   
   ![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001083092813.png "点击放大")
   
   
7. 切换到"数据"面板，配置柱状图数据。 
   1. 选择数据源，并配置字段映射。如[图9]所示，组件关联到动态数据。
      图9关联动态数据   
      ![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001087031263.png "点击放大") 
   
   2. 按下shift+$键，引用[4]定义好的交互变量${name}。
      图10引用交互变量   
      ![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001086879705.png) 
   
   
   
   
 
#### 预览和发布大屏
1. 在大屏开发页面右上方，单击预览按钮![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001083355869.png)，预览大屏。
   
   图11预览大屏数据   
   ![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001087033965.png "点击放大")
   
   
2. 在地理搜索中，重新设定地理位置，柱状图则只显示对应位置的数据。 
   图12预览过滤数据   
   ![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001086880527.png "点击放大")
   
   
3. 交互功能验证无误后，单击大屏开发页面右上方的发布按钮![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001087034147.png)，配置发布参数，将大屏发布和分享给其他用户。
   
   图13发布和分享大屏   
   ![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0000001087034211.png "点击放大")
   
   
#### 开启交互功能
在"交互"页签下，勾选![](https://support.huaweicloud.com/usermanual-dlv/zh-cn_image_0146105155.png)，开启交互功能。当Tab组件的取值发生变化时，向其他组件传递数值。
#### 字段映射
设置字段的映射关系。在其他组件中使用变量${label}时，即可获取到label所映射的值。