前言
- 一個基於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