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

關注 數據可視化技術 微信公衆號