---
title: 事件交互与多状态
source: https://vjmap.com/guide/visual/events.html
---

---
group: 数据与交互
description: 用「触发 → 动作」编排交互：点击改文字、切页面、开画面，动态取值公式，多状态的新建、手动切换和数据驱动切换，以及条件样式。
---

# 事件交互与多状态

[数据接入](./data.html)解决「数据变了组件跟着变」，事件交互解决「用户做了什么、页面就做什么」：点一根柱子显示它的城市，点按钮弹出画面、切换页面、让某个组件变成告警样式。每个事件都是「**触发** → 一个或多个**动作**」，在组件（或页面）的「事件」页签里配置。

本篇用一个小例子走一遍：左边一个柱状图，右边一行副标题和一个「触发告警」按钮。点柱子，副标题显示「已选中：某城市」；点按钮，副标题切成红底的告警样式。

## 「事件」页签

选中组件，右侧属性面板切到「事件」：

![组件的「事件」页签](./images/events-tab.webp)

1. **事件**：属性面板顶部的第三个页签。
2. **添加事件**：新建一个事件，打开编辑对话框。
3. **事件卡片**：已配置的事件，标题是事件名称，右侧显示有几个动作，下面逐条列出动作。点卡片可以重新编辑，右上角的垃圾桶删除。

选中页面（点画布空白处）时，「事件」页签配置的是页面级事件，例如「页面首次进入」「数据规则满足」时做什么。

## 选择触发

点「添加事件」，先填名称、选触发方式：

![事件触发方式](./images/events-triggers.webp)

1. **名称**：可选，不填就用触发方式的名字，建议写清楚用途，例如「点柱子显示城市」。
2. **触发**：下拉选择什么时候执行动作。
3. **点击某项时**：图表、表格、列表等能点中某一项的组件才有，点到哪一项，就把那一项的数据（如城市）带给动作使用。

所有组件都有的触发是：点击、鼠标移入时、鼠标移出时、入场、离场、接收二次开发事件。表格还有点击行、选中行等；地图、三维场景、组态有点击要素、点击元素、点击图元等专用触发，见各自的文档。

## 选择动作

每个事件可以有多个动作。点动作卡片里的「动作」下拉，按分组挑选：

![动作分组](./images/events-actions.webp)

1. **动作**：下拉选择要做什么。
2. **组件控制**：切换状态、修改设置（改任意组件的任意属性）、控制弹窗、组件自定义。
3. **导航跳转**：切换页面、打开画面、打开链接。中间收起的「地图」分组里是飞到视角、缩放、显隐图层、切换底图等地图动作。

再往下还有：

| 分组 | 动作 |
|---|---|
| 项目控制 | 刷新数据、修改项目参数、全屏播放控制、访客退出登录、写入内嵌数据表 |
| 事件与开发 | 传递触发、发送行为事件、执行脚本、调用接口 |
| 动画效果 | 播放进入动画、播放退出动画 |
| 高级/其他 | 空动作，以及地图图层属性、三维相机飞行、聚焦元素、剖切分析、路径动画等三维动作 |

## 例子：点柱子显示城市

选中柱状图，「事件」→「添加事件」，按下图配置：

![点击某项时，用公式修改副标题文本](./images/events-edit.webp)

1. **触发**：选「点击某项时」。
2. **指定组件**：「目标组件」保持「指定组件」，在这里选要改的组件（副标题）；也可以选「当前组件」改自己。
3. **设置项**：要改哪个属性。下拉里按属性面板的分组列出所有属性，可以输入文字筛选，这里选「文本」。
4. **动态取值**：关闭时直接填一个固定的新值；打开后值在触发时才算出来。
5. **取值方式**：「取当前值」「公式」或「取触发组件值」。这里选「公式」。
6. **公式**：写 `已选中：{:城市}`。`{:字段名}` 会替换成被点中那一项的字段值；也可以写项目参数的名字。
7. **延迟 / 时长**：单位毫秒。延迟用来等一会儿再执行；时长只对带过渡的修改和进入、退出动画有意义。
8. **添加动作**：再加一个动作。第二个动作起多一个「顺序」选项，选「与上一动作同时」或等上一个动作完成后再执行。

点「确认」保存。事件只在**预览**（以及发布后的大屏）里生效，编辑态点组件只是选中它。点顶栏「预览」试一下：

![预览里点击杭州的柱子](./images/events-preview-click.webp)

1. **点击「杭州」的柱子**。
2. **副标题变成「已选中：杭州」**。

## 多状态：一个组件，几套外观

多状态让同一个组件有几套外观，例如「正常」和「告警」。默认状态就是平时编辑的样子，其它状态只记录和默认状态不同的地方。

### 新建状态

选中副标题，点属性面板右上角的状态下拉（默认显示「默认状态」）：

![状态下拉菜单](./images/events-state-menu.webp)

