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

褲襠三重奏發表於2019-03-12

Vue

前言

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

正文

演示

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

演示1

演示2

專案地址

如果覺得我有幫到什麼忙的,歡迎 star,我會更有動力的 (ง •̀_•́)ง。

Vue 拖拽圖表

使用方法

詳細的開發指南和配置引數就不在此贅言,在專案文件中已經有詳細的說明,這裡只是稍微介紹一下。

  • 首先該專案分為兩個頁面,一個是拖拽排版頁面,一個是預覽頁面,佈局都在排版頁面中完成
  • 在排版頁面中,左側的 + 用來新增行(row),右側的 + 用來新增列(col),或稱元件
  • 所有的操作皆可通過拖拽完成,在完成排版之後點選 >> 按鈕即可預覽生成的頁面
  • 在預覽頁面中有純前端實現的 pdf 匯出功能,具體思想是將 dom 轉為 canvas,再匯出為圖片,再將圖片轉為 pdf
  • 當前的資料傳輸方式是將佈局儲存在了 localstorage 中得以實現的
  • 實際專案中建議的流程是先在排版頁面中新建或者修改佈局,在預覽頁面再儲存或者更新佈局

後語

減少人類重複無意義的工作,這就是程式設計師存在的意義,同時也是我的目標,不可否認該專案裡面還是有不少冗餘程式碼,一點點修改一點點完善,也歡迎大傢俬信我交流交流,撒花。

頁尾

程式碼即人生,我甘之如飴。

我在這裡 gayhub@jsjzh 歡迎大家來找我玩兒。

歡迎小夥伴們直接加我,拉你進群一起學習前端呀,記得備註一下你來自哪裡哦。

wechat

wechat

相關文章