简介:
一款集拖拽交互、可视化配置、低代码开发于一体的数据可视化平台,支持用户自由拼接各类高颜值数据大屏,同时提供灵活的自定义组件开发与接入能力,满足从快速搭建到深度定制的全场景需求。
一、核心功能特性
- 编辑器基础能力:已完成编辑、预览、模板导入 / 导出、项目实时保存等核心功能,保障开发流程顺畅。
- 图层精细化管理:支持图层置顶、置底、上下层级调整,以及显示 / 隐藏、复制、剪切、粘贴操作,精准控制大屏元素布局。
- 组件灵活操作:实现组件缩放、旋转、拖拽定位,支持复制、粘贴、组合、拆分、移除,同时提供自动对齐功能,提升排版效率。
- 操作回溯与撤销:记录用户操作历史,支持恢复、撤销功能,避免误操作导致的开发损失。
- 自定义组件体系:
- 支持用户开发自定义组件并接入平台
- 允许对组件配置项进行个性化定义,适配多样化业务场景
- 视觉与体验优化:提供明 / 暗主题切换功能,适配不同使用环境与视觉偏好。
- 数据接入与处理:
- 支持组件数据自定义接入,满足个性化数据需求
- 完成 JS 动态数据处理能力,可实时加工分析数据
- 接口管理功能已适配示例数据、静态数据、HTTP 接口数据,覆盖多类数据来源。
- 工程化管理:采用 Monorepo 模式管理组件与依赖,提升项目维护效率。
二、关键技术栈
- 前端框架:基于 Vue3 + Vite + TypeScript 开发,兼顾开发效率与代码稳定性。
- UI 组件库:采用 NaiveUI 构建界面,保障视觉一致性与交互体验。
- 核心封装:以面向对象思想封装路由、请求、存储模块,降低代码耦合度。
- 组件优化:实现组件自动扫描注册与异步加载,有效提升页面渲染速度。
- 数据存储:使用 IndexDB 存储快照数据,减少内存占用的同时加快数据访问效率。
- 依赖解耦:设计组件独立依赖机制,分离组件与基础框架依赖库,便于后续组件独立开发与迭代。
![图片[1]-可视化大屏数据展示系统 拖拽生成各种炫酷的大屏-淘金源码](https://www.fossickcode.com/wp-content/uploads/2025/09/3cbfad2873.gif)
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END















