事件交互与多状态

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

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

「事件」页签

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

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

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

选择触发

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

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

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

选择动作

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

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

再往下还有：

例子：点柱子显示城市

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

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

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

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

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

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

新建状态

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

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

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

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

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

用事件切换状态

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

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

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

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

让数据自动切换状态

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

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

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

条件样式与属性数据

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

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

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

参考示例

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

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

下一步

• 弹窗、抽屉、切换页面的完整用法见多页面、画面与弹窗。
• 地图、三维、组态里的点击要素和专用动作，见二维地图、三维场景、组态。
• 想让 AI 帮你配交互，见 AI 助手。