怎么實(shí)現(xiàn)Vue的數(shù)據(jù)可視化后臺(tái)

本篇內(nèi)容介紹了“怎么實(shí)現(xiàn)Vue的數(shù)據(jù)可視化后臺(tái)”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

主要功能點(diǎn)和實(shí)現(xiàn)原理

首先介紹項(xiàng)目的主要功能點(diǎn)及實(shí)現(xiàn)原理：

1. 通過(guò)拖拽字段查詢數(shù)據(jù)

這個(gè)功能主要是通過(guò)構(gòu)建 SQL 語(yǔ)句來(lái)查詢數(shù)據(jù)庫(kù)，在后端的查詢是用 Presto 來(lái)做的，Presto  可以統(tǒng)一查詢多種數(shù)據(jù)庫(kù)，除了傳統(tǒng)的關(guān)系型數(shù)據(jù)庫(kù)還可以查詢 HDFS，查詢能力比較強(qiáng)大。前端部分?jǐn)?shù)據(jù)查詢主要是通過(guò)對(duì) SQL  語(yǔ)句的解構(gòu)，劃分成維度、數(shù)據(jù)、篩選、排序、數(shù)據(jù)條數(shù)等交互元素，便于沒(méi)有 SQL 基礎(chǔ)的用戶使用。用戶在前端的交互按照特定語(yǔ)法規(guī)則動(dòng)態(tài)生成 SQL  發(fā)送到后端進(jìn)行數(shù)據(jù)庫(kù)的查詢。當(dāng)然目前 SQL 的構(gòu)建功能還不完整，有一些 SQL 語(yǔ)法還有待支持，已經(jīng)列入了開(kāi)發(fā)計(jì)劃中。

2. 對(duì)數(shù)據(jù)進(jìn)行可視化渲染

對(duì)數(shù)據(jù)進(jìn)行可視化渲染主要是通過(guò)數(shù)據(jù)查詢的維度和數(shù)值來(lái)判斷可用的圖表類型，然后利用 vue.js 的動(dòng)態(tài)組件來(lái)渲染對(duì)應(yīng)的圖表組件：

// Vue.js 動(dòng)態(tài)組件渲染對(duì)應(yīng)的圖表類型 <component :is="currentType.componentName" :data="chartData" :schema="schema" :chart-style="chartStyle" class="visualize-window" />

這里有一個(gè)問(wèn)題是圖表與數(shù)據(jù)的映射關(guān)系的問(wèn)題，不同的數(shù)據(jù)適合用不同的圖表來(lái)展示，例如餅圖的數(shù)據(jù)跟堆疊柱狀圖的數(shù)據(jù)就不一樣，因此需要對(duì)各個(gè)圖表所需要的數(shù)據(jù)結(jié)構(gòu)進(jìn)行定義：

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

然后根據(jù)匹配規(guī)則來(lái)判斷圖表類型是否可用。

3. 圖表的保存和回顯

前端生成圖表后就可以保存到后端了，由于定義一個(gè)圖表所需要的字段太多，而且這些字段還可能會(huì)經(jīng)常增減改動(dòng)，因此不太可能讓后端在數(shù)據(jù)庫(kù)一一定義這些字段，因此我們采用的方案是由前端來(lái)維護(hù)這些字段，后端統(tǒng)一將所有的內(nèi)容以字符串或者  json 對(duì)象的方式存在數(shù)據(jù)庫(kù)的一個(gè)字段(如 content)中。

這樣一來(lái)圖表的回顯問(wèn)題也就沒(méi)有任何問(wèn)題了，按照生成圖表的邏輯把 content 字段的內(nèi)容解析出來(lái)就好了。

4. 圖表整合到看板

很多時(shí)候業(yè)務(wù)都需要同時(shí)查看多個(gè)圖表，這個(gè)時(shí)候就需要一個(gè)看板來(lái)整合多個(gè)圖表?？窗迤鋵?shí)是指  Dashboard，中文其實(shí)沒(méi)有很貼切的翻譯可以對(duì)應(yīng)，看板勉強(qiáng)達(dá)意。

