前言

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

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

簡而言之，前端數(shù)據(jù)可視化是數(shù)據(jù)可視化的發(fā)展也是促使前端發(fā)展的支柱。

接下來要實現(xiàn)數(shù)據(jù)可視化平臺酷屏展示效果，前端界出現(xiàn)了各種第三方開源庫：Echarts(百度)，AntV(阿里)，Highcharts(國外公司)，D3.js(國外公司)等。但是，萬變不離其宗。

總的來說，所有的第三方庫都是基于這兩種瀏覽器圖形渲染技術(shù)實現(xiàn)的： Canvas 和 SVG 。

SVG Canvas 不依賴分辨率 依賴分辨率 支持事件處理器 不支持事件處理器 最適合帶有大型渲染區(qū)域的應用程序(如地圖) 弱的文本渲染能力 復雜度高會減慢渲染速度(任何過度使用 DOM 的應用都不快) 能夠以 .png 或 .jpg 格式保存結(jié)果圖像 不適合游戲應用 最適合圖像密集型的游戲 可以為某個元素附加 JavaScript 事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。 一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個場景都需要重新繪制。

數(shù)據(jù)可視化利器對比

1、兼容性

• Highcharts 兼容 IE6 及以上的所有主流瀏覽器，完美支持移動端縮放、手勢操作。
• Echarts 兼容 IE6 及以上的所有主流瀏覽器，同樣支持移動端的縮放和手勢操作。
• D3 兼容IE9 及以上的所有主流瀏覽器，對于移動端的兼容性也同上。
• AntV 兼容IE9 及以上的所有主流瀏覽器，對于移動端的兼容性也同上。

2、是否免費/開源

• Highcharts 非商業(yè)免費，商業(yè)需授權(quán)，代碼開源。
• Echarts 完全免費，代碼開源。
• D3 完全免費，代碼開源。
• AntV 完全免費，代碼開源。

3、難易程度

• Highcharts 基于SVG，方便自己定制，但圖表類型有限。
• Echarts 基于Canvas，適用于數(shù)據(jù)量比較大的情況。
• D3版本v3 基于SVG，方便自己定制；D3版本v4支持Canvas+SVG，如果計算比較密集，也可以選擇用Canvas。除此之外，D3圖表類型非常豐富，幾乎可以滿足所有開發(fā)需求，但代碼相對于以上兩個插件來說，會稍微難一點。
• G 是 AntV 螞蟻金服旗下一款易用、高效、強大的 2D 可視化渲染引擎，提供 Canvas、SVG 等多種渲染方式的實現(xiàn)。

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

了解可視化相關(guān)設計

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

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

效果截圖

登錄界面

酷屏首頁組件庫

看了以上效果圖，都只是靜態(tài)的，還不過癮，直接線上體驗：jackchen0120.github.io/vueDataV/

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

項目架構(gòu)

│ vue.config.js // webpack配置 ├─public│ favicon.ico // ico圖標│ index.html // 入口html文件└─src │ App.vue // 根組件 │ main.js // 程序入口文件 ├─assets │ ├─iconfont // 引用阿里巴巴矢量圖標庫 │ ├─img // 存放公共圖片文件夾 │ ├─js │ │ utils.js // 封裝工具類方法 │ └─styles │ │ base.scss // 基礎(chǔ)樣式文件 │ │ common.scss // 公用樣式文件 │ └─fonts // 字體庫文件 ├─components │ │ index.js // 封裝組件庫 │ ├─bar3d // 3D立體柱狀圖 │ ├─bgAnimation // 登錄界面背景圖動畫 │ ├─cakeLinkage // 柱餅組合聯(lián)動 │ ├─circleNesting // 圓環(huán)套圓環(huán) │ ├─circleRunway // 環(huán)形跑道圖 │ ├─colorfulArea // 多彩輪播面積 │ ├─colorfulRadar // 多彩雷達 │ ├─dynamicLine // 動態(tài)輪播折線圖 │ ├─dynamicList // 動態(tài)列表動畫 │ ├─flashCloud // 閃動云 │ ├─gauge // 儀表盤 │ ├─modal // 自定義全局模態(tài)框 │ ├─pyramid // 金字塔動畫 │ ├─pyramidTrend // 金字塔趨勢 │ ├─rainbow // 彩虹軌道圖 │ ├─ringPie // 環(huán)形餅圖 │ ├─ringPin // 環(huán)形氣泡圖 │ ├─rotateColorful // 旋轉(zhuǎn)多彩圖 │ ├─scanRadius // 掃描半徑圖 │ ├─scrollArc // 滾動弧形線 │ ├─seamless // 新聞無縫滾動 │ ├─sinan // 司南排名圖 │ ├─staffMix // 人員占比 │ ├─szBar // 雙軸柱狀圖 │ ├─toast │ │ index.js // 注冊全局消息提示框組件 │ │ index.vue // 自定義消息提示框模板 │ └─waterPolo │ index.vue // 水球圖、水波圖 ├─router │ index.js // 單頁面路由注冊組件 ├─store │ index.js // 狀態(tài)管理倉庫未使用到 └─views Home.vue // 酷屏首頁統(tǒng)計圖 Login.vue // 登錄界面復制代碼

技術(shù)棧

• vue2.6
• echarts4.7
• axios
• webpack
• ES6
• scss
• css3
• jquery
• iconfont

功能模塊

• 登錄界面抖動
• 粒子動效
• 背景圖輪播
• 自定義全局模態(tài)框
• 自定義消息提示框
• 數(shù)字滾動
• 酷屏首頁組件庫
• 各種酷炫小部件
• 可視化面板布局

