Vue+Echart，实现拖拽和自定义功能

公司前一段时间有需求，要实现echart组件化，实现自定义添加、删除、修改、拖拽等功能，于是就抽时间实现了下

利用vue+vuex+axiso+vuedraggable+elementui+mock实现,直接上图吧，代码在git，稍后会发地址

1、默认主页，不可拖拽

2、点击编辑，可进行图表的拖拽、删除、修改名称功能

3、点击添加，可以添加自定义图表，当然里面都是固定自己写的图表，想添加更多的图表可以自己往里面加，文件在utils/chartview.js 

4、点击修改icon可以修改图表名称，只加了这一个功能，更多功能有用到的小伙伴们可自行添加

 

 

5、图表可拖拽，改变位置，点击保存可以将改变后的顺序保存发送给后端，当然这是前端代码并没有数据库，所以只是假性保存，刷新一下又会恢复，有用到的可以自行修改

 

还有功能没有完善，会逐渐更新并上传git，如果有需要的可去git上下载，如果对你有帮助麻烦点一下star就是对我最大的支持，代码不是很好，会逐渐完善，欢迎小伙伴们批评建议,也可以一起讨论

git: https://github.com/zzhewd/datavisualization

Email:[email protected]

题外话：另外git上也有一些自己写的demo欢迎参阅，如有帮助麻烦点个star，如有转载请注明出处，谢谢

 

每一个努力的人都值得被肯定，但是最大的肯定来源于自己！！！

加油每一天！！！

转载于:https://www.cnblogs.com/MrzhangRecord/p/11023988.html