觀衆老爺們，來試試這個用 Vue 擼的數據可視化後臺吧

首先放個線上地址你們感覺一下(因爲後端用的是 leancloud 的免費套餐，所以可能會比較慢)：

vue-data-board

P.S. 建議你們儘可能本身註冊一個帳號(能夠隨便填一個密碼)，若是用默認的測試帳號，不要亂改東西，不然別人進來就沒得看了，由於你作的任何改動都會保存到後端數據庫裏。

再放幾個 GIF 吸睛：

拖拽實現數據的查詢和可視化

向看板中添加圖表

經過拖拽自定義看板佈局

緣起

也不知道爲何，公司裏對數據分析、數據可視化的需求愈來愈多。這部分需求有的來自數據分析師(若是公司有數據分析師的話)，有的來自產品、運營、開發，還有的來自公司的中層、高層領導，有的只是要把某一個表的數據導出，也有的但願能從多個維度對數據進行分析、可視化，還有的但願把多個可視化圖表整合在一個頁面中造成可視化的報表，有的是一次性的需求，有的是週期性的常態化需求，這些需求經常雜亂無章，並且數據的維度不少，交互比較複雜，可視化圖表的各類參數衆多，很難作到通用，並且不少數據較爲敏感又須要嚴格的權限控制，時間一長，權限的管理又成了一個頭疼的事情，種種因素致使各類數據需求耗費了前端開發的大量精力，髮量日漸稀薄。

相信不少公司都會有相似的數據需求，零散卻必須，雖然市面上也有很多產品提供了相似的數據管理功能，可是一來因爲數據的敏感性，許多公司不肯意將本身的數據放到別的平臺上，二來這些數據管理的產品大多收費昂貴且功能難以定製。因此不少公司裏這種數據需求就會落到前端的頭上，這些需求雖然零散甚至臨時，可是實現起來卻並不簡單，可視化的視覺效果須要各類參數去配置，而大量的數據須要驗證、清洗、轉換又使得接口調試和對接變得十分麻煩，增長了前端的工做量，也讓前端的 coding 變得十分惱人。

這時候作一個強大靈活易用的數據分析後臺就十分有用了，經過傻瓜式地拖拽生成圖表的方式，可讓沒有數據基礎的同事也能很快上手；經過將公司的數據源整合到一塊兒，能夠方便地對數據進行管理；經過構建看板整合多個圖表，能夠快速生成報表，便於查看、分享；經過用戶自定義圖表參數，能夠有效地解決前端調參的痛苦。(一個十分工整的排比句，oh yeah!)

我在我司搭建數據分析後臺也將近一年了，實際上我從第一份實習開始就在接觸BI、數據相關的事情，在數據分析後臺的搭建過程當中也踩了許多的坑，期間經歷了同事的各類吐槽，嘗試了各類不一樣的解決方案，現在雖然代碼能力不見多少提高，可是對於業務需求的雜亂無章、變幻莫測可謂多有體會。

在經歷了半年多痛苦的折磨以後，我根據業務需求，參考其餘數據分析產品，搭建了全新的數據分析平臺，這一平臺現在在我司運轉良好，一方面已經知足了一部分數據需求，另外一方面也有很好的可擴展性，能夠應對更復雜的業務場景。我將前端部分抽離出來，造成了這個開源項目：

dongsuo/vue-data-board

首先介紹下這個項目的基本狀況，這個項目主要是用 Vue+ElementUI 搭建的，可視化部分是用的echarts，拖拽和佈局部分是 vue-grid-layout 和 vuedraggable這兩個庫。這個項目一些技術、思路以及一部分輔助代碼是參考了潘神的這個後臺項目：

PanJiaChen/vue-element-admin

項目的後端部分除了少數數據是用了 mock 數據以外，都是用了 [leancloud](http://leancloud.cn) 進行搭建， Demo 數據的數據庫部分則是用了國外的一個免費數據庫 Free MySQL Hosting 速度比較慢，也沒有 root 權限，可是測試足夠用了，其餘的用戶數據、圖表、看板等則是用了 leancloud 的對象存儲。

主要功能點和實現原理

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

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 作了一些自定義的配置。另外還有環境變量的配置等等，項目的配置方面建議參考潘神的這篇文章：

  手摸手，帶你用vue擼後臺 系列五(v4.0新版本) - 掘金

• 項目中用到了不少 icon，雖然Element UI 的 icon 在2.8.x版本以後增長了很多， 可是仍是不能知足咱們的需求(一些經常使用的 icon 仍然沒有，好比保存)，所以須要本身來解決 icon 的問題，這裏要感謝 iconfont 上的設計師如山提供的這套漂亮的數據可視化圖標庫。至於 icon 如何優雅地管理使用，再次祭出潘神的文章：

  手摸手，帶你優雅的使用 icon - 掘金

• 項目的後端接口文檔我是用的 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 簡單狀態管理 Store 模式 - 掘金

  這個模式用起來是沒問題的，對於大型項目裏的複雜組件來講是很好用的，很方便地解決了複雜組件內部的狀態共享問題。可是目前對於我這個項目而言並非特別適用，由於這部分的狀態管理放在全局狀態也挺合適，固然這裏是見仁見智了，我以爲就目前這樣也挺好。

最後

這個項目的核心功能目前算是已經完成得七七八八了，還有一些功能很不完善，後期會逐步完善起來。數據分析可視化平臺國內社區裏的討論貌似很少，一些中文的討論大可能是設計和產品方面的介紹，並且過於理想化，在實踐中可能不太容易落地，關於技術實現的討論很少(固然後端和運維方面仍是比較多的)，開源項目也沒見多少，所以我這個項目也算是作了一些探索，固然我沒多少經驗，雖然參考了幾個商業平臺的產品交互設計，可是不少地方都是摸着石頭過河，有些地方應該會有更好的解決方案，但願個人這個項目能夠拋磚引玉，也但願你們可以多提意見。
本文原創地址： 觀衆老爺們，來試試這個用 Vue 擼的數據可視化後臺吧-DongSuo