初次提交

.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.zip

README.md

@@ -0,0 +1,145 @@
+# 前言
+
+* 一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台，通过vue项目构建、指令的灵活运用、组件封装、组件之间通信，使内部图表组件库可实现自由替换和组合。
+* 项目中部分前端库采用外部CDN引入，可以减少打包文件体积，加快页面渲染。
+* 可视化数据大屏展示对前端性能要求高，建议使用谷歌浏览器查看或开发，屏幕尺寸为1920px宽和1080px高是最佳效果。
+* 目前制作数据可视化大屏，前端比较流行的第三方库有：Echarts（百度），AntV（阿里），Highcharts（国外公司），D3.js（国外公司）。
+* 如果感觉还不错的话，老铁们是不是赏个★Star鼓励一哈，后续会持续更新和优化，也期待大家的交流。
+
+
+[在线效果演示](https://jackchen0120.github.io/vueDataV/)
+
+## 学习教程分上下篇
+* [（上）Vue+Echarts构建可视化大数据平台实战项目分享](https://juejin.cn/post/6844904158181457933)
+* [（下）Vue+Echarts构建大数据可视化酷炫展示公司品牌实战项目分享](https://juejin.cn/post/6845166890449371149)
+
+# 效果截图
+
+## 登录界面
+
+<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/login_0.png" width="900" alt="登录界面" />
+<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/login_1.png" width="900" alt="登录界面" />
+<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/login_2.png" width="900" alt="登录界面" />
+
+## 首页酷屏统计图
+
+<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/dataV_1.png" width="900" alt="首页酷屏统计图" />
+<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/dataV_2.png" width="900" alt="首页酷屏统计图" />
+<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/dataV_3.png" width="900" alt="首页酷屏统计图" />
+<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/dataV_4.png" width="900" alt="首页酷屏统计图" />
+
+## 公司品牌介绍
+
+<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/brand.png" width="900" alt="炫酷展示公司品牌" />
+
+
+
+# 项目架构
+```
+│  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
+```
+
+#### 获取更多项目实战经验及各种源码资源，请关注作者公众号：懒人码农
+
+<img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC81LzEzLzE3MjBlM2U0ZmQ5NDZiZDQ?x-oss-process=image/format,png" width="430" alt="公众号二维码" />

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-architect

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "vueDatav",
+  "version": "0.1.0",
+  "private": true,
+  "author": "JackChen <[email protected]>",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "core-js": "^3.6.4",
+    "echarts": "^5.3.3",
+    "vue": "^2.6.11",
+    "vue-router": "^3.1.6",
+    "vue-seamless-scroll": "^1.1.21",
+    "vuex": "^3.2.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.3.0",
+    "@vue/cli-plugin-eslint": "^4.3.0",
+    "@vue/cli-service": "^4.3.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^4.13.1",
+    "sass-loader": "^8.0.2",
+    "vue-count-to": "^1.0.13",
+    "vue-particles": "^1.0.9",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <script src="//cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/echarts-liquidfill.min.js"></script>
+    <script src="//cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="app" v-cloak>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App"
+};
+</script>
+
+<style lang="scss">
+#app {
+  width: 100%;
+  height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>

src/assets/iconfont/iconfont.css

@@ -0,0 +1,45 @@
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1587564247382'); /* IE9 */
+  src: url('iconfont.eot?t=1587564247382#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASYAAsAAAAACbAAAARLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDbAqFaIUaATYCJAMgCxIABCAFhG0HZBuICBEVnM3JfhbYzRfR06xnIqVricL+W7/GTzkHwfP03ue5mVkJ7S/gl62AFBRjwDXvvsv+6a1ikWLjFGvCkY0233dqXYO1gAgVZsHS3uCTu853suUn6cZOgIC6vz9UzQaLz2fJdvk/a29cg8LhUDBgo3tbr2QtSAGnoNUidt0kHyK2nrwbAnAnIxMpWbpiTVyRSA4SgLRr3bIxri0b0kyzoEGUkTM1nIgTmjHKOMuECfnHyxsKcQUGsiK5V9UWpZpR9Ll+PlxZtoV66o21Pw9gnQcUIBPQQEaO+gajylwmCiPYrDkA3mgIKPtCcr+Wz9s97/F8uG2jTWvbyemCQ/T+xQOFhIAKkVGAOJPoPDVqs7wLeK4lFwo8d9bS17eEBQP6tpBR9e1gQaDvAQtO0A+HnjtMdt3fF/AHLjOR0oxasKAgIt8uePmIp6fW/v6+nmHFdTx921675rhxI+/6dfPq1ZqNz46unGWsML850jtGbjUdVc2a1fPMGo68voNK2tZ67qKHuItHX3cuWRWJw100PPUVa83fP3pvpLUuCWvVmDUiKzY0NT5XS3r/r8erJTfK+Pyutd3H82rOmLFiWdC0WYGhNa3QqYnLg6fPFjN8usyuPXVrcLZizZhVobMOSiRB4Q7WEdQmnlXfnD56pRXkmDYmpOWM+dsDw+sZx4FWYznK21Lqo3nlRsbJeFlGo3ZPt8/aPihz0S2Z5EtdfE1UoWYF5F/c4V0yY48ShlTGVv3xo1ZvNTFUdcWoLxPTwY8m93JU14yMAgMbOV2d5yPiM/wymTB+WV8BSp8oEw40Y03xNYQUD6vj54h1+NUJK55/y2gpWpxwlEnKNmx7iXjjhoJ6iY6hqv/uJye1+DmxLWeWcWu8VkVMaViUhhVKe+rLgw0P57zDd61/dqj0IP2Bdj1PmYXQHquK7tN//+p9HKVYqerXH3Zo0mR3TIvoNQMGrI5d7ez8fvXq9/wDYO8XN6jiACrdWA32NbVGZeQWS+QRAEwyZj6oNEPRP97nYMC6Lpsb+my+aR4aALePd7yhx2xLYnveFQGQ5X8zOXFCh8rE7qr9weSeCMCVEQW+JwvufA78vUL+3N+nIYicAUFryS0wUElBoZETNbUEJ0xGcEZjD+4UlDnfg5AuKKjdAOkMY0A8NoCAwxdEPM4RJeo9kEl4BwqeKBDuvHS84t6pZncROENJ109qPI9BOG1XND+geu2dNJU54wWiTZLyJOsW7zFC9nGMvlWFWaAgPNAdux/6nikKt/CW1GbxnKZh7I0Sz8Nk50KAY6BErj6RhsdGIV1sdr33fwCVVz1HZnoGki9AqGZ9kktkBOK9biT1PJfN6k2lYEzQ9wsEG5A7eKDnOUbi+K4WeCZRb8hEZ6k2K1B1yfENwyu9xGSykzxlk0CREmUqVKlRx2KFLH3PmWXRPIiXb6JTfWcp1+9OxmaslhBhWeur91CdTAAA') format('woff2'),
+  url('iconfont.woff?t=1587564247382') format('woff'),
+  url('iconfont.ttf?t=1587564247382') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1587564247382#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-user:before {
+  content: "\e66c";
+}
+
+.icon-close:before {
+  content: "\e667";
+}
+
+.icon-info:before {
+  content: "\e604";
+}
+
+.icon-password:before {
+  content: "\e606";
+}
+
+.icon-warning:before {
+  content: "\e676";
+}
+
+.icon-error:before {
+  content: "\e686";
+}
+
+.icon-success:before {
+  content: "\e66b";
+}
+

src/assets/iconfont/iconfont.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="user" unicode="&#58988;" d="M283.083845 605.200938c0-126.207423 102.313224-228.5186 228.511437-228.5186 126.2064 0 228.514507 102.311177 228.514507 228.5186 0 126.202307-102.308107 228.51553-228.514507 228.51553C385.390929 833.716468 283.083845 731.403245 283.083845 605.200938L283.083845 605.200938zM647.796314 376.145102c-39.302121-25.200962-86.044702-39.814798-136.202055-39.814798-50.154283 0-96.894817 14.613836-136.197962 39.814798-171.106006-56.998155-294.485011-218.435964-294.485011-408.697239 0-11.157107 0.422625-22.218024 1.254573-33.164331l858.852706 0c0.831948 10.946306 1.255597 22.007223 1.255597 33.164331 0 190.261275-123.372865 351.698061-294.483988 408.697239L647.796314 376.145102zM647.796314 376.145102"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="close" unicode="&#58983;" d="M810 622l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="info" unicode="&#58884;" d="M512 810.56A426.56 426.56 0 1 1 938.56 384 426.88 426.88 0 0 1 512 810.56z m42.56-640h-85.12v256h85.44v-256z m0 341.44h-85.12V597.44h85.44V512z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="password" unicode="&#58886;" d="M780.8 541.42H665.6v42.89c0 72.31-19.85 193.3-153.6 193.3-138.87 0-153.6-135.05-153.6-193.3v-42.89H243.2v42.89C243.2 773.75 348.79 896 512 896s268.8-122.25 268.8-311.69v-42.89z m-192-314.84c0 43.52-34.58 78.65-76.8 78.65s-76.8-35.13-76.8-78.65c0-29.46 15.4-54.47 38.44-67.82v-89.64c0-21.74 17.25-39.7 38.4-39.7s38.4 17.96 38.4 39.7v89.64c23 13.35 38.36 38.36 38.36 67.82zM896 384v-393.61c0-65.26-51.87-118.39-115.2-118.39H243.2c-63.291 0-115.2 53.13-115.2 118.39V384c0 65.22 51.87 118.39 115.2 118.39h537.6c63.33 0 115.2-53.17 115.2-118.39z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="warning" unicode="&#58998;" d="M512 768c-213.589333 0-384-170.410667-384-384s170.410667-384 384-384 384 170.410667 384 384-170.410667 384-384 384z m-36.949333-150.229333c10.069333 10.069333 18.688 16.768 35.029333 16.768 18.261333 1.450667 35.029333-7.168 41.770667-20.138667 7.68-9.130667 11.989333-29.269333 10.069333-41.301333 0-3.328-2.389333-25.898667-3.370667-32.128l-13.44-170.410667c0-16.810667-3.370667-33.578667-10.069333-46.549333-3.370667-10.069333-13.44-16.810667-26.88-16.810667a25.258667 25.258667 0 0 0-23.509333 16.810667c-6.741333 16.810667-10.069333 30.250667-10.069334 46.549333L465.450667 537.6c-3.370667 30.250667-3.370667 20.181333-3.370667 36.949333 0 16.341333 3.370667 29.781333 12.970667 43.221334z m73.898666-470.912a48.128 48.128 0 0 0-33.578666-13.397334c-13.44 0-26.88 3.328-36.992 13.397334a55.338667 55.338667 0 0 0-16.768 39.850666c0 13.44 3.370667 26.88 13.44 36.949334 10.069333 10.112 23.509333 16.810667 36.949333 16.810666 13.44 0 26.88-6.698667 36.949333-16.768 10.069333-10.112 13.44-23.552 13.44-36.992-0.469333-16.298667-3.84-29.738667-13.44-39.850666z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="error" unicode="&#59014;" d="M512 810.666667C276.48 810.666667 85.333333 619.733333 85.333333 384s191.146667-426.666667 426.666667-426.666667 426.666667 190.933333 426.666667 426.666667S747.52 810.666667 512 810.666667z m42.666667-640h-85.333334v85.333333h85.333334v-85.333333z m0 170.666666h-85.333334V597.333333h85.333334v-256z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="success" unicode="&#58987;" d="M512 832q190.016-4.992 316.512-131.488T960 384q-4.992-190.016-131.488-316.512T512-64q-190.016 4.992-316.512 131.488T64 384q4.992 190.016 131.488 316.512T512 832z m-56-536l-99.008 99.008q-12 11.008-27.488 11.008t-27.008-11.488-11.488-26.496 11.008-27.008l127.008-127.008q11.008-11.008 27.008-11.008t27.008 11.008l263.008 263.008q15.008 15.008 9.504 36.512t-27.008 27.008-36.512-9.504z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>