基于 Echarts 和 Vue3 实现，支持可视化大屏拖拽制作，提供了图表，边框，图片和图形等多种元素自由搭建。可视化编辑图表或地图样式，修改图表展示数据，支持导入/导出 excel 文件，以及 echarts 配置对象。允许导出 png/html文件。
- Vue3
- TypeScript
- Echarts
- Axios
- mitt
- x-data-spreadsheet
- webworker
- vue3-moveable
- Express
- Puppeteer
git clone https://github.com/QdabuliuQ/QuickChart.git
pnpm install
pnpm run dev
- 账号登录/注册
- 修改账号密码
- 图表制作/分享/评论/点赞
- 数据编辑/导出
- 地图制作/分享/评论/点赞
- 数据编辑/导出
- 大屏制作/分享/评论/点赞
- 大屏预览/导出
- 图表/地图导出
- 社区分享
- 图表/地图/大屏保存
- 利用 Puppeteer 动态生成图表/大屏数据效果图。
后端通过nodeJS，配合Puppeteer，根据前端传入的内容，动态生成代码模板并且写入到Puppeteer，调用snapShot方法完成截屏
- JSON 结构化数据存储大屏数据信息，配合前端渲染器进行页面解析和渲染。
通过约定的JSON配置结构，通过JSON描述大屏元素的样式信息，前端渲染器读取配置，根据不同元素加载不同的组件，在组件内部对配置初始化
- 跨浏览器标签页通信，编辑页面修改后预览页面会自动完成更新。
BroadcastChannel创建对应的消息频道，预览页面和编辑页面通过消息频道进行通信，将最新的图表配置传递给预览页面，预览页面接收到新的配置后完成视图渲染
- 大屏制作提供多种元素组件自由搭建，调整组件样式和拖拽布局位置，实现元素复制，粘贴，剪切和锁定功能。
- 使用 webworker 进行图表数据和 excel 数据的相互转换，提高性能。
由于图表Echarts数据格式和Excel返回的数据格式存在差异，所以需要一个转换的过程，如果数据量较大，容易造成页面卡顿，所以选择新开一个线程，专门负责数据转换操作
- 利用动态加载配置组件，优化图表编辑页面的初始加载速度。
import.meta.glob() 导入所有组件的执行函数，创建componentMap进行缓存，如果componentMap中没有，则调用组件执行函数进行加载，并且加入componentsMap当中，后续不再需要执行组件函数，直接从componentsMap获取即可