（上）Vue+Echarts構建可視化大數據平臺實戰項目分享（附源碼）
前言
分享以前咱們先來普及一下什麼是數據可視化？數據可視化能夠把數據從冰冷的數字轉換成圖形，揭示蘊含在數據中的規律和道理。數據可視化通俗來講就是：數據的展現、處理和分析。目的是藉助於圖形化手段，清晰有效地傳達與溝通訊息。javascript
那前端數據可視化又是什麼呢？前端數據可視化其實就是利用前端表現層的手段，之前端手段展現、處理和分析數據。前端由於H5的到來，使前端有了質的飛躍，也使前端數據可視化的飛速發展獲得了契機。H5提供的canvas就是這一契機。它是前端利用JS製做在作前端數據可視化的利器，幾乎所有前端數據可視化工具都是基於其上作的。css
簡而言之，前端數據可視化是數據可視化的發展也是促使前端發展的支柱。html
接下來要實現數據可視化平臺酷屏展現效果，前端界出現了各類第三方開源庫：Echarts（百度），AntV（阿里），Highcharts（國外公司），D3.js（國外公司）等。可是，萬變不離其宗。 前端
總的來講，全部的第三方庫都是基於這兩種瀏覽器圖形渲染技術實現的： Canvas 和 SVG 。vue
| SVG | Canvas |
|---|---|
| 不依賴分辨率 | 依賴分辨率 |
| 支持事件處理器 | 不支持事件處理器 |
| 最適合帶有大型渲染區域的應用程序（如地圖） | 弱的文本渲染能力 |
| 複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快） | 可以以 .png 或 .jpg 格式保存結果圖像 |
| 不適合遊戲應用 | 最適合圖像密集型的遊戲 |
| 能夠爲某個元素附加 JavaScript 事件處理器。在 SVG 中，每一個被繪製的圖形均被視爲對象。 | 一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注。若是其位置發生變化，那麼整個場景都須要從新繪製。 |
數據可視化利器對比
一、兼容性java
- Highcharts 兼容 IE6 及以上的全部主流瀏覽器，完美支持移動端縮放、手勢操做。
- Echarts 兼容 IE6 及以上的全部主流瀏覽器，一樣支持移動端的縮放和手勢操做。
- D3 兼容IE9 及以上的全部主流瀏覽器，對於移動端的兼容性也同上。
- AntV 兼容IE9 及以上的全部主流瀏覽器，對於移動端的兼容性也同上。
二、是否免費/開源node
- Highcharts 非商業免費，商業需受權，代碼開源。
- Echarts 徹底免費，代碼開源。
- D3 徹底免費，代碼開源。
- AntV 徹底免費，代碼開源。
三、難易程度jquery
- Highcharts 基於SVG，方便本身定製，但圖表類型有限。
- Echarts 基於Canvas，適用於數據量比較大的狀況。
- D3版本v3 基於SVG，方便本身定製；D3版本v4支持Canvas+SVG，若是計算比較密集，也能夠選擇用Canvas。除此以外，D3圖表類型很是豐富，幾乎能夠知足全部開發需求，但代碼相對於以上兩個插件來講，會稍微難一點。
- G 是 AntV 螞蟻金服旗下一款易用、高效、強大的 2D 可視化渲染引擎，提供 Canvas、SVG 等多種渲染方式的實現。
經過各類比較以後，我最終選擇基於Echarts進行開發，上手快。固然，若是技術夠硬，能夠選擇D3.js等，學成後牛逼哄哄，很是適合用於爲用戶制定個性化圖表，但更強的專業性也就意味着更高的學習成本，仁者見仁智者見智吧。webpack
瞭解可視化相關設計
本身去百度搜索數據可視化設計，乍一看，設計主題都是偏深藍色調。科技感，酷炫，大屏展現，視覺衝擊感強。如圖： ios
效果截圖
登陸界面
酷屏首頁組件庫
看了以上效果圖，都只是靜態的，還不過癮，直接線上體驗：jackchen0120.github.io/vueDataV/
高端大氣上檔次，是我追求的目標。若是感受還不錯的話，老鐵們是否是賞個點贊鼓勵一哈，做者纔有動力繼續寫下去。好了，言歸正傳，想要快速作出酷炫大屏，讓人眼前一亮，就請接着往下看。
項目架構
│ 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 // 基礎樣式文件
│ │ common.scss // 公用樣式文件
│ └─fonts // 字體庫文件
├─components
│ │ index.js // 封裝組件庫
│ ├─bar3d // 3D立體柱狀圖
│ ├─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+ nodejs.org/zh-cn/
- 代碼編輯器工具 sublime text 3
搭建開發環境（此處非小白能夠忽略）
1） 打開命令行窗口，輸入 node -v 查看，出現版本號說明已安裝成功，以下圖：
2） 使用如下命令安裝vue-cli3
npm install -g @vue/cli
# 安裝指定版本
npm install -g @vue/cli@3.11.0
# OR
yarn global add @vue/cli
複製代碼
3）安裝完成，檢查vue版本，以下圖：
vue -V
複製代碼
4） vue-cli3 建立項目及運行
vue create woyouzhe
cd woyouzhe
npm run serve
複製代碼
5）開發配置 在使用vue-cli3腳手架建立項目後，由於webpack的配置均被隱藏，當你須要覆蓋原有的配置時，則須要在項目的根目錄下，新建vue.config.js文件，來配置新的配置以下（含註解）：
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "/vueDataV/" : "/", // 部署生產環境和開發環境下的URL：可對當前環境進行區分
lintOnSave: false, // 是否在代碼保存時進行eslint檢測
productionSourceMap: false, // 是否在構建生產包時生成sourceMap文件，false將提升構建速度
devServer: { // webpack-dev-server 相關配置
port: 8081, // 端口號
hotOnly: false, // 取消熱更新
// proxy: { // 使用代理
// '/api': {
// target: '//api.github.com', // 目標代理服務器地址
// changeOrigin: true, // 容許跨域
// pathRewrite:{
// '^/api': '' // 重寫路徑，須要設置重寫的話，要在後面的調用接口前加上/api來代替target
// }
// }
// }
},
configureWebpack: {
// 把本來須要寫在webpack.config.js中的配置代碼 寫在這裏 會自動合併
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文件夾存放圖標文件，能夠直接去阿里巴巴矢量圖標庫查找下載所須要的圖標。
style文件夾存放base.scss（基本樣式）和common.scss（組件庫通用樣式），直接在main.js文件引入便可，以下圖：
功能設計和代碼實現
按照上面的步驟完成腳手架構建，把須要的axios、vue-router、echarts、scss、jquery等依賴庫引入和安裝配置好，準備開始上路。
登陸界面主要功能包含：背景圖輪播、粒子動效、登陸框抖動、自定義消息提示框等等。
- 背景圖輪播
利用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屬性不熟，能夠參考這個網站教程。
- 粒子動效
點擊查看效果 這種粒子背景特效在Vue框架中實現不難，由於已經有大神幫咱們作好了，咱們只需引入到本身的項目中便可，做者推薦vue-particles插件，簡單看一下使用，具體用法能夠移步vue-particles官網。
<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秒後自動關閉，可設置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', //四種類型：info, success, warning, error
hasClose: false,
}
},
mounted() {
this.close();
},
methods: {
close () {
setTimeout(() =>{
this.visible = false;
}, this.time);
}
}
}
</script>
複製代碼
在components/toast/index.js目錄文件中註冊全局組件，以下圖：
在main.js中全局引用，以下圖：
在登陸模板界面調用便可，以下圖：
| 參數名 | 類型 | 說明 |
|---|---|---|
| content | String | 內容 |
| time | Number | 消失時間，默認3秒後消失 |
| type | String | info/success/warning/error，默認info |
| hasClose | Boolean | 是否含關閉按鈕，默認false |
最後
因爲時間關係，文章寫的倉促，不免會有些問題或BUG出現，願意接受批評和指正。這次實戰項目分享內容分爲上下兩篇文章，下一篇要分享的內容大概有：自定義全局模態框、首頁設計佈局、數字滾動、某個酷炫小部件開發等。
- 基於 flexible.js + rem 智能大屏適配
- sublime text 3 cssrem插件
- Flex 佈局
- Echarts 圖表和地圖的基本使用
若是感受還不錯的話，老鐵們是否是來github裏賞個★Star鼓勵一哈。後續會持續更新和優化，也期待你們的交流。
閱讀做者相關優質文章
- NodeJS全棧開發一個功能完善的Express項目（附完整源碼）
- 前端必知必會MySQL的那些事兒 - NodeJS全棧成長之路
- 開發一款微信小程序的個性簡歷，能打開大廠之門並得到門票？（附源碼）
- 2020值得收藏與學習280多款H5小遊戲，從入門到完全瞭解它（附源碼）
獲取更多項目實戰經驗及各類源碼資源，請關注做者公衆號：懶人碼農
- 1. （上）Vue+Echarts構建可視化大數據平臺實戰項目分享（附源碼）
- 2. （下）Vue+Echarts構建大數據可視化酷炫展現公司品牌實戰項目分享（附源碼）
- 3. 使用vue構建一個可視化大數據平臺
- 4. bin-data 大數據可視化平臺
- 5. Superset可視化數據分析平臺
- 6. 大數據Spark：從入門到實戰（附視頻教程&項目源碼）
- 7. 基於Hadoop離線大數據分析平臺項目實戰
- 8. Docker實戰-安裝大數據分析與可視化平臺superset（druid）
- 9. C++實戰項目：坦克大戰，源碼和文檔分享！
- 10. 開源項目：SandDance-數據可視化
- 更多相關文章...
- • Maven 構建 Java 項目 - Maven教程
- • Maven 構建 & 項目測試 - Maven教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • Java Agent入門實戰（二）-Instrumentation源碼概述
-
每一个你不满意的现在，都有一个你没有努力的曾经。