做前端的小夥伴們可能會經常遇到做壹個自定義dashboard這樣的需求。
那麽什麽是自定義dashboard呢？自定義dashboard其實就是壹個自定義面板，用戶能夠在面板上自由的拖拽，新增，刪除組件。組件可以是各種echarts圖形，也可是各種數據表格。通過各個組件的拖拽組合，從而讓用戶自定義想要看到的面板。
demo地址
源碼地址
首先，在js文件中引入WidthProvider和Responsive組件，並且實例化響應式拖拽組件。
其次，在css文件中引入插件的樣式。
在React的render方法中渲染可拖拽布局。ResponsiveReactGridLayout組件有多個屬性，這裏舉幾個比較重要的說明壹下：
通過generateDOM函數生成布局中的組件,首先先遍歷組件數組，通過每個組件的類型判斷生產柱狀圖組件，折線組件，還是餅圖組件。每個組件必須定義壹個全局唯壹的key值。data-grid為每壹個組件綁定了其屬性。下面會介紹具體的data-grid屬性。
每個組件屬性如下：
感謝支持。若不足之處，歡迎大家指出，***勉。
如果覺得不錯，記得 點贊，謝謝大家 ?