巧曦大屏搭建平台

主题

实操教程（跟着做） ​

多篇 从零跟做 教程：图表、表格、多页切换、POST 下钻、Dataset 模式、入场动画等。每步都写清楚 点哪里。

建议先完成 零基础必读 里的登录和新建大屏。

教程一：第一个柱状图 ​

目标：画布上出现一根根彩色柱子，带标题。

步骤 ​

  1. 我的大屏 → 新建或打开一个大屏 → 进入 编辑器。
  2. 左侧点 组件 Tab（第一个）。
  3. 找到分组 图表组件 → 柱状图。
  4. 按住左键 拖到中间画布 灰色区域，松开。
  5. 单击 刚拖出来的柱状图，四周出现选中框。
  6. 看 右侧属性，确认上方分段在 数据（没有就点 数据）。
  7. 找到 填入示例数据 按钮 → 单击。
  8. 弹出确认框 → 点 确定 / 填入。
  9. 画布上应出现柱子（若仍空白，点顶栏 保存，等 1 秒再看）。
  10. 点分段 内容 → 找 主标题 → 改成「月度销量」。
  11. 点分段 样式 → 可改 主题色 或 系列色板。
  12. 用选中框 拖大 组件，让图表占满中间区域。
  13. 顶栏点 保存（或 Ctrl+S）。
  14. 点 预览 → 新标签页里应看到同样图表。
  15. 预览页 单击柱子 默认不会跳页（要交互见 教程三 或 菜单与事件链）。

常见问题 ​

现象处理
只有空白框再点一次 填入示例数据 → 保存
预览和编辑不一样是否已 保存；是否绑了数据源但接口失败
找不到柱状图左栏搜索框输入「柱状」

更细的配置项：图表组件 · 柱状图

教程二：第一个表格 ​

目标：画布上出现带表头的表格，有几行示例数据。

步骤 ​

  1. 在编辑器左栏 组件 → 列表与表格（或类似分组）→ 表格。
  2. 拖到画布上，单击 选中。
  3. 右侧切到 数据 分段。
  4. 点 填入示例数据 → 确认。
  5. 表格应出现多列多行（姓名、部门、数值等，以示例为准）。
  6. 切 内容 分段：
    • 显示表头 保持开启
    • 显示边框 可按喜好开关
    • 启用分页 可先 关（数据少时一屏看完）
  7. 切 样式 → 可改 背景颜色。
  8. 拖组件边缘 拉高、拉宽，让表格够大。
  9. 保存 → 预览，在新页看表格是否正常。

改列名或改数据（可选） ​

仍在 数据 分段：

  1. 列配置：每列有 标题 和 字段名（dataIndex）。
  2. 行数据：JSON 数组，每个对象的字段名要和 dataIndex 一致。
  3. 改完任意一项后，表格会即时刷新（编辑器内可见）。
  4. 改完务必 保存。

接真实接口（下一步） ​

  1. 先按 数据源 · REST 手把手 建好数据源。
  2. 表格 数据 段 → 绑定数据源 → 选接口。
  3. 配置 列映射：接口字段 → 表格列字段。
  4. 保存 → 预览。

详情：列表与表格 · 表格

教程三：按钮切换第二页 ​

目标：第 1 页有个按钮，预览里 点击后跳到第 2 页。

必须在预览里测

编辑器画布上点按钮 不会 切页。一定要 保存 → 预览。

A. 准备两个页面 ​

  1. 看顶栏 当前页名称（默认可能是「页面1」）。
  2. 点名称右侧 ▼ 展开页面列表。
  3. 底部点 添加页面 → 出现「页面2」。
  4. 点 页面2 切换到第二页。
  5. 第二页拖一个 标题，文字写「这是第二页」（方便辨认）。
  6. 点页面 ▼ 切回 页面1。

