这里收录平台内置组件。每个组件都可以拖到画布上,通过属性面板调参、绑定数据、配置交互。本页给出全组件分类速查与可交互实时预览;分类详解页给出每个组件的用途、参数、绑定字段与交互。
交互式预览
下面内嵌的预览器渲染的是真实组件。改动右侧「样式参数」,左侧预览会实时更新,等价于在编辑器属性面板里调参。
「关键绑定」列为该组件特有的数据字段槽(三元组);标「—」表示无数据绑定(纯样式 / 布局 / 装饰)。通用参数见文末,不重复列出。
| type | 名称 | 用途 | 关键绑定 |
|---|
basic-text | 文本 | 单行 / 多行标题、说明、数值文本 | value-field(0~1,绑值) |
basic-paragraph | 段落 | 富文本段落、多段说明 | value-field |
basic-markdown | Markdown | Markdown 文档 / 说明 | value-field(首行值作内容) |
| type | 名称 | 关键绑定 |
|---|
chart-bar | 柱状图 | category-field(1) + metric-fields(≥1) |
chart-line | 折线图 | 同柱状 |
chart-area | 面积图 | 同柱状 |
chart-biaxial / chart-biaxial-stack | 双轴图 / 双轴堆叠 | 类目 1 + 左右轴数值 |
chart-pie | 饼图 | category(1) + value(1) |
chart-scatter | 散点图 | x / y 数值字段 |
chart-radar | 雷达图 | 指标维度 + 数值 |
chart-funnel | 漏斗图 | 名称 + 数值 |
chart-gauge | 仪表盘 | 数值 |
chart-heatmap | 热力图 | x / y / 值 |
chart-treemap | 矩形树图 | 名称 + 数值(可层级) |
chart-sankey | 桑基图 | 源 / 目标 / 流量 |
chart-graph | 关系图 | 节点 / 边 |
chart-liquid | 水球图 | 数值(百分比) |
chart-wordcloud | 词云 | 词 + 权重 |
chart-capsule | 胶囊柱图 | 名称 + 数值 |
chart-map | 区域地图 | 地区名 + 数值(choropleth) |
| type | 名称 | 关键绑定 |
|---|
basic-table | 基础表格 | table-data-fields(多) + table-key-fields + select-sync-fields |
basic-scroll-board | 轮播列表 | 列字段(自动滚动) |
basic-ranking-list | 排名列表 | 名称 + 数值(排序榜单) |
| type | 名称 | 用途 |
|---|
group-panel | 分组面板 | 最常用容器,内嵌任意子组件;可背景 / 边框 / 内容自适应缩放 |
data-repeater | 数据循环容器 | 按数据行批量复制模板子组件(item-fields ≥1 + row-key-field) |
component-instance | 组合组件 | 引用一个可复用的组合组件实例 |
window-instance | 画面组件 | 在页面内嵌入另一个画面 |
group-popup | 弹窗 | 页面内弹层(区别于窗口) |
group-tabs | 选项卡 | 多标签页容器 |
group-buttons | 按钮组菜单 | 一组联动按钮 |
| type | 名称 | 用途 |
|---|
basic-button | 按钮 | 触发交互动作 |
basic-search | 搜索框 | 输入 → 联动 / 筛选 |
basic-select | 下拉菜单 | 选项 → 联动 / 切换 |
basic-pagination | 分页器 | 表格 / 列表分页 |
basic-list | 列表 | 数据列表 |
basic-progress | 进度条 | 数值进度(可绑数据) |
basic-iframe | iframe | 内嵌外部网页 |
nav-views | 视图导航 | 关联视图容器做多视图切换 |
| type | 名称 | 用途 |
|---|
basic-image | 图片 | 静态 / 数据驱动图片 |
basic-graphical | 图形 | 矢量图形(矩形 / 圆 / 线等) |
basic-carousel | 轮播图 | 图片轮播 |
basic-video | 视频 | 视频播放 |
| type | 名称 | 用途 |
|---|
basic-timer | 时钟 | 实时时间显示 |
basic-timing | 计时器 | 正 / 倒计时 |
basic-calendar | 日历 | 日期展示 |
basic-timeselect | 时间选择 | 时间范围选择 → 联动 |
basic-timescale | 时间轴 | 时间刻度轴 |
| type | 名称 | 用途 |
|---|
basic-card | 数字卡片 | KPI 指标卡(可绑数值 + 趋势) |
deco-border | 装饰边框 | 科技感边框 |
deco-decoration | 装饰 | 装饰线条 / 图案 |
deco-pipeline | 流程管道 | 流动管道装饰 |
basic-flipper | 翻牌器 | 数字翻牌动画 |
basic-icon | 图标 | 图标(可数据驱动 / 交互) |
| type | 名称 | 用途 |
|---|
layout-row / layout-column / layout-grid | 行 / 列 / 网格 | 规整格子骨架,拖分隔条调比例 |
layout-flow-row | 流式行 | 卡片墙、自动换行 |
layout-fixed-panel | 固定面板 | 定位容器 |
layout-dock | 停靠布局 | 上下左右停靠 + 主区 |
layout-sidebar | 侧边栏 | 主区 + 可折叠侧栏 |
layout-accordion | 手风琴 | 多个可折叠分区 |
layout-section | 视图容器 | 多视图切换的容器(配 nav-views) |
placeholder | 占位 | 空格占位 |
布局控件的选型与配方见画布系统 · 内部布局。
| type | 名称 | 说明 |
|---|
map-2d | 2D 地图 | 见 2D 地图子系统 |
scene-3d | 三维场景 | WebGPU 数字孪生 / 三维组态,内部由 41 种三维元素搭建,见三维场景子系统 |
scada-2d | 组态画板 | 见 组态 SCADA 子系统 |
map-control-* | 地图控件 | 坐标 / 比例尺 / 缩放 / 指南针 / 导出 / 视角 / 底图切换 / CAD 图层 / 图层管理 / 鹰眼 / 测量 / 图例,独立摆放并关联地图,见 地图控件组件 |
每个组件都继承一批通用参数,常用的有:
| 参数 | 说明 |
|---|
position / size | 位置 [x, y] / 大小 [宽, 高] |
opacity / rotate | 不透明度(0~100)/ 旋转 |
no-events | 鼠标穿透(纯装饰元素常用) |
background / border | 背景 / 边框(开启后有对应子项) |
cross-filter-emit / cross-filter-receive | 联动发出 / 接收 |
select-sync-emit / select-sync-receive | 选中发出 / 接收 |
filter | 组件级数据筛选(先筛后用) |
数据交互(筛选 / 联动 / 选中 / 动态数据项 / 条件样式)的机制见数据系统;触发器 / 动作见事件交互。各分类详解页只列组件特有的参数与绑定字段,通用参数不再重复。
分类详解页里,每个组件按统一结构编写:
- 用途:一句话说明 + 典型场景
- 实时预览:内嵌预览器(数据 / 图表 / 容器类组件)
- 参数:特有 options(名称 / 类型 / 默认 / 说明)
- 数据绑定:可绑定字段与数量约束
- 交互:支持的触发器 / 动作
- 示例:工程文件片段
完整且永不过时的全量参数字典由源码自动导出(widget-schema.generated.json);本手册是人读向导,聚焦高频项与用法。