Vue 结合 echarts 原生 html5 实现拖拽排版报表系统

前言

不知道各位 coder 有没有碰到过许多重复的业务需求，比如排版相类似的报表，只不过是顺序稍微换了一下，就是一个新的页面，虽然基于模板思想来写的话也能减少不少代码，但是相对的不那么方便，笔者最近就是碰到了类似的需求，忍无可忍，遂该项目便诞生了了。

正文

演示

gif 图稍大，若加载不出来请稍等片刻 (..•˘_˘•..)

项目地址

如果觉得我有帮到什么忙的，欢迎 star，我会更有动力的 (ง •̀_•́)ง。

Vue 拖拽图表

使用方法

详细的开发指南和配置参数就不在此赘言，在项目文档中已经有详细的说明，这里只是稍微介绍一下。

• 首先该项目分为两个页面，一个是拖拽排版页面，一个是预览页面，布局都在排版页面中完成
• 在排版页面中，左侧的 + 用来添加行（row），右侧的 + 用来添加列（col），或称组件
• 所有的操作皆可通过拖拽完成，在完成排版之后点击 >> 按钮即可预览生成的页面
• 在预览页面中有纯前端实现的 pdf 导出功能，具体思想是将 dom 转为 canvas，再导出为图片，再将图片转为 pdf
• 当前的数据传输方式是将布局保存在了 localstorage 中得以实现的
• 实际项目中建议的流程是先在排版页面中新建或者修改布局，在预览页面再保存或者更新布局

后语

减少人类重复无意义的工作，这就是程序员存在的意义，同时也是我的目标，不可否认该项目里面还是有不少冗余代码，一点点修改一点点完善，也欢迎大家私信我交流交流，撒花。

页脚

代码即人生，我甘之如饴。

我在这里 gayhub@jsjzh 欢迎大家来找我玩儿。

欢迎小伙伴们直接加我，拉你进群一起学习前端呀，记得备注一下你来自哪里哦。

转载于:https://juejin.im/post/5c871ed95188257c64690ee6