主题
组件类型速查
平台共 40 类组件。本节为 速查;用法与完整配置 见分册文档。
详细说明
组件配置说明 · 总览 → 基础 · 图表 · 列表 · 地图与其它
一图看懂属性分段
| 标记 | 含义 |
|---|---|
| 内 | 内容 |
| 样 | 样式 |
| 数 | 数据 |
| 行 | 行为 |
| 高 | 高级 |
| 绑 | 可数据源绑定 |
| 例 | 可填入示例数据 |
基础组件(18)
| 组件 | 用途 | 分段 | 绑 | 例 | 详解 |
|---|---|---|---|---|---|
| 文本 | 段落说明 | 内·样·行 | — | — | 基础 |
| 标题 | 主/副标题 | 内·样·行 | — | — | 基础 |
| 图片 | 静态图 | 内·样·行 | — | — | 基础 |
| 视频 | 视频播放 | 内·样·行 | — | — | 基础 |
| 音频 | 音频播放 | 内·样·行 | — | — | 基础 |
| 当前时间 | 实时时钟 | 内·样·行 | — | — | 基础 |
| 形状 | 矩形/线/三角 | 内·样·行 | — | — | 基础 |
| 图标 | Ant 图标 | 内·样·行 | — | — | 基础 |
| 按钮 | 可点击 | 内·样·行 | — | — | 基础 |
| 标签 | 状态标签 | 内·样·行 | — | — | 基础 |
| 菜单 | 页内导航 | 内·样·行 | — | — | 基础 |
| 表格 | 静态/分页表 | 内·样·数·行 | ✓ | ✓ | 列表 |
| 滚动表格 | 自动滚表 | 内·样·数·行 | ✓ | ✓ | 列表 |
| 滚动列表 | 卡片列表 | 内·样·数·行 | ✓ | ✓ | 列表 |
| 横向条形 | 排名条 | 内·样·数·行 | ✓ | ✓ | 列表 |
| 滚动文字 | 跑马灯 | 内·样·数·行 | ✓ | ✓ | 列表 |
| 网页 iframe | 外链页 | 内·行 | — | — | 基础 |
| 内容块 | 嵌套大屏 | 内·行 | — | — | 基础 |
图表组件(17)
默认分段:内·样·数·行·高。均为 绑 + 例(仪表盘同)。
| 组件 | 典型场景 | 详解 |
|---|---|---|
| 柱状图 | 分类对比 | 图表 |
| 折线图 | 趋势 | 图表 |
| 阶梯图 | 阶段变化 | 图表 |
| 面积图 | 累计趋势 | 图表 |
| 折线柱状图 | 柱+线双指标 | 图表 |
| 饼图 | 占比 | 图表 |
| 玫瑰图 | 半径占比 | 图表 |
| 散点图 | 分布 | 图表 |
| 雷达图 | 多维对比 | 图表 |
| 漏斗图 | 转化 | 图表 |
| 热力图 | 矩阵 | 图表 |
| 桑基图 | 流量路径 | 图表 |
| 关系图 | 网络 | 图表 |
| 旭日图 | 层级占比 | 图表 |
| 树图 | 组织树 | 图表 |
| K 线图 | 金融 | 图表 |
| 仪表盘 | KPI 单值 | 图表 |
图表 通用配置项(标题、图例、坐标轴、色板、dataZoom 等)见 图表组件 · 通用配置。
地图与其它(5)
| 组件 | 典型场景 | 分段 | 绑 | 例 | 详解 |
|---|---|---|---|---|---|
| 渐变地图 | 区域填色 | 内·样·数·行·高 | ✓ | ✓ | 地图 |
| 飞线地图 | 2D 迁徙 | 内·样·数·行·高 | ✓ | ✓ | 地图 |
| 3D 地图 | 三维区域 | 内·样·数·行·高 | ✓ | ✓ | 地图 |
| 3D 飞线地图 | 3D 飞线 | 内·样·数·行·高 | ✓ | ✓ | 地图 |
| 词云图 | 热词 | 内·样·数·行 | ✓ | ✓ | 地图与其它 |
按场景选型
| 我想展示… | 优先考虑 |
|---|---|
| KPI 数字 | 仪表盘、标题+文本 |
| 趋势 | 折线、面积、阶梯 |
| 对比 | 柱状、横向条形 |
| 占比 | 饼、玫瑰、旭日 |
| 排名 Top N | 横向条形、滚动列表 |
| 明细表 | 表格、滚动表格 |
| 地理分布 | 渐变地图 |
| 迁徙流向 | 飞线 / 3D 飞线 |
| 关系网络 | 关系图、桑基图 |
| 嵌套其它大屏 | 内容块 |
截图清单(维护用)
将 PNG 放入 bigscreen-doc/public/images/,文档 <DocFigure> 会自动显示;已有图则无需占位框。
必截(文档里已引用)
| 文件名 | 建议截什么 | 出现在 |
|---|---|---|
login-home.png | 登录后 我的大屏 整页(含左侧菜单 + 顶栏) | 登录与界面 |
home-grid.png | 卡片列表区域(含封面、操作图标) | 我的大屏 |
create-modal.png | 点 新建大屏 后的弹窗 | 快速开始 |
template-library.png | 模板库列表 + 顶栏筛选 | 模板库 |
editor-overview.png | 编辑器全貌(左组件 + 画布 + 右属性) | 编辑器概览 |
component-panel.png | 左侧 组件 Tab(含分类列表) | 组件与画布 |
data-source-debug.png | 右栏 数据源 Tab,展开 发送请求 后有 JSON 预览 | 数据源 |
color-palette.png | 顶栏 配色 弹窗 | 配色与示例数据 |
publish-panel.png | 顶栏 发布 弹窗(含链接/二维码) | 预览与发布 |
analytics-drawer.png | 卡片 访问统计 右侧抽屉 | 我的大屏 |
contact-wechat.png | 微信二维码 | 联系我们 |
contact-qq.png | QQ 二维码 | 联系我们 |
建议补截(增强阅读,可选)
| 文件名 | 建议截什么 | 可加到 |
|---|---|---|
preview-runtime.png | 预览页整屏(有菜单/图表更好) | 菜单与事件链 |
menu-items-editor.png | 菜单 编辑菜单项 弹窗 | 菜单与事件链 |
event-chain-props.png | 组件 行为 → 交互事件 → 事件链 | 菜单与事件链 / 实操教程 |
layer-panel.png | 左栏 图层 Tab | 编辑器逐项说明 |
members-modal.png | 成员管理 弹窗 | 协作与版本 |
version-history.png | 更多 → 版本历史 | 备份与导入 |
import-export.png | 更多 → 导入/导出 | 备份与导入 |
截图小技巧
- 浏览器宽度 约 1440px,缩放 100%,用 Chrome / Edge。
- 编辑器截图 前:左/右栏 展开,关掉无关浏览器插件浮层。
- 弹窗类:只截弹窗也可,但整页截图更易辨认位置。
- 数据源调试:URL 填
https://jsonplaceholder.typicode.com/users,点 发送请求 后再截。 - PNG 即可;单张建议宽度 1200~1600px,不必 4K。
- 文件名 必须一致(区分大小写),放入
bigscreen-doc/public/images/。