B. 第一页放按钮 ​

  1. 左栏 基础组件 → 按钮 → 拖到页面1 画布。
  2. 选中按钮 → 右侧 内容 → 按钮文字 改成「进入详情页」。
  3. 右侧切 行为 分段 → 找到 交互事件（点击）。

C. 配置点击跳转 ​

  1. 常用模板 下拉 → 选 跳转子页（会自动填好动作类型）。
  2. 若弹出「是否覆盖」→ 点 应用。
  3. 动作类型 应为 跳转页面。
  4. 目标页面 下拉 → 选 页面2（不要留空）。
  5. 顶栏 保存。

D. 验证 ​

  1. 点 预览（会先保存）。
  2. 新标签页应在 页面1，看到按钮。
  3. 单击按钮 → 整屏变成 页面2 的内容。
  4. 若没反应：检查目标页是否选对、是否只在编辑器里点的。

教程四：顶栏菜单切换三页 ​

目标：顶部横条菜单，点「总览 / 明细 / 地图」切换三页。

步骤 ​

  1. 顶栏页面 ▼ → 添加页面，直到共有 3 个页面。
  2. 分别切到各页，各拖一个 标题，文字写「总览」「明细」「地图」（方便区分）。
  3. 切回 页面1（总览）。
  4. 左栏 基础组件 → 菜单 → 拖到画布 最上方，拉 宽 到接近全屏宽。
  5. 选中菜单 → 内容 → 布局 选 水平。
  6. 点 编辑菜单项 打开编辑器。
  7. 第一行：文案「总览」，链接类型 页面，目标 选 页面1。
  8. 点 添加项（或 +）：文案「明细」，链接 页面，目标 页面2。
  9. 再添加：文案「地图」，链接 页面，目标 页面3。
  10. 关闭菜单项编辑器 → 保存 → 预览。
  11. 在预览里点三个菜单文字，应分别切页；当前页对应项 高亮。

子菜单、弹窗型菜单见 菜单与事件链 · 菜单组件。

教程五：点击柱子弹出提示 ​

目标：预览里点柱状图某根柱子，弹出小窗显示类目名。

前提 ​

画布上已有 柱状图 且 填入示例数据（见 教程一）。

步骤 ​

  1. 单击 柱状图选中。
  2. 右侧 行为 → 交互事件（点击）。
  3. 常用模板 → 选 打开提示弹窗 → 如有覆盖提示点 应用。
  4. 动作类型 变为 事件链（多动作）；下方 事件链配置 里有一段 JSON。
  5. 其中 content 可含 {{data.name}}（表示点击的那根柱子的名称）。一般不用改，默认即可。
  6. 保存 → 预览。
  7. 单击某根柱子 → 应弹出带标题「详情」的小窗，内容里有点击项名称。

要 点击后跳页 而不是弹窗：模板选 下钻：存变量并跳页，并在 JSON 里把 pageId 改成你的目标页。见 菜单与事件链 · 事件链。

教程六：组件入场动画 ​

目标：预览打开时，标题 淡入 或 从下滑入，展厅感更强。

两种动画别混

  • 组件入场动画（本教程）：页面加载时，每个组件按配置 出现一次。
  • 大屏设置 · 图表加载动画：只影响 图表 绘制过程，在 大屏设置与媒体 里配。

步骤 ​

  1. 编辑器选中要动画的组件（如 标题 或 柱状图）。
  2. 右侧切 行为 分段。
  3. 找到 入场动画 区块。
  4. 动画类型 下拉 → 选 淡入（或 上滑 / 缩放 等）。
  5. 持续时间(ms)：默认约 500，可拖到 800～1200 更柔和。
  6. 延迟(ms)：同一页多个组件时，第二个可设 20～50，形成 依次出现（最大约 100）。
  7. 保存 → 预览 → 刷新预览页 看入场效果（编辑器画布 不播放 入场动画）。
  8. 不要动画：类型改回 无。

常见问题 ​

