不懂 ECharts 也能做大屏？AK-Design 开源低代码，拖拽可视化直接上线，告别手写配置，ECharts 图表一键生成

在数据展示、数据监控、大屏可视化场景中，传统开发方式需要手写布局、手写 ECharts 配置、反复调整样式，效率极低且不易维护。

为此，基于 Vue3 + ECharts + 拖拽能力，开发了一套可视化大屏拖拽生成系统，支持组件拖拽、自由布局、样式配置、数据源绑定、一键导出，真正实现 “零代码制作大屏”。

一、系统功能介绍

1. 组件拖拽：支持图表组件拖入画布自由布局
2. 画布编辑：缩放、旋转、位置调整、层级控制、对齐辅助
3. ECharts 配置：图表类型、颜色、主题、数据、动画全配置
4. 实时预览：编辑即所见，无需刷新
5. 大屏适配：支持标准分辨率，自适应布局
6. 项目保存：支持保存 / 加载 / 导出配置

二、核心技术栈

• Vue3 + Vite
• ECharts 5.x
• 拖拽库：vue-draggable
• UI：Element Plus
• 样式：SCSS

三、系统亮点

• 纯前端实现，轻量无后端依赖
• 支持自定义组件扩展
• 支持动态数据接口接入
• 学习成本极低，小白可快速上手
• 适合毕设、外包、企业内部平台

四、适用人群

• 前端开发者学习 Vue3/ECharts
• 需要快速制作数据大屏的产品 / 运营
• 毕业设计 / 课程设计
• 外包接单快速交付
• 企业内部数据展示平台

五、github开源

https://github.com/337547038/vue-form-design/