看板整合多個(gè)圖表在后端而言只是一個(gè)關(guān)聯(lián)關(guān)系的管理，對(duì)前端而言則需要根據(jù)看板關(guān)聯(lián)的圖表來(lái)對(duì)頁(yè)面進(jìn)行布局，然后根據(jù)保存的圖表來(lái)查詢數(shù)據(jù)、可視化渲染。頁(yè)面布局主要是利用了  vue-grid-layout 進(jìn)行 grid 布局，同時(shí)也支持拖拽和大小調(diào)整等?？梢暬倪壿嫺鷦?chuàng)建圖表時(shí)的可視化是一樣的，不再贅述。

這里遇到的問(wèn)題是對(duì)于已有布局的看板，添加新圖表時(shí)，新圖表的定位要如何計(jì)算。這其實(shí)跟圖片瀑布流的問(wèn)題有些相似，但是由于各個(gè) item  不定寬高，其實(shí)相對(duì)更難一些，我已經(jīng)找到了思路，做了一些計(jì)算，但是目前還不完善，完善后我會(huì)再寫(xiě)文章來(lái)介紹。

5. 數(shù)據(jù)的權(quán)限問(wèn)題

公司的數(shù)據(jù)其實(shí)相當(dāng)敏感，對(duì)于上市公司而言，數(shù)據(jù)會(huì)影響股價(jià)走勢(shì)，對(duì)非上市公司來(lái)說(shuō)，會(huì)影響投融資的進(jìn)度，都是關(guān)系到公司財(cái)務(wù)甚至生死存亡的大事，因此數(shù)據(jù)的權(quán)限管理是十分重要的。在這個(gè)項(xiàng)目里，這一部分的解決方案其實(shí)并不簡(jiǎn)單，但是復(fù)雜度主要在于后端而不是前端。簡(jiǎn)單來(lái)說(shuō)，我們的權(quán)限是做到了數(shù)據(jù)表這一層級(jí)，由管理員向系統(tǒng)中添加數(shù)據(jù)源，添加的同時(shí)定義好該數(shù)據(jù)源的權(quán)限范圍，如產(chǎn)品、運(yùn)營(yíng)、開(kāi)發(fā)等權(quán)限角色。用戶進(jìn)入系統(tǒng)后，由管理員給用戶分配權(quán)限角色，用戶只能查詢其自身對(duì)應(yīng)角色所能查看的數(shù)據(jù)。由于權(quán)限和數(shù)據(jù)源管理的部分暫時(shí)還沒(méi)有添加到這個(gè)開(kāi)源項(xiàng)目中來(lái)，因此也就不細(xì)說(shuō)了，先挖個(gè)坑，以后有機(jī)會(huì)再填。

6. 其他技術(shù)點(diǎn)：

首先項(xiàng)目的構(gòu)建是用了 Vue-cli@3.0，除了默認(rèn)的配置之外，還通過(guò) vue.config.js  做了一些自定義的配置。

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

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

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

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

項(xiàng)目里的狀態(tài)管理用到了 vuex, 但是其實(shí)目前為止并沒(méi)有很多全局狀態(tài)管理的需求，只有用戶 token 保存在了 store  里。另外關(guān)于狀態(tài)管理，我在這個(gè)項(xiàng)目的創(chuàng)建圖表的部分還嘗試用了Vue 的簡(jiǎn)單狀態(tài)管理模式( 代碼在此 )，這個(gè)模式用起來(lái)是沒(méi)問(wèn)題的，對(duì)于大型項(xiàng)目里的復(fù)雜組件來(lái)說(shuō)是很好用的，很方便地解決了復(fù)雜組件內(nèi)部的狀態(tài)共享問(wèn)題。但是目前對(duì)于我這個(gè)項(xiàng)目而言并不是特別適用，因?yàn)檫@部分的狀態(tài)管理放在全局狀態(tài)也挺合適，當(dāng)然這里是見(jiàn)仁見(jiàn)智了，我覺(jué)得就目前這樣也挺好。

“怎么實(shí)現(xiàn)Vue的數(shù)據(jù)可視化后臺(tái)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！