準備工作

windows 10系統(tǒng)

下載安裝 nodejs v10+ nodejs.org/zh-cn/

代碼編輯器工具 sublime text 3

搭建開發(fā)環(huán)境(此處非小白可以忽略)

1) 打開命令行窗口，輸入 node -v 查看，出現(xiàn)版本號說明已安裝成功，如下圖：

2) 使用以下命令安裝vue-cli3

npm install -g @vue/cli# 安裝指定版本npm install -g @vue/cli@3.11.0# ORyarn global add @vue/cli復制代碼

3)安裝完成，檢查vue版本，如下圖：

vue -V復制代碼

4) vue-cli3 創(chuàng)建項目及運行

vue create woyouzhecd woyouzhenpm run serve復制代碼

在瀏覽器地址欄輸入：http://localhost:8080/

5)開發(fā)配置 在使用vue-cli3腳手架創(chuàng)建項目后，因為webpack的配置均被隱藏，當你需要覆蓋原有的配置時，則需要在項目的根目錄下，新建vue.config.js文件，來配置新的配置如下(含注解)：

module.exports = { publicPath: process.env.NODE_ENV === "production" ? "/vueDataV/" : "/", // 部署生產(chǎn)環(huán)境和開發(fā)環(huán)境下的URL：可對當前環(huán)境進行區(qū)分 lintOnSave: false, // 是否在代碼保存時進行eslint檢測 productionSourceMap: false, // 是否在構(gòu)建生產(chǎn)包時生成sourceMap文件，false將提高構(gòu)建速度 devServer: { // webpack-dev-server 相關(guān)配置 port: 8081, // 端口號 hotOnly: false, // 取消熱更新 // proxy: { // 使用代理 // '/api': { // target: '//api.github.com', // 目標代理服務器地址 // changeOrigin: true, // 允許跨域 // pathRewrite:{ // '^/api': '' // 重寫路徑，需要設置重寫的話，要在后面的調(diào)用接口前加上/api來代替target // } // } // }},configureWebpack: { // 把原本需要寫在webpack.config.js中的配置代碼 寫在這里 會自動合并 externals: { 'jquery' : '$', 'echarts': 'echarts', 'axios' : 'axios' } }}復制代碼

在配置文件vue.config.js中添加webpack的externals對象，把不需要打包的依賴庫(減少打包文件體積)，直接按上面的方式寫入。然后在index.html文件中引入CDN即可，如下圖：

6) 公共樣式，圖片，字體，JS，統(tǒng)一存放在/src/assets/文件夾下，如下圖：

js文件夾里面的utils.js文件的作用，如下圖：

作者偷懶只針對酷屏首頁組件庫會用到，通常按照UI設計師提供的數(shù)據(jù)可視化屏幕尺寸都是寬：1920px，高：1080px，所以上面的配置也按照這個尺寸進行屏幕縮放。后續(xù)會專門講數(shù)據(jù)可視化面板的合理布局。首頁引用如下圖：

iconfont文件夾存放圖標文件，可以直接去阿里巴巴矢量圖標庫查找下載所需要的圖標。

style文件夾存放base.scss(基本樣式)和common.scss(組件庫通用樣式)，直接在main.js文件引入即可，如下圖：

功能設計和代碼實現(xiàn)

按照上面的步驟完成腳手架構(gòu)建，把需要的axios、vue-router、echarts、scss、jquery等依賴庫引入和安裝配置好，準備開始上路。

登錄界面主要功能包含：背景圖輪播、粒子動效、登錄框抖動、自定義消息提示框等等。

• 背景圖輪播

利用css3動畫屬性animation實現(xiàn)輪播背景圖的路徑，使這個動畫無限循環(huán)下去，以實現(xiàn)背景圖自動輪播的效果。背景圖輪播功能已封裝注冊全局小組件在components/bgAnimation目錄文件，直接上代碼：

復制代碼

如果對animation屬性不熟，可以參考這個網(wǎng)站教程。

• 粒子動效

點擊查看效果 這種粒子背景特效在Vue框架中實現(xiàn)不難，因為已經(jīng)有大神幫我們做好了，我們只需引入到自己的項目中即可，作者推薦vue-particles插件，簡單看一下使用，具體用法可以移步vue-particles官網(wǎng)。

復制代碼

• 自定義全局消息提示框

消息彈框組件，默認3秒后自動關(guān)閉，可設置info/success/warning/error類型。效果如下圖：

消息彈框功能已封裝注冊全局小組件在components/toast目錄文件，代碼如下：

{{ content }} 復制代碼

在components/toast/index.js目錄文件中注冊全局組件，如下圖：

在main.js中全局引用，如下圖：

在登錄模板界面調(diào)用即可，如下圖：

參數(shù)名 類型 說明 content String 內(nèi)容 time Number 消失時間，默認3秒后消失 type String info/success/warning/error，默認info hasClose Boolean 是否含關(guān)閉按鈕，默認false

最后

由于時間關(guān)系，文章寫的倉促，難免會有些問題或BUG出現(xiàn)，愿意接受批評和指正。此次實戰(zhàn)項目分享內(nèi)容分為上下兩篇文章，下一篇要分享的內(nèi)容大概有：自定義全局模態(tài)框、首頁設計布局、數(shù)字滾動、某個酷炫小部件開發(fā)等。

作者：懶人碼農(nóng)
鏈接：https://juejin.im/post/5ebbf0b25188256d8a229035
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

總結(jié)

以上是生活随笔為你收集整理的3d饼图 vue_Vue+Echarts构建可视化大数据平台实战项目分享（附源码）(上)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。