现象处理
预览没动画是否 预览 而非编辑；是否 刷新 预览页
全部一起动给不同组件设不同 延迟
图表还有第二种动效检查 大屏设置 是否开了 图表加载动画

教程七：POST 接口与点击下钻 ​

目标：第 1 页 柱状图数据来自 POST 接口；预览里 点击某根柱子后 跳到第 2 页（明细布局），并记住点击的类目名。

没有 POST 接口也能跟做

若暂时没有 POST 接口，可先把数据源 方法 选 GET 走通 A～D 全流程，接口可用后再改回 POST。下钻跳页与 GET/POST 无关。

前提 ​

A. 新建 POST 数据源 ​

  1. 编辑器 → 顶栏 更多 ▼ → 数据源（或右栏 数据源 Tab）。
  2. 点 添加（或 ＋ 展开表单）。
  3. 名称：如「区域销量 POST」。
  4. 类型：REST API / HTTP。
  5. URL：粘贴完整接口地址；若参数在地址上（?year=2024），直接写在 URL 里。
  6. 方法：选 POST（不是 GET）。
  7. 展开下方 调试 → 点 发送请求。
  8. 若成功：在 响应预览 JSON 树里 单击 含类目/数值的节点（常见为 data 或 data.list），记住路径。
  9. 若失败：看报错（404、401、跨域等）；本地开发一般经平台代理，需接口可访问。
  10. 点 创建 保存数据源。

调试细节见 POST 接口手把手。

B. 第 1 页：柱状图绑定 POST ​

  1. 顶栏 页面 ▼ 确认在 页面1（总览）。
  2. 若无柱状图：左栏 图表组件 → 柱状图 → 拖到画布。
  3. 单击 选中柱状图 → 右侧 数据 分段。
  4. 选择数据源 → 选「区域销量 POST」。
  5. 数据路径 (dataPath)：填调试里记下的路径（如 data；留空表示用整包 JSON，仅当结构已是图表格式时）。
  6. 点 保存绑定。
  7. 若画布仍像示例数据：点数据源列表 手动拉取（刷新图标）或 保存大屏 后再看。
  8. 柱子字段与接口不一致时，在 数据 · 图表数据 或系列映射里对照 图表 · 柱状图 调整（接口需接近 categories + series 或 Dataset 结构）。
  9. 顶栏 保存。

C. 准备第 2 页（明细） ​

  1. 顶栏 页面 ▼ → 添加页面 → 切到 页面2。
  2. 拖 标题，文字写「区域明细」（或「明细页」）。
  3. （可选）拖 表格 → 数据 → 填入示例数据，当作明细占位；生产环境可再绑 筛选后的 POST/GET。
  4. 切回 页面1。

D. 配置点击下钻 ​

  1. 单击 页面1 的柱状图。
  2. 右侧 行为 → 交互事件（点击）。
  3. 常用模板 → 下钻：存变量并跳页 → 有覆盖提示则 应用。
  4. 动作类型 应为 事件链（多动作）；事件链配置 里大致为：先 setVariable 再 switchPage。
  5. 把 switchPage 里的 pageId 改成 页面2 的 ID（与 目标页面 下拉一致；只有两页时选 页面2 即可）。
  6. setVariable 里 key 默认如 selectedName，value 为 {{data.name}}（点击柱子的类目名）— 一般 不用改。
  7. 保存。

E. 验证 ​

  1. 点 预览（会先保存）。
  2. 在 页面1 单击某根柱子。
  3. 应 整屏切到页面2（明细布局）。
  4. 若没反应：是否在 编辑器 里点的（须预览）；pageId 是否为空；是否 保存。

F. 确认「点的是哪一根」（可选） ​

想在下钻时 弹窗显示类目名 再跳页：

  1. 仍在柱状图 事件链配置 JSON 最前面 加一步（注意逗号）：
