Vue全家桶+Echarts資料視覺化實踐

寫在前面

一年前，剛開始做資料視覺化的時候，在自己理解的基礎上結合單位的專案使用HTML+CSS+JS+D3 做了一個小專案。

線上展示地址：xuxiaoyang.site/isee/

Github地址：github.com/xuxiaoyang/…

最近學習了Vue後，為了練練手，小試牛刀，對這個小專案進行了重構，下面分享一下該專案的實現。

技術棧

• Vue 2.x
• Vue-Cli Vue的腳手架工具
• Vue-Router 前端路由
• Vuex 狀態管理
• Echarts 資料視覺化庫
• Element 元件庫
• Axios 資料請求

專案初始構建

首先安裝Vue-cli 腳手架，並使用它建立一個專案

npm install -g vue-cli
vue create isee
複製程式碼

執行完這兩個命令後，會出現一系列的cmd命令選擇項，根據自己的需求選擇即可，本專案需要Babel、VueRouter、Vuex、Css Pre-processors、EsLint，路由模式選擇history mode，css預處理語言使用Less 專案結構目錄如下：

• node_modules 各種依賴模組
• public 放置靜態資源包括平臺首頁入口index.html、資料檔案等
• src資料夾 這個目錄下寫程式碼，包括程式入口、vue元件、route、store等
• package.json 專案配置檔案 其餘檔案就是Babel.Eslint等一系列配置檔案，一般不需要修改。

這樣，我們的專案架子就搭起來了，下面開始正式整專案。

安裝模組依賴

完成這個專案，還需要Element做UI元件，Axios進行資料請求，Echarts做資料視覺化圖表。

yarn add  element-ui axios echarts
複製程式碼

頁面實現

本專案是完全採用元件化的思想進行開發的響應式SPA單頁面應用，即所有的互動都在一個頁面完成，相容PC端與移動端，使用的時候你會發現第一次載入頁面相對比較慢，一旦載入完畢互動時就會很快。

src檔案下開始寫專案，包括路由元件的頂層路由App.vue，vue的入口檔案main.js，路由配置檔案route.js，vuex相關配置檔案store.js，公共元件components，頁面元件

App.Vue

路由元件的頂層路由，所有的路由元件都將掛載到這個頁面。

main.js

vue的入口檔案，註冊路由配置檔案router.js，vuex配置檔案store.js，Element元件庫以及掛載App.vue

route.js

前端路由配置檔案。專案較小，所有的前端路由全部寫在這個檔案裡。

store.js

vuex狀態管理相關配置檔案。

components資料夾

放置公共元件，包括Nav，Footer等，以Nav為例。

views資料夾

這個資料夾裡寫頁面元件，專案中的6個功能模組以及指南模組分別成為一個頁面元件，共7個頁面元件，下面以Industry.vue為例。

結語

經過上述步驟，整個專案就構建好了，專案預覽地址：

xuxiaoyang.site/isee-vue

關注 資料視覺化技術 微信公眾號