巧曦大屏搭建平台

主题

菜单与事件链 ​

大屏 多页面导航 与 点击交互 的专项说明。菜单组件自带导航能力；其它组件（按钮、图表等）在 行为 → 交互事件 中配置点击动作，复杂场景使用 事件链。

一、菜单组件 ​

从左侧 组件 拖入 菜单，在属性 内容 / 样式 中配置（无独立「数据」段）。

1.1 适用场景 ​

场景建议
左侧 / 顶栏页内导航垂直或水平菜单
多页面大屏切换菜单项链接类型选 页面
详情弹层链接类型选 弹窗
跳转外部系统链接类型选 链接

菜单仅在 预览 / 发布页 生效；编辑器画布上点击不会切页。

1.2 内容 · 展开控制 ​

配置说明
默认展开预览时带子菜单的项是否默认展开
可折叠关闭后子菜单始终展示，且无折叠箭头
居中展示菜单项在组件框内水平居中

1.3 编辑菜单项 ​

点击 编辑菜单项 打开编辑器，每行可配置：

字段说明
图标Ant Design Outlined 图标（可选）
文案显示文字
链接类型见下表
目标页面 ID / 弹窗页 / URL

链接类型

类型目标填写预览效果
无—仅展示，不可点（灰色）
页面下拉选择大屏内某一页切换到该页（整页替换）
弹窗选择要在弹层中展示的页弹窗内渲染该页画布
链接https://...新标签页打开

子菜单：项右侧 + 添加子项；子项字段与一级相同。有子项时，点击父项可展开/收起（可折叠开启时）。

选中高亮

链接类型为 页面 且目标等于当前页时，该项会 高亮（选中样式）。

1.4 样式 ​

配置说明
背景颜色菜单整体背景
文字 / 选中文字 / 选中背景默认与选中态
悬停文字 / 悬停背景鼠标经过
布局垂直（侧栏）或 水平（顶栏）
图标大小、颜色、与文字间距
文字大小
缩进宽度仅垂直布局，控制子级缩进

1.5 操作步骤示例 ​

顶栏三页切换

  1. 大屏内创建「总览 / 明细 / 地图」三个页面
  2. 拖入菜单，布局选 水平，宽度拉满顶栏
  3. 编辑菜单项：三项链接类型均为 页面，分别指向三页
  4. 保存 → 预览 点击菜单验证

弹窗看详情

  1. 单独做一页「详情」布局
  2. 列表或按钮所在页，菜单项（或其它组件）选 弹窗 + 目标「详情页」

二、交互事件（通用点击） ​

除 菜单、iframe 外，多数组件在 行为 → 交互事件（点击） 中配置。

2.1 配置入口 ​

  1. 选中组件（如按钮、图表、图片）
  2. 右栏 行为 Tab → 交互事件
  3. 可选 常用模板 快速填入，再微调

2.2 动作类型 ​

动作类型说明
无不响应点击
跳转页面切换到同大屏指定页（非弹窗）
弹出页面弹窗展示指定页
外部链接新标签打开 URL
事件链（多动作）JSON 数组，按顺序执行多个动作

前三种保存为 type + target；事件链保存为 chain 数组。

2.3 常用模板 ​

模板效果
跳转子页切到其它页面
弹出子页弹窗展示其它页
打开外部链接新标签打开 URL
刷新数据源事件链：重新拉取第一个数据源
打开提示弹窗事件链：弹窗标题/内容，支持占位符
下钻：存变量并跳页写入变量后切页
下钻：存变量并刷新数据源写入变量后刷新接口

应用模板若已有配置，会提示 是否覆盖。

三、事件链 ​

当一次点击需要 多步操作（先记变量再跳页、先跳页再刷新等），选 事件链（多动作），在 事件链配置 中填写 JSON 数组。

3.1 基本格式 ​

json
[
  { "action": "动作名", "params": { "参数": "值" } },
  { "action": "动作名", "params": { } }
]

按 数组顺序 依次执行；某步出错会在控制台记录，后续步骤仍尝试执行。

3.2 支持的动作 ​

