Vue 結合 echarts 原生 html5 實現拖拽排版報表系統

前言

不知道各位 coder 有沒有碰到過許多重複的業務需求，好比排版相相似的報表，只不過是順序稍微換了一下，就是一個新的頁面，雖然基於模板思想來寫的話也能減小很多代碼，可是相對的不那麼方便，筆者最近就是碰到了相似的需求，忍無可忍，遂該項目便誕生了了。

正文

演示

gif 圖稍大，若加載不出來請稍等片刻 (..•˘_˘•..)

項目地址

若是以爲我有幫到什麼忙的，歡迎 star，我會更有動力的 (ง •̀_•́)ง。

Vue 拖拽圖表

使用方法

詳細的開發指南和配置參數就不在此贅言，在項目文檔中已經有詳細的說明，這裏只是稍微介紹一下。

• 首先該項目分爲兩個頁面，一個是拖拽排版頁面，一個是預覽頁面，佈局都在排版頁面中完成
• 在排版頁面中，左側的 + 用來添加行（row），右側的 + 用來添加列（col），或稱組件
• 全部的操做皆可經過拖拽完成，在完成排版以後點擊 >> 按鈕便可預覽生成的頁面
• 在預覽頁面中有純前端實現的 pdf 導出功能，具體思想是將 dom 轉爲 canvas，再導出爲圖片，再將圖片轉爲 pdf
• 當前的數據傳輸方式是將佈局保存在了 localstorage 中得以實現的
• 實際項目中建議的流程是先在排版頁面中新建或者修改佈局，在預覽頁面再保存或者更新佈局

後語

減小人類重複無心義的工做，這就是程序員存在的意義，同時也是個人目標，不能否認該項目裏面仍是有很多冗餘代碼，一點點修改一點點完善，也歡迎你們私信我交流交流，撒花。

頁腳

代碼即人生，我甘之如飴。

我在這裏 gayhub@jsjzh 歡迎你們來找我玩兒。

歡迎小夥伴們直接加我，拉你進羣一塊兒學習前端呀，記得備註一下你來自哪裏哦。