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

前言

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

正文

演示

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

项目地址

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

Vue 拖拽图表

使用方法

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

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

后语

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

页脚

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

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

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

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

html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
html5限制拖拽区域怎么实现,html5怎么实现拖拽
html5实现拖拽的方法:首先新建一个空的HTML5结构:然后在body元素中放置一个div:最后通过allowDrop,drag和drop三个函数实现拖拽功能即可. 本文操作环境:Windows7系 ...
html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器,基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于 Layo ...
原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
原生JS实现拖拽垂直进度条
先看效果图代码如下 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" ...
原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...
`echarts`实现关系图拖拽
echarts 目标:echarts实现关系图拖拽效果:当所有的节点都处在高亮的状态时,可以拖拽任何节点.当点击其中一个节点与之有直接联系的节点高亮,其他的置灰.并且高亮的节点均可拖拽.点击空白处时 ...

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

前言

正文

演示

项目地址

使用方法

后语

页脚

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

最新文章

热门文章