前言

• 一個基於Vue前端框架和第三方圖表庫echarts構建的視覺化大資料平臺，通過vue專案構建、指令的靈活運用、元件封裝、元件之間通訊，使內部圖表元件庫可實現自由替換和組合。
• 專案中部分前端庫採用外部CDN引入，可以減少打包檔案體積，加快頁面渲染。
• 視覺化資料大屏展示對前端效能要求高，建議使用谷歌瀏覽器檢視或開發，螢幕尺寸為1920px寬和1080px高是最佳效果。
• 目前製作資料視覺化大屏，前端比較流行的第三方庫有：Echarts（百度），AntV（阿里），Highcharts（國外公司），D3.js（國外公司）。

git連結：https://gitee.com/HuaWang400/vue-chart-component-library

效果截圖

登入介面

首頁酷屏統計圖

公司品牌介紹

專案架構

│  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                // 多彩雷達 
    │  ├─companySummary
    │  │      business.vue            // 業務範圍
    │  │      distrbution.vue         // 客戶分佈
    │  │      history.vue             // 發展歷程
    │  │      income.vue              // 營業收入
    │  │      talent.vue              // 人才隊伍
    │  │      wordCloud.vue           // 產品熱詞    
    │  ├─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
            Brand.vue                 // 公司品牌介紹
            Home.vue                  // 酷屏首頁統計圖
            Login.vue                 // 登入介面
 

技術棧

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

功能模組

• 登入介面抖動
• 粒子動效
• 背景圖輪播
• 自定義全域性模態框
• 自定義訊息提示框
• 酷屏首頁元件庫
• 各種酷炫小部件
• 炫酷展示公司品牌

下載安裝依賴

git clone https://github.com/jackchen0120/vueDataV.git
cd vueDataV
npm install 或 yarn

開發模式

npm run serve

執行之後，訪問地址：http://localhost:8081

生產環境打包

npm run build