前言
数据大屏已成为展示核心指标、监控业务运行状态的重要窗口。对于传统开发方式往往需要大量编码，周期长、门槛高、维护难。
本文推荐一款轻量级、高自定义的低代码数据大屏平台。它不仅适用于快速开发业务看板，也适合作为学习和二次开发的案例。
项目介绍
这是一款基于前端技术栈开发的数据可视化低代码平台，采用 Vite + Vue3 + TypeScript 作为核心框架，辅以 Pinia 状态管理、Vue Router、Sass 样式方案以及 ECharts 图表库。
整个系统以 JSON 数据（称为 schema）驱动页面渲染，所有内容均由结构化配置动态生成，便于存储、传输与复用。平台设计简洁，无冗余依赖，代码结构清晰，强调"可读、可控、可扩展"。
项目功能
平台主要由三大区域构成：左侧物料区、中间渲染器、右侧设置器。
功能强大，组件属性与状态双向绑定
轻量级，无不必要的插件，不臃肿
自定义性高，样式、逻辑底层手动实现，拒绝过度封装，适合二开
JSON格式驱动，便于存储
三大模块：物料区、渲染器、设置器
物料拖拽到渲染器，生成组件，支持多物料组合生成
组件无限分组嵌套
组件图层结构树管理，可拖拽移动层级与父子关系
组件式搭建，渲染器任何内容都是组件，包括页面
组件拖拽移动、方向键移动、拖拽吸附线、自定义吸附位置、吸附开关、拖拽设置大小
组件选中，设置器设置布局、属性、状态、数据、事件、监听
组件属性与状态进行JS表达式联动，状态变更自动更新属性
组件定义数据请求，支持前后JS处理器
组件定义动作，由事件触发多动作，支持并发或顺序执行，支持前后JS处理器
组件定义监听，状态变更执行动作
支持用户封装组件为模版，方便复用
支持脱离于画布的组件（如：对话框）
预览，可设置适配方式
菜单栏
骨架，物料拖入，自动布局
操作队列栈，撤销、重做
键盘快捷键
画布平移
画布缩放
组件框选，支持正框选全包裹选中，反框选进入选中
标尺，开关选项
辅助线，开关选项
网格线，开关选项
控制台日志、命令输入执行，并支持动作触发命令输入执行
自定义主色调
项目体验
体验地址：http://47.94.175.177/scada/
项目使用
1、组件生成
在侧边栏中选择"资产"分类。
从物料区将所需物料拖拽至中间画布区域，即可自动生成对应组件。
2、组件绑定状态
以文本组件为例：
拖入一个文本组件后，在右侧设置器中切换到"状态"选项卡。
添加一个状态，例如 state1: "abc"。
切换到"属性"选项卡，找到"内容"输入框，点击其右侧的表达式图标。
输入 state.state1，此时文本内容将自动显示为状态值 "abc"。
所有组件的属性与状态均为响应式设计，状态一旦变更，关联属性会自动更新。
属性表达式、状态逻辑及各类处理器函数均可访问当前组件、根组件或其他组件的数据与方法。
3、组件请求数据
仍以文本组件为例：
在设置器中切换到"数据"选项卡。
添加一个数据源，配置接口地址、请求方式、请求头和请求参数（均支持状态表达式）。
可编写"请求前处理"JS 代码，若返回值为假（falsy），则中断请求。
"请求后处理"用于解析响应体（response），通常将结果赋值给某个状态变量。
注意：保存项目时，数据源的响应体内容会被自动清空，仅保留配置。
4、组件添加事件
选中目标组件，在设置器中切换到"事件"选项卡。
在动作栏点击"添加动作"，选择动作类型（如跳转页面、修改状态、调用接口等）。
可编写"执行前处理"JS 代码，若返回假值或 Promise 被 reject，则取消动作执行。
在事件触发时机（如点击、加载完成等）下勾选已定义的动作。
支持多个动作并发执行，或按顺序执行（需动作返回 Promise）。
5、组件封装为模板
先在画布上组合好希望复用的组件结构。
在设置器"基础"选项卡中，可控制该组件是否显示子组件（即是否开启嵌套）。
右键点击该组件，选择"制作模板"。
模板将自动出现在侧边栏"资产"列表中，后续可像普通物料一样拖拽使用。
6、高级用法
若希望自定义组件表现得如同原生物料，需在"基础"设置中关闭"嵌套"属性。
通过定义"自定义属性"和"自定义事件"，实现与外部的数据交互。
子组件中可通过表达式 parent.props.xxx 获取父级自定义组件传入的属性值。
在子组件的事件处理器中，调用 emits("事件名", payload) 即可触发父级自定义组件的自定义事件。
7、控制台
系统会将浏览器控制台的输出同步显示在客户端界面中，便于实时查看运行状态与调试信息。
同时暴露了部分内部方法，允许用户在控制台直接调用。
快捷键操作：
按键盘 ` 键（通常位于 Tab 上方）呼出控制台；
按 Esc 键关闭控制台。
在控制台中可输入命令执行操作，例如：
输入 moveUp 并回车，可将当前选中组件向上移动 1px；
其他命令包括 moveDown、moveLeft、moveRight、delete 等，提升编辑效率。
项目效果
不管是静态展示还是动态数据联动，平台均能流畅应对。即使面对复杂布局或多组件协同场景，其图层管理和操作历史机制也能保障良好的编辑体验。预览模式支持多种屏幕适配策略，确保在不同终端下显示一致。
项目源码
项目源码结构清晰，模块划分合理，注释完整，非常适合前端开发学习低代码平台的设计思路。
Gitee：https://gitee.com/leoyuanzhe/scada
总结
这款低代码数据大屏平台不是封闭的工具，而是一个开放的开发框架——既能让非专业人快速上手，又为开发保留了充分的扩展空间。对于学习掌握前端工程化实践、探索可视化低代码架构的人员而言，这个项目是不错的示例。
关键词
#低代码、#数据大屏、#Vue3、#Vite、#TypeScript、#组件化、#JSON驱动、#拖拽编辑、#可视化、#二次开发
作者：小码编匠
出处：gitee.com/smallcore/DotNetCore
声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！
方便大家交流、资源共享和共同成长
纯技术交流群、需要的小伙伴请扫码
有收获？不妨分享让更多人受益
关注「程序员开源栈」，共同提升技术实力
