{"id":19924626,"url":"https://github.com/qdabuliuq/quickchart","last_synced_at":"2025-09-19T04:32:45.196Z","repository":{"id":160176052,"uuid":"543108139","full_name":"QdabuliuQ/QuickChart","owner":"QdabuliuQ","description":"基于Echarts实现图表在线编辑","archived":false,"fork":false,"pushed_at":"2024-04-21T13:32:54.000Z","size":6198,"stargazers_count":10,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-12T22:18:32.977Z","etag":null,"topics":["echarts","element-plus","pinia","typescript","vue3","webworker"],"latest_commit_sha":null,"homepage":"http://106.53.176.226:8881/index/home","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QdabuliuQ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-09-29T12:22:51.000Z","updated_at":"2024-08-16T00:19:32.000Z","dependencies_parsed_at":"2024-01-03T16:28:06.307Z","dependency_job_id":"d924651d-e6a6-41fb-a2b2-afa98d7d6724","html_url":"https://github.com/QdabuliuQ/QuickChart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QdabuliuQ%2FQuickChart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QdabuliuQ%2FQuickChart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QdabuliuQ%2FQuickChart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QdabuliuQ%2FQuickChart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QdabuliuQ","download_url":"https://codeload.github.com/QdabuliuQ/QuickChart/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233551984,"owners_count":18693066,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["echarts","element-plus","pinia","typescript","vue3","webworker"],"created_at":"2024-11-12T22:18:21.010Z","updated_at":"2025-09-19T04:32:44.648Z","avatar_url":"https://github.com/QdabuliuQ.png","language":"Vue","readme":"# QuickChart\n\n#### 基于 Echarts 和 Vue3 实现，支持可视化大屏拖拽制作，提供了图表，边框，图片和图形等多种元素自由搭建。可视化编辑图表或地图样式，修改图表展示数据，支持导入/导出 excel 文件，以及 echarts 配置对象。允许导出 png/html文件。\n[在线预览地址](http://106.53.176.226:8881/index/home)\n#### 技术栈：\n* Vue3\n* TypeScript\n* Echarts\n* Axios\n* mitt\n* x-data-spreadsheet\n* webworker\n* vue3-moveable\n* Express\n* Puppeteer\n\n### 启动项目\n```\ngit clone https://github.com/QdabuliuQ/QuickChart.git\n\npnpm install\n\npnpm run dev\n```\n\n### 已实现功能：\n- 账号登录/注册\n- 修改账号密码\n- 图表制作/分享/评论/点赞\n  - 数据编辑/导出\n- 地图制作/分享/评论/点赞\n  - 数据编辑/导出\n- 大屏制作/分享/评论/点赞\n- 大屏预览/导出\n- 图表/地图导出\n- 社区分享\n- 图表/地图/大屏保存\n\n### 项目难点：\n- 利用 Puppeteer 动态生成图表/大屏数据效果图。\n  - `后端通过nodeJS，配合Puppeteer，根据前端传入的内容，动态生成代码模板并且写入到Puppeteer，调用snapShot方法完成截屏`\n- JSON 结构化数据存储大屏数据信息，配合前端渲染器进行页面解析和渲染。\n  - `通过约定的JSON配置结构，通过JSON描述大屏元素的样式信息，前端渲染器读取配置，根据不同元素加载不同的组件，在组件内部对配置初始化`\n- 跨浏览器标签页通信，编辑页面修改后预览页面会自动完成更新。\n  - `BroadcastChannel创建对应的消息频道，预览页面和编辑页面通过消息频道进行通信，将最新的图表配置传递给预览页面，预览页面接收到新的配置后完成视图渲染`\n- 大屏制作提供多种元素组件自由搭建，调整组件样式和拖拽布局位置，实现元素复制，粘贴，剪切和锁定功能。\n- 使用 webworker 进行图表数据和 excel 数据的相互转换，提高性能。\n  - `由于图表Echarts数据格式和Excel返回的数据格式存在差异，所以需要一个转换的过程，如果数据量较大，容易造成页面卡顿，所以选择新开一个线程，专门负责数据转换操作`\n- 利用动态加载配置组件，优化图表编辑页面的初始加载速度。\n  - `import.meta.glob() 导入所有组件的执行函数，创建componentMap进行缓存，如果componentMap中没有，则调用组件执行函数进行加载，并且加入componentsMap当中，后续不再需要执行组件函数，直接从componentsMap获取即可`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqdabuliuq%2Fquickchart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqdabuliuq%2Fquickchart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqdabuliuq%2Fquickchart/lists"}