怎么實現Vue的數據可視化后臺

本篇內容介紹了“怎么實現Vue的數據可視化后臺”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

主要功能點和實現原理

首先介紹項目的主要功能點及實現原理：

1. 通過拖拽字段查詢數據

這個功能主要是通過構建 SQL 語句來查詢數據庫，在后端的查詢是用 Presto 來做的，Presto  可以統一查詢多種數據庫，除了傳統的關系型數據庫還可以查詢 HDFS，查詢能力比較強大。前端部分數據查詢主要是通過對 SQL  語句的解構，劃分成維度、數據、篩選、排序、數據條數等交互元素，便于沒有 SQL 基礎的用戶使用。用戶在前端的交互按照特定語法規則動態生成 SQL  發送到后端進行數據庫的查詢。當然目前 SQL 的構建功能還不完整，有一些 SQL 語法還有待支持，已經列入了開發計劃中。

2. 對數據進行可視化渲染

對數據進行可視化渲染主要是通過數據查詢的維度和數值來判斷可用的圖表類型，然后利用 vue.js 的動態組件來渲染對應的圖表組件：

// Vue.js 動態組件渲染對應的圖表類型 <component :is="currentType.componentName" :data="chartData" :schema="schema" :chart-style="chartStyle" class="visualize-window" />

這里有一個問題是圖表與數據的映射關系的問題，不同的數據適合用不同的圖表來展示，例如餅圖的數據跟堆疊柱狀圖的數據就不一樣，因此需要對各個圖表所需要的數據結構進行定義：

// 這是餅圖的匹配規則定義 matchRule: {     desc: '1個維度1個數值;0個維度多個數值',     isUsable(dimensions, calculs) {         return (dimensions.length === 1 && calculs.length === 1) || (dimensions.length === 0 && calculs.length >= 1)     } },

然后根據匹配規則來判斷圖表類型是否可用。

3. 圖表的保存和回顯

前端生成圖表后就可以保存到后端了，由于定義一個圖表所需要的字段太多，而且這些字段還可能會經常增減改動，因此不太可能讓后端在數據庫一一定義這些字段，因此我們采用的方案是由前端來維護這些字段，后端統一將所有的內容以字符串或者  json 對象的方式存在數據庫的一個字段(如 content)中。

這樣一來圖表的回顯問題也就沒有任何問題了，按照生成圖表的邏輯把 content 字段的內容解析出來就好了。

4. 圖表整合到看板

很多時候業務都需要同時查看多個圖表，這個時候就需要一個看板來整合多個圖表。看板其實是指  Dashboard，中文其實沒有很貼切的翻譯可以對應，看板勉強達意。

看板整合多個圖表在后端而言只是一個關聯關系的管理，對前端而言則需要根據看板關聯的圖表來對頁面進行布局，然后根據保存的圖表來查詢數據、可視化渲染。頁面布局主要是利用了  vue-grid-layout 進行 grid 布局，同時也支持拖拽和大小調整等。可視化的邏輯跟創建圖表時的可視化是一樣的，不再贅述。

這里遇到的問題是對于已有布局的看板，添加新圖表時，新圖表的定位要如何計算。這其實跟圖片瀑布流的問題有些相似，但是由于各個 item  不定寬高，其實相對更難一些，我已經找到了思路，做了一些計算，但是目前還不完善，完善后我會再寫文章來介紹。

5. 數據的權限問題

公司的數據其實相當敏感，對于上市公司而言，數據會影響股價走勢，對非上市公司來說，會影響投融資的進度，都是關系到公司財務甚至生死存亡的大事，因此數據的權限管理是十分重要的。在這個項目里，這一部分的解決方案其實并不簡單，但是復雜度主要在于后端而不是前端。簡單來說，我們的權限是做到了數據表這一層級，由管理員向系統中添加數據源，添加的同時定義好該數據源的權限范圍，如產品、運營、開發等權限角色。用戶進入系統后，由管理員給用戶分配權限角色，用戶只能查詢其自身對應角色所能查看的數據。由于權限和數據源管理的部分暫時還沒有添加到這個開源項目中來，因此也就不細說了，先挖個坑，以后有機會再填。

6. 其他技術點：

首先項目的構建是用了 Vue-cli@3.0，除了默認的配置之外，還通過 vue.config.js  做了一些自定義的配置。

項目中用到了很多 icon，雖然Element UI 的 icon 在2.8.x版本之后增加了不少， 但是還是不能滿足我們的需求(一些常用的 icon  仍然沒有，比如保存)，因此需要自己來解決 icon 的問題，這里要感謝 iconfont 上的設計師如山提供的這套漂亮的數據可視化圖標庫。項目的后端接口文檔我是用的 postman 進行的管理，其實 postman  有很多強大的功能，不僅僅是一個接口測試工具，接口文檔管理就是其中一個。我在開發時一般是在本地同時起前端和后端兩個項目，本地開發時通過環境變量判斷接入本地的后端接口地址：

const fetchInstance = axios.create({     baseURL: process.env.VUE_APP_BASE_API  *}*)

本地開發完成后，前端打包發布到 gh-page 分支( git subtree push --prefix docs origin gh-pages  )，后端通過 leancloud 提供的 cli 工具一鍵部署，還是挺方便的。前端的打包發布其實可以配置 Travis-ci  來實現自動部署，我暫時還沒有配(已棄療的拖延癥患者在此)。

項目的登錄授權、圖表和看板的增刪改查等都是使用了 leancloud 提供的解決方案，其實利用 leancloud 的 js-sdk  ，前端也可以很方便地實現對象存儲的增刪改查，不需要寫后端接口。但是為了保持項目代碼的純潔，避免代碼中引入奇奇怪怪的 AV.query  這種東西，我還是自己做了后端的部分，當然這部分也做的比較簡單，畢竟只是一個 Demo，主要就是基于 koa.js  做的的一些增刪改查，基本上是面向文檔編程。

項目里的狀態管理用到了 vuex, 但是其實目前為止并沒有很多全局狀態管理的需求，只有用戶 token 保存在了 store  里。另外關于狀態管理，我在這個項目的創建圖表的部分還嘗試用了Vue 的簡單狀態管理模式( 代碼在此 )，這個模式用起來是沒問題的，對于大型項目里的復雜組件來說是很好用的，很方便地解決了復雜組件內部的狀態共享問題。但是目前對于我這個項目而言并不是特別適用，因為這部分的狀態管理放在全局狀態也挺合適，當然這里是見仁見智了，我覺得就目前這樣也挺好。

“怎么實現Vue的數據可視化后臺”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！