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