actionparams说明
setVariablekey, value写入全局变量（预览会话内有效）
switchPagepageId 或 page切换大屏页面
openModaltitle, content打开文字提示弹窗
openLinkurl 或 target；可选 newTab（默认 true）打开外链
refreshDataSourcedataSourceId 或 dataSource重新拉取指定数据源

3.3 占位符 ​

字符串参数中可使用双花括号占位符（形如 data.name 路径，写作 {{data.name}}），在运行时替换：

写法含义
{{data.name}}点击携带的数据（如图表 ECharts 的 name）
{{data.dataIndex}}数据索引
{{data.seriesName}}系列名（图表）
{{vars.xxx}}已存在的事件变量
{{event.xxx}}同 data 侧事件 payload

图表示例：点击柱子后弹窗显示系列名

json
[
  {
    "action": "openModal",
    "params": {
      "title": "明细",
      "content": "您点击了：{{data.name}}，系列：{{data.seriesName}}"
    }
  }
]

下钻示例：点击后记住类目并跳页

json
[
  {
    "action": "setVariable",
    "params": {
      "key": "selectedName",
      "value": "{{data.name}}"
    }
  },
  {
    "action": "switchPage",
    "params": {
      "pageId": "2"
    }
  }
]

pageId 为工具栏页面列表中的页面标识（与「目标页面」下拉一致）。

刷新数据示例

json
[
  {
    "action": "setVariable",
    "params": {
      "key": "region",
      "value": "{{data.name}}"
    }
  },
  {
    "action": "refreshDataSource",
    "params": {
      "dataSourceId": "你的数据源ID"
    }
  }
]

数据源 ID 在 数据源 面板列表中查看（保存大屏后分配）。

3.4 变量与接口联动 ​

setVariable 写入的变量可在 数据源绑定 → 参数绑定 中引用，例如参数值填 {{vars.selectedName}}，刷新后请求会带上当前选中项。

变量在 单次预览/发布会话 内有效，刷新浏览器会清空。

3.5 图表点击数据从哪来 ​

预览页中，点击 图表扇区/柱子/折线点 时，会把 ECharts 点击参数作为 data 传入事件链。常用字段：

  • name — 类目名或数据项名
  • dataIndex — 索引
  • seriesName — 系列名称
  • value — 数值（因图表类型而异）

在编辑器画布上点击 不会 触发（需 预览 或 发布页 验证）。

四、菜单 vs 组件事件 ​

能力菜单组件按钮 / 图表等 + 交互事件
多页导航✅ 内置，可多级✅ 跳转/弹窗
外链✅✅
事件链❌✅
存变量 / 刷新数据源❌✅
图表下钻 payload❌✅（图表点击）

横向条形图 的数据行可带 linkType / target（与菜单项相同语义），在预览中 点击行 跳页/弹窗/外链，在 数据 → 编辑数据 里配置，详见 横向条形 · 行点击，无需事件链。

五、弹出页面说明 ​

弹出页面（菜单或交互事件）使用大屏 预览弹窗 样式（在大屏设置中可配遮罩、边框等）。

  • 弹窗内为 完整页面画布（该页所有组件）
  • 关闭弹窗后回到原页面
  • 与 跳转页面 区别：跳转是整屏替换，弹窗是叠加层

六、调试建议 ​

  1. 先预览再测：编辑器内不执行切页/事件链
  2. 从模板开始：交互事件选常用模板，再改 pageId / URL
  3. 事件链 JSON：注意逗号、引号；格式错误可能保存为空数组
  4. pageId 为空：模板默认选「第一个其它页」，只有一页时需手动选目标
  5. 弹窗无内容：确认目标页存在且 pageId 正确

七、完整跟做教程（推荐） ​

以下教程按 逐步点击 编写，适合零基础：

教程链接
第一个柱状图实操教程 · 教程一
第一个表格实操教程 · 教程二
按钮点击切页实操教程 · 教程三
顶栏菜单三页切换实操教程 · 教程四
点击柱子弹窗实操教程 · 教程五
入场动画实操教程 · 教程六
POST 绑图 + 点击下钻实操教程 · 教程七
Dataset 模式柱状图实操教程 · 教程八

相关文档 ​

巧曦大屏搭建平台 · 联系我们

文档随产品 v1.2.0 维护 · 巧曦信息技术服务部