组态大屏
约 751 字大约 3 分钟
组态大屏数据可视化大屏编辑器IoT大屏
2026-06-25
产品概述
组态大屏是一套基于 Vue 3 + ECharts 的数据可视化设计工具，支持拖拽式组件布局、多数据源接入、实时数据绑定、事件联动以及自定义组件封装。编辑器深度集成 IoT 设备数据，可快速构建面向物联网场景的数据大屏。
能耗中心的配电室制作实操，见用 WorkBuddy 制作配电室 2D／3D 组态；本栏目介绍通用组态编辑器的使用方法。
核心能力
| 能力 | 说明 |
|---|---|
| 可视化拖拽编辑 | 左侧组件面板拖拽到画布，支持框选、多选、对齐吸附 |
| 多数据源支持 | 静态数据 / 动态请求 / 公共接口 / 设备属性直连 |
| 实时数据刷新 | 全局轮询 + 组件级独立轮询 |
| 事件与联动 | 鼠标事件、生命周期事件、组件间数据联动 |
| 自定义组件 | 画布内容封装为可复用组件，带封面截图与暴露属性 |
| 模板市场 | 内置大屏模板，支持一键应用 |
| 预览与发布 | 自适应/全屏/滚动多种预览模式，发布生成公开访问链接 |
技术栈
Vue 3 + TypeScript + Pinia / Naive UI / ECharts + VChart / 高德地图 + Leaflet / Three.js / Monaco Editor
本节导航
本栏目按模块拆分以下页面：
| 章节 | 说明 |
|---|---|
| 大屏管理 | 大屏项目列表与卡片操作、创建大屏、租户权限、组件/数据源/数据集管理、资源库与模板管理 |
| 编辑器界面 | 三种编辑器类型、顶部工具栏、组件面板、画布操作、图层管理与底部状态栏 |
| 组件库 | 图表、装饰、信息展示、表格、图标、图片素材、预置组件与组合组件八大类 |
| 数据绑定 | 简化/标准数据面板、静态数据、IoT 设备数据、动态请求、字段映射、适配器与自动刷新 |
| 事件与交互 | 组件交互联动、基础事件、高级生命周期事件与事件安全策略 |
| 自定义组件 | 单组件与分组组件封装、封装内部流程与简化数据模式 |
| 预览与发布 | 预览模式、发布/取消发布、导入与导出 |
| 快捷键与注意事项 | 编辑器常用快捷键参考与使用注意事项 |
更新日志
2026/10/8 06:37
查看所有更新日志
4c1aa-docs(能耗中心): 调整 WorkBuddy 配电室教程归属于b5450-docs(组态教程): 新增 WorkBuddy 配电室 2D 与 3D 实操指南于7e927-文档站全面重构：目录重排、首页重写、案例独立成站、应用市场下线于