1. **状态下拉**：显示当前正在编辑哪个状态。
2. **新建状态**：输入名称，例如「告警」，确定后自动切到这个状态。
3. **管理状态**：打开「多状态」对话框，设置每个状态什么时候自动切换（见下文）。

切到「告警」状态后，在属性面板里改的都只属于告警状态：

![编辑「告警」状态的外观](./images/events-state-edit.webp)

1. **当前状态**：下拉显示「告警」，表示现在改的是告警状态。
2. **画布效果**：告警状态的样子，图中文字换成了告警文案，背景变成暗红。
3. **文本**：改成「⚠ 2 号泵站温度告警」。
4. **背景设置**：打开开关，背景颜色选暗红。

改完把下拉切回「默认状态」，组件恢复原样。组件在编辑器里停在哪个状态，打开大屏时就从哪个状态开始，所以编辑完记得切回默认状态。

### 用事件切换状态

选中「触发告警」按钮，添加一个「点击」事件，动作选「切换状态」：

![切换状态动作](./images/events-switch-state.webp)

1. **动作**：「组件控制」分组里的「切换状态」。
2. **目标组件**：要切换的组件，这里是副标题。
3. **状态**：切到哪个状态；选「默认状态」就是切回来。

预览里点按钮，副标题立刻换成告警样式：

![预览里点击按钮切到告警状态](./images/events-preview-state.webp)

1. **点击「触发告警」**。
2. **副标题切到「告警」状态**：红底和告警文案。

### 让数据自动切换状态

不想靠点击，也可以让状态跟着数据自动切。先在组件的「数据」页签展开「状态判定字段」，选一个字段（例如「销售额」）；再从状态下拉打开「管理状态」：

![多状态对话框：满足条件自动切换](./images/events-state-data.webp)

1. **状态列表**：每个状态右侧的「切到」可以在编辑器里预览该状态；垃圾桶删除状态。
2. **跟随页面状态**：页面本身也可以有多个状态，这里可以让组件跟着页面一起切换。
3. **满足数据规则时切换**：打开后勾选「使用当前状态规则字段」，就用「状态判定字段」里选的字段来判断；不打开时，可以在「引用数据规则」里选一条[数据规则](./data.html)。
4. **条件**：字段、比较方式和值。图中是「销售额 大于 400」，取字段第一行的值比较。

满足条件就自动切到这个状态，编辑器和预览里实时生效。几个状态都设了条件时，按列表顺序判断，第一个满足的生效；都不满足时保持当前状态，不会自动回到默认状态，所以要双向切换时，给默认状态也配一个相反的条件。

## 条件样式与属性数据

只想在满足条件时改一个属性（比如数值超标时标题变红），不必新建状态。鼠标移到属性面板任意一项上，点行尾的 ⋮：

![属性行的 ⋮ 菜单](./images/events-prop-menu.webp)

1. **⋮**：每个属性和每个分组的右侧都有。
2. **条件样式**：选一条数据规则，再设满足时这个属性取什么值，可以加多条，从上往下第一条满足的生效，还能设「都不满足时」的值。设了条件样式的属性在面板里变成只读。
3. **生成数据字段**：把这个属性交给数据驱动，到「数据」页签给它选一个字段，例如用「完成率」字段直接驱动进度条的进度值。
4. **生成属性数据源**：进阶用法，详见[开发文档](https://vjmap.com/app/docsvp/data/)。

菜单最后一项「重置该项」把属性恢复为默认值。

::: tip 三种「变样子」怎么选
只改一个属性用**条件样式**；一次换一整套外观用**多状态**；属性值要连续跟着某个数变（进度、透明度、角度）用**生成数据字段**。
:::

## 参考示例

首页左侧「数据交互」分类里有一批现成的示例，打开就能看到配置（看完不保存直接返回即可）：

- **事件交互示例**：八种常用写法，包括移入移出高亮、点击打开链接和切页面、入场动画、点柱子用公式改文本、发送和接收行为事件、表格点击行、传递触发。
- **多状态切换示例**、**条件样式示例**、**动态数据项示例**：状态和属性随数据变化。
- **数据联动示例**、**选中传递示例**、**数据筛选示例**：见[数据接入与绑定](./data.html)。
- **示例-窗口交互-设备详情弹窗**、**示例-画面组件-…**：点击打开画面和弹窗，见[多页面、画面与弹窗](./pages-windows.html)。
- **定时器与接口示例**：页面定时触发、调用接口更新数据。

## 下一步

- 弹窗、抽屉、切换页面的完整用法见[多页面、画面与弹窗](./pages-windows.html)。
- 地图、三维、组态里的点击要素和专用动作，见[二维地图](./map.html)、[三维场景](./scene3d.html)、[组态](./scada.html)。
- 想让 AI 帮你配交互，见 [AI 助手](./ai.html)。