一、專案描述

React 版本請點選這裡檢視，全新介面超級好看！！！(o ﾟ v ﾟ)ノ一個基於 Vue、Datav、Echart 框架的 " 資料大屏專案 "，透過 Vue 元件實現資料動態重新整理渲染，內部圖表可實現自由替換。部分圖表使用 DataV 自帶元件，可進行更改，詳情請點選下方 DataV 文件。專案需要全屏展示（按 F11）。專案部分割槽域使用了全域性註冊方式，增加了打包體積，在實際運用中請使用 按需引入。拉取專案之後，建議按照自己的功能區域重新命名檔案，現以簡單的位置進行區分。專案環境：Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有問題，請切換到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16。請拿去 master 分支的程式碼，其餘是開發分支。

專案展示

二、使用介紹

啟動專案

需要提前安裝好 nodejs 與 npm,下載專案後在專案主目錄下執行 npm/cnpm install 拉取依賴包。安裝完依賴包之後然後使用 vue-cli 或者直接使用命令npm run serve，就可以啟動專案，啟動專案後需要手動全屏（按 F11）。如果編譯專案的時候提示沒有 DataV 框架的依賴，輸入 npm install @jiaminghi/data-view 或者 yarn add @jiaminghi/data-view 進行手動安裝。

封裝元件渲染圖表

所有的 ECharts 圖表都是基於 common/echart/index.vue 封裝元件建立的，已經對資料和螢幕改動進行了監聽，能夠動態渲染圖表資料和大小。在監聽視窗小大的模組，使用了防抖函式來控制更新頻率，節約瀏覽器效能。複用圖表元件

複用圖表元件案例為中間部分的 任務透過率與任務達標率 模組，兩個圖表類似，區別在於顏色和主要渲染資料。只需要傳入對應的唯一 id 和樣式，然後在複用的元件 components/echart/center/centerChartRate 裡進行接收並在對應位置賦值即可。

如：在呼叫處 views/center.vue 裡去定義好資料並傳入元件

更換邊框

邊框是使用了 DataV 自帶的元件，只需要去 views 目錄下去尋找對應的位置去查詢並替換就可以，具體的種類請去 DavaV 官網檢視 如：

<dv-border-box-1></dv-border-box-1><dv-border-box-2></dv-border-box-2><dv-border-box-3></dv-border-box-3>

更換圖表

直接進入 components/echart 下的檔案修改成你要的 echarts 模樣，可以去echarts 官方社群裡面檢視案例。

Mixins 解決自適應適配功能

使用 mixins 注入解決了介面大小變動圖表自適應適配的功能，函式在 utils/resizeMixins.js 中，應用在 common/echart/index.vue 的封裝渲染元件，主要是對 this.chart 進行了功能注入。

螢幕適配

本專案藉助了 flexible 外掛，透過改變 rem 的值來進行適配，原設計為 1920px。 會員適配區間為：1366px ~ 2560px，本專案有根據實際情況進行原始檔的更改，小螢幕（如:寬為 1366px）需要自己捨棄部分動態元件進行適配，如'動態文字變換元件'會影響佈局，需要手動換成一般節點

請求資料

現在的專案未使用前後端資料請求，建議使用 axios 進行資料請求，在 main.js 對位置進行全域性配置。

三、更新情況

增加了 Echart 元件複用的功能，如：中間任務達標率的兩個百分比圖使用的是同一個元件。修復了頭部右側的圖案條不對稱的問題。修復螢幕適配問題，更換了所有的尺寸單位，統一使用 rem。使用 Mixins 注入圖表響應式程式碼。vue-awesome 改成按需引入的方式。封裝渲染函式，抽離了資料使邏輯更加清晰。新增地圖元件，並新增自動輪播功能

如果需要這個開源專案，麻煩各位看官幫忙轉發一下，然後再關注我，私信回覆【開源】就能獲取到啦！