基于react-grid-layout实现可视化拖拽

前言

做前端的小伙伴们可能会经常遇到做一个自定义dashboard这样的需求。 那么什么是自定义dashboard呢？自定义dashboard其实就是一个自定义面板，用户能够在面板上自由的拖拽，新增，删除组件。组件可以是各种echarts图形，也可是各种数据表格。通过各个组件的拖拽组合，从而让用户自定义想要看到的面板。

项目预览

demo地址

源码地址

组件可以动态添加，删除，可以自由拖拽，缩放。并且缩放后组件内部的echarts图表也会跟着缩放。

技术架构

1. 前端框架：React
2. UI库：Ant Design
3. 脚手架：