json
{
  "action": "openModal",
  "params": {
    "title": "下钻",
    "content": "您选择了：{{data.name}}"
  }
}
  1. 保存 → 预览 → 点柱子 → 应先弹小窗再切页（若只加了 openModal 没 switchPage，则只弹窗）。

进阶：第二页按选中项换 POST 数据 ​

变量在 单次预览会话 内有效。若第 2 页表格/图表要 带区域参数 再请求 POST，需数据源配置 params + 组件 参数映射 里写 {{vars.selectedName}}，见 参数映射与事件变量。零基础做到 跳页 即可交付演示。

常见问题 ​

现象处理
调试成功、柱子为空dataPath 是否指向含图表数据的节点；是否 保存绑定
POST 必须带 Body编辑器暂无 Body 框，见 POST 说明
跳页了但第 2 页数据不变正常；筛选接口属进阶，见上节

教程八：柱状图 Dataset 模式 ​

目标：不用 categories + series，改用 表格式 dimensions + source 驱动柱状图（类似 Excel 列名 + 行数据）。

无需接口

本教程全程 静态数据；接口若直接返回 { dimensions, source }，绑定时 dataPath 指到该对象即可。

前提 ​

已完成 教程一 · 柱状图（画布上已有柱状图）。

A. 填入经典示例 ​

  1. 单击 柱状图 → 数据 → 填入示例数据 → 确认。
  2. 确认 内容 分段里 数据模式 为 经典 (categories + series)（默认）。

B. 切换到 Dataset ​

  1. 内容 分段 → 数据模式 下拉 → 选 Dataset (dimensions + source)。
  2. 编辑器会 自动转换 当前经典 JSON 为 Dataset 格式。
  3. 数据 分段 → 打开 图表数据 JSON，结构类似：
json
{
  "dimensions": ["月份", "销量", "利润"],
  "source": [
    { "月份": "一月", "销量": 120, "利润": 30 },
    { "月份": "二月", "销量": 200, "利润": 45 }
  ]
}
  1. 画布上柱子应仍正常（系列数 = 数值列个数）。

C. 手改三行数据（跟做） ​

在 图表数据 里改成下面内容（可直接复制粘贴覆盖）：

json
{
  "dimensions": ["月份", "销量", "利润"],
  "source": [
    { "月份": "一月", "销量": 120, "利润": 30 },
    { "月份": "二月", "销量": 200, "利润": 45 },
    { "月份": "三月", "销量": 150, "profit": 38 }
  ]
}
  1. 发现 三月 可能缺 利润 柱：第三行误写 profit 应改为 "利润"，与 dimensions 列名 完全一致。
  2. 改正确后 保存 → 预览应见 两个系列、三根类目。

D. 双系列与图例 ​

  1. 内容 → 显示图例 保持开启。
  2. 样式 → 系列色板 可设两种颜色区分「销量」「利润」。
  3. 若两列数值差距大、想 左轴销量、右轴利润：内容 → 开 双 Y 轴 → 右轴系列 勾选「利润」，见 图表 · 双 Y 轴。

E. 绑 API（可选） ​

接口返回：

json
{
  "dimensions": ["region", "amount", "count"],
  "source": [
    { "region": "华东", "amount": 100, "count": 20 }
  ]
}
  1. 按 REST 手把手 建数据源。
  2. 柱状图 数据 → 绑定 → dataPath 指向上面对象（或外层包一层时填 data.chart 等）。
  3. 保存绑定 → 保存 → 预览。

常见问题 ​

现象处理
切 Dataset 后空白dimensions 至少 2 列（1 个类目 + 1 个数值）；source 为数组
某系列不显示source 每行字段名必须与 dimensions 字符串一致（区分大小写）
想改回经典数据模式 选回 经典，会自动转换

更多说明：图表 · Dataset 模式

做完之后 ​

想学文档
模板库怎么用模板库 · 手把手
备份项目备份与导入
发布给客户逐步发布
每个按钮含义编辑器逐项说明

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

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