(上)Vue+Echarts構建可視化大數據平臺實戰項目分享(附源碼)

前言

分享之前我們先來普及一下什麼是數據可視化？數據可視化可以把數據從冰冷的數字轉換成圖形，揭示蘊含在數據中的規律和道理。數據可視化通俗來說就是：數據的展示、處理和分析。目的是藉助於圖形化手段，清晰有效地傳達與溝通信息。

那前端數據可視化又是什麼呢？前端數據可視化其實就是利用前端表現層的手段，以前端手段展示、處理和分析數據。前端因為H5的到來，使前端有了質的飛躍，也使前端數據可視化的飛速發展得到了契機。H5提供的canvas就是這一契機。它是前端利用JS製作在做前端數據可視化的利器，幾乎全部前端數據可視化工具都是基於其上做的。

簡而言之，前端數據可視化是數據可視化的發展也是促使前端發展的支柱。

接下來要實現數據可視化平臺酷屏展示效果，前端界出現了各種第三方開源庫：

Echarts（百度）：

https://www.echartsjs.com/zh/index.html，

AntV（阿里）：

https://antv.vision/zh，

Highcharts（國外公司）：

https://www.highcharts.com.cn/demo/highcharts/，

D3.js（國外公司）：

https://observablehq.com/@d3/gallery

以上列舉四種比較流行的圖表庫。但是，萬變不離其宗。

總的來說，所有的第三方庫都是基於這兩種瀏覽器圖形渲染技術實現的：Canvas和 SVG 。

SVGCanvas不依賴解析度依賴解析度支持事件處理器不支持事件處理器最適合帶有大型渲染區域的應用程式（如地圖）弱的文本渲染能力複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）能夠以 .png 或 .jpg 格式保存結果圖像不適合遊戲應用最適合圖像密集型的遊戲可以為某個元素附加 JavaScript 事件處理器。在 SVG 中，每個被繪製的圖形均被視為對象。一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景都需要重新繪製。

數據可視化利器對比

1、兼容性

Highcharts 兼容 IE6 及以上的所有主流瀏覽器，完美支持移動端縮放、手勢操作。

Echarts 兼容 IE6 及以上的所有主流瀏覽器，同樣支持移動端的縮放和手勢操作。

D3 兼容IE9 及以上的所有主流瀏覽器，對於移動端的兼容性也同上。

AntV 兼容IE9 及以上的所有主流瀏覽器，對於移動端的兼容性也同上。

 2、是否免費/開源

3、難易程度

Highcharts 基於SVG，方便自己定製，但圖表類型有限。

Echarts 基於Canvas，適用於數據量比較大的情況。

D3版本v3 基於SVG，方便自己定製；D3版本v4支持Canvas+SVG，如果計算比較密集，也可以選擇用Canvas。除此之外，D3圖表類型非常豐富，幾乎可以滿足所有開發需求，但代碼相對於以上兩個插件來說，會稍微難一點。

G 是 AntV 螞蟻金服旗下一款易用、高效、強大的 2D 可視化渲染引擎，提供 Canvas、SVG 等多種渲染方式的實現。

通過各種比較之後，我最終選擇基於Echarts進行開發，上手快。當然，如果技術夠硬，可以選擇D3.js等，學成後牛逼哄哄，非常適合用於為用戶制定個性化圖表，但更強的專業性也就意味著更高的學習成本，仁者見仁智者見智吧。

了解可視化相關設計

自己去百度搜索數據可視化設計，乍一看，設計主題都是偏深藍色調。科技感，酷炫，大屏展示，視覺衝擊感強。如圖：

看完這些，基本對大數據可視化的設計有所了解，沒有UI設計師，自己也懂一點設計得話，前端一樣可以愉快的玩耍。先上一波效果圖。

效果截圖

登錄界面

酷屏首頁組件庫

看了以上效果圖，都只是靜態的，還不過癮，直接線上體驗：

https://jackchen0120.github.io/vueDataV/

高端大氣上檔次，是我追求的目標。如果感覺還不錯的話，老鐵們是不是賞個點讚鼓勵一哈，作者才有動力繼續寫下去。好了，言歸正傳，想要快速做出酷炫大屏，讓人眼前一亮，就請接著往下看。

