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

IsaiahJune 发布于10天前 阅读198次
0 条评论

Vue

前言

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

正文

演示

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

演示1

演示2

项目地址

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

Vue 拖拽图表

使用方法

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

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

后语

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

页脚

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

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

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

wechat

wechat

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

  • orangepanda
  • purplebird
  • silverrabbit
  • ticklishduck
  • smalldog
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。