│  vue.config.js                      ├─public│      favicon.ico                    │      index.html                     └─src    │  App.vue                            │  main.js                            ├─assets    │  ├─iconfont                         │  ├─img                              │  ├─js    │  │      utils.js                    │  └─styles    │      │  base.scss                   │      │  common.scss                 │      └─fonts                        ├─components    │  │  index.js                        │  ├─bar3d                            │  ├─bgAnimation                      │  ├─cakeLinkage                      │  ├─circleNesting                    │  ├─circleRunway                     │  ├─colorfulArea                     │  ├─colorfulRadar                    │  ├─dynamicLine                      │  ├─dynamicList                      │  ├─flashCloud                       │  ├─gauge                            │  ├─modal                            │  ├─pyramid                          │  ├─pyramidTrend                     │  ├─rainbow                          │  ├─ringPie                          │  ├─ringPin                          │  ├─rotateColorful                   │  ├─scanRadius                       │  ├─scrollArc                        │  ├─seamless                         │  ├─sinan                            │  ├─staffMix                         │  ├─szBar                            │  ├─toast     │  │      index.js                    │  │      index.vue                   │  └─waterPolo    │          index.vue                  ├─router    │      index.js                       ├─store    │      index.js                       └─views            Home.vue                              Login.vue                 
技術棧
vue2.6
echarts4.7
axios
webpack
ES6
scss
css3
jquery
iconfont
功能模塊
登錄界面抖動
粒子動效
背景圖輪播
自定義全局模態框
自定義消息提示框
數字滾動效果
酷屏首頁組件庫
各種酷炫小部件
可視化面板布局
準備工作
windows 10系統
官網下載安裝 nodejs v10+
https://nodejs.org/zh-cn/
代碼編輯器工具 sublime text 3
搭建開發環境（此處非小白可以忽略）
1） 打開命令行窗口，輸入 node -v 查看，出現版本號說明已安裝成功，如下圖：
2） 使用以下命令安裝vue-cli3
npm install -g @vue/clinpm install -g @vue/cli@3.11.0yarn global add @vue/cli
3）安裝完成，檢查vue版本，如下圖：
4） vue-cli3 創建項目及運行
vue create woyouzhecd woyouzhenpm run serve
在瀏覽器地址欄輸入：http://localhost:8080/
5）開發配置
在使用vue-cli3腳手架創建項目後，因為webpack的配置均被隱藏，當你需要覆蓋原有的配置時，則需要在項目的根目錄下，新建vue.config.js文件，來配置新的配置如下（含註解）：
module.exports = {    publicPath: process.env.NODE_ENV === "production" ? "/vueDataV/" : "/",     lintOnSave: false,     productionSourceMap: false,     devServer: {       port: 8081,       hotOnly: false,                                                         },  configureWebpack: {            externals: {       'jquery' : '$',       'echarts': 'echarts',       'axios' : 'axios'      }    }}
在配置文件vue.config.js中添加webpack的externals對象，把不需要打包的依賴庫（減少打包文件體積），直接按上面的方式寫入。然後在index.html文件中引入CDN即可，如下圖：
6） 公共樣式，圖片，字體，JS，統一存放在/src/assets/文件夾下，如下圖：
js文件夾裡面的utils.js文件的作用，如下圖：
作者偷懶只針對酷屏首頁組件庫會用到，通常按照UI設計師提供的數據可視化屏幕尺寸都是寬：1920px，高：1080px，所以上面的配置也按照這個尺寸進行屏幕縮放。後續會專門講數據可視化面板的合理布局。首頁引用如下圖：
iconfont文件夾存放圖標文件，可以直接去阿里巴巴矢量圖標庫(https://www.iconfont.cn/)查找下載所需要的圖標。
style文件夾存放base.scss（基本樣式）和common.scss（組件庫通用樣式），直接在main.js文件引入即可，如下圖：
功能設計和代碼實現
按照上面的步驟完成腳手架構建，把需要的axios、vue-router、echarts、scss、jquery等依賴庫引入和安裝配置好，準備開始上路。
登錄界面主要功能包含：背景圖輪播、粒子動效、登錄框抖動、自定義消息提示框等等。
1. 背景圖輪播
利用css3動畫屬性animation實現輪播背景圖的路徑，使這個動畫無限循環下去，以實現背景圖自動輪播的效果。背景圖輪播功能已封裝註冊全局小組件在components/bgAnimation目錄文件，直接上代碼：
<template>  <ul class="slide-box">    <li></li>    <li></li>    <li></li>    <li></li>  </ul></template>
<script>export default {  name: "bgAnimation"};</script>
<style lang="scss">.slide-box {  position: fixed;  width: 100%;  height: 100%;  background: rgba(0, 134, 179, .5);  top: 0;  left: 0;  z-index: 0;  li {    width: 100%;    height: 100%;    position: absolute;    top: 0px;    left: 0px;    color: transparent;    background-size: cover;    background-position: 50% 50%;    background-repeat: none;    opacity: 0;    z-index: 0;    -webkit-backface-visibility: hidden;    -webkit-animation: imgAnimation 48s linear infinite 0s;    -moz-animation: imgAnimation 48s linear infinite 0s;    -o-animation: imgAnimation 48s linear infinite 0s;    -ms-animation: imgAnimation 48s linear infinite 0s;    animation: imgAnimation 48s linear infinite 0s;
    &:nth-child(1) {      background-image: url(../../assets/img/bg-4.jpg);    }    &:nth-child(2) {      background-image: url(../../assets/img/bg-5.jpg);      -webkit-animation-delay: 12s;      -moz-animation-delay: 12s;      -o-animation-delay: 12s;      -ms-animation-delay: 12s;      animation-delay: 12s;    }    &:nth-child(3) {      background-image: url(../../assets/img/bg-2.jpg);      -webkit-animation-delay: 24s;      -moz-animation-delay: 24s;      -o-animation-delay: 24s;      -ms-animation-delay: 24s;      animation-delay: 24s;    }    &:nth-child(4) {      background-image: url(../../assets/img/bg-4.jpg);      animation-delay: 36s;    }  }}@-webkit-keyframes imgAnimation {  0% {    opacity: 0;    -webkit-animation-timing-function: ease-in;  }  8% {    opacity: 1;    -webkit-transform: scale(1.1);    -webkit-animation-timing-function: ease-out;  }  17% {    opacity: 1;    -webkit-transform: scale(1.2);  }  25% {    opacity: 0;    -webkit-transform: scale(1.3);  }  100% {    opacity: 0;  }}@keyframes imgAnimation {  0% {    opacity: 0;    animation-timing-function: ease-in;  }  8% {    opacity: 1;    transform: scale(1.1);    animation-timing-function: ease-out;  }  17% {    opacity: 1;    transform: scale(1.2);  }  25% {    opacity: 0;    transform: scale(1.3);  }  100% {    opacity: 0;  }}</style>
如果對animation屬性不熟，可以參考這個網站教程(https://www.runoob.com/cssref/css3-pr-animation.html)。
2. 粒子動效 
點擊查看效果地址：
https://jackchen0120.github.io/vueDataV/
這種粒子背景特效在Vue框架中實現不難，因為已經有大神幫我們做好了，我們只需引入到自己的項目中即可，作者推薦vue-particles插件，簡單看一下使用，具體用法可以移步vue-particles官網(https://vue-particles.netlify.app/)。
<vue-particles   color="#6495ED"  :particleOpacity="0.7"  :particlesNumber="80"  shapeType="circle"  :particleSize="4"  linesColor="#6495ED"  :linesWidth="1"  :lineLinked="true"  :lineOpacity="0.6"  :linesDistance="150"  :moveSpeed="3"  :hoverEffect="true"  hoverMode="grab"  :clickEffect="true"  clickMode="push"></vue-particles>
3. 自定義全局消息提示框
消息彈框組件，默認3秒後自動關閉，可設置info/success/warning/error類型。效果圖：
消息彈框功能已封裝註冊全局小組件在components/toast目錄文件，代碼如下：
<template>  <transition name="fade">    <div class="toast-container" v-if="visible">        <div class="toast" :class="type">        <div class="content">          <i class="iconfont" :class="'icon-' + type"></i>          <span>{{ content }}</span>        </div>        <i v-if="hasClose" class="iconfont icon-close close" @click="visible = false"></i>      </div>    </div>  </transition></template> <script>export default {  name: 'Toast',  data() {    return {        content: '',      time: 3000,      visible: false,      type: 'error',        hasClose: false,         }  },  mounted() {    this.close();  },  methods: {        close () {      setTimeout(() =>{        this.visible = false;      }, this.time);    }  }}</script>
在components/toast/index.js目錄文件中註冊全局組件，如下圖：
在main.js中全局引用，如下圖：
在登錄模板界面調用即可，如下圖：
參數名類型說明contentString內容time  Number 消失時間，默認3秒後消失type  String info/success/warning/error，默認infohasClose Boolean 是否含關閉按鈕，默認false
最後（未完待續）
由於時間關係，文章寫的倉促，難免會有些問題或BUG出現，願意接受批評和指正。此次實戰項目分享內容分為上下兩篇文章，下一篇要分享的內容大概有：自定義全局模態框、首頁設計布局、數字滾動、某個酷炫小部件開發等。
下一篇最後會簡單講講大數據展示公司品牌介紹實例
如果感覺還不錯的話，老鐵們是不是來github裡賞個★Star鼓勵一哈。後續會持續更新和優化，也期待大家的交流。
附上源碼地址：https://github.com/jackchen0120/vueDataV
從未停止發表一些實戰型項目的前端技術文章，分享讓更多小夥伴不花錢就能學到前端實戰經驗，如：
SPA單頁面開發H5移動端和後臺管理系統
多頁面應用開發H5移動端和後臺管理系統
小程序開發實踐
大廠前端性能優化解決方案
基於Vuejs大數據可視化大屏
react native開發APP應用項目
區塊鏈相關項目開發
重要通知
　　懶人碼農專注於分享前端IT乾貨，最新前端技術。囊括JS，HTML5，CSS3，Vue.js，React，Angular前端框架，前端項目實戰，工具資源，視頻教程，學習經驗，面試技巧。與前端大牛一起交流學習成長，掌握前沿最新IT技術。