代码优化

.gitignore

@@ -19,3 +19,4 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+*.zip

README.md

@@ -1,106 +1,81 @@
 # 前言
 
-* 一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台，通过vue组件实现数据动态刷新渲染，内部图表组件库可实现自由替换和组合。
+* 一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台，通过vue项目构建、指令的灵活运用、组件封装、组件之间通信，使内部图表组件库可实现自由替换和组合。
 * 项目中部分前端库采用外部CDN引入，可以减少打包文件体积，加快页面渲染。
-* 可视化数据大屏展示对前端性能要求高，建议使用谷歌浏览器查看或开发，屏幕尺寸为1920px宽，1080px高。
+* 可视化数据大屏展示对前端性能要求高，建议使用谷歌浏览器查看或开发，屏幕尺寸为1920px宽和1080px高的最佳效果。
 * 目前制作数据可视化大屏，前端比较流行的第三方库有：Echarts（百度），AntV（阿里），Highcharts（国外公司），D3.js（国外公司）。
+* 如果感觉还不错的话，老铁们是不是赏个★Star鼓励一哈，后续会持续更新和优化，也期待大家的交流。
 
 # 效果截图
 
+## 登录界面
+
+<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="首页酷屏统计图" />
 
 
 
 # 项目架构
 ```
-│  vue.config.js                     // webpack配置
-│                
+│  vue.config.js                     // webpack配置              
 ├─public
 │      favicon.ico                   // ico图标
 │      index.html                    // 入口html文件
-│      
 └─src
     │  App.vue                       // 根组件
     │  main.js                       // 程序入口文件
-    │  
     ├─assets
-    │  │  
-    │  ├─iconfont                     // 引用阿里巴巴矢量图标库
-    │  │      
-    │  ├─img                          // 存放公共图片文件夹
-    │  │          
+    │  ├─iconfont                     // 引用阿里巴巴矢量图标库   
+    │  ├─img                          // 存放公共图片文件夹      
     │  ├─js
     │  │      utils.js                // 封装屏幕缩放js方法
-    │  │      
     │  └─styles
     │      │  base.scss               // 基础样式文件
     │      │  common.scss             // 公用样式文件
-    │      │  
-    │      └─fonts                    // 字体库文件
-    │              
+    │      └─fonts                    // 字体库文件        
     ├─components
     │  │  index.js                    // 封装组件库
-    │  │   
     │  ├─bar3d                        // 3D立体柱状图
-    │  │      
-    │  ├─bgAnimation                  // 登录界面背景图动画
-    │  │      
-    │  ├─cakeLinkage                  // 柱饼组合联动
-    │  │      
-    │  ├─circleNesting                // 圆环套圆环
-    │  │      
-    │  ├─circleRunway                 // 环形跑道图
-    │  │      
-    │  ├─colorfulArea                 // 多彩轮播面积
-    │  │      
-    │  ├─colorfulRadar                // 多彩雷达
-    │  │      
-    │  ├─dynamicLine                  // 动态轮播折线图
-    │  │      
-    │  ├─dynamicList                  // 动态列表动画
-    │  │      
-    │  ├─flashCloud                   // 闪动云
-    │  │      
-    │  ├─gauge                        // 仪表盘
-    │  │      
-    │  ├─modal                        // 自定义全局模态框
-    │  │      
-    │  ├─pyramid                      // 金字塔动画
-    │  │      
-    │  ├─pyramidTrend                 // 金字塔趋势
-    │  │      
-    │  ├─rainbow                      // 彩虹轨道图
-    │  │      
-    │  ├─ringPie                      // 环形饼图
-    │  │      
-    │  ├─ringPin                      // 环形气泡图
-    │  │      
-    │  ├─rotateColorful               // 旋转多彩图
-    │  │      
-    │  ├─scanRadius                   // 扫描半径图
-    │  │      
-    │  ├─scrollArc                    // 滚动弧形线
-    │  │      
-    │  ├─seamless                     // 新闻无缝滚动
-    │  │      
-    │  ├─sinan                        // 司南排名图
-    │  │      
-    │  ├─staffMix                     // 人员占比
-    │  │      
-    │  ├─szBar                        // 双轴柱状图
-    │  │      
+    │  ├─bgAnimation                  // 登录界面背景图动画      
+    │  ├─cakeLinkage                  // 柱饼组合联动    
+    │  ├─circleNesting                // 圆环套圆环   
+    │  ├─circleRunway                 // 环形跑道图   
+    │  ├─colorfulArea                 // 多彩轮播面积     
+    │  ├─colorfulRadar                // 多彩雷达    
+    │  ├─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              // 水球图、水波图
-    │          
+    │          index.vue              // 水球图、水波图   
     ├─router
     │      index.js                   // 单页面路由注册组件
-    │      
     ├─store
     │      index.js                   // 状态管理仓库未使用到
-    │      
     └─views
             Home.vue                  // 酷屏首页统计图
             Login.vue                 // 登录界面

docs/css/chunk-7f5fddf8.c7d0dd82.css

@@ -0,0 +1 @@
+.home-container[data-v-cf13c2c6]{position:absolute;left:0;top:0;width:100%;height:100%}.home-container .wrap[data-v-cf13c2c6]{transform-origin:0 0 0;background:url(../img/bj.ba638b19.jpg) no-repeat;background-size:contain;background-position:50% 0;background-color:#000;min-width:auto;width:1920px;min-height:auto;height:1080px;overflow:auto}.home-container .wrap .top[data-v-cf13c2c6]{position:absolute;left:0;top:0;width:100%;height:80px;background-color:transparent;background:url(../img/top_nav.ba6cc1f2.png) no-repeat;background-position:65% 0;border:none;overflow:hidden}.home-container .wrap .divider[data-v-cf13c2c6]{position:absolute;left:50px;top:3253px;width:90%;height:50px;width:300px;border:none;background:transparent}

docs/img/iconfont.5bd6a542.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>

docs/index.html

@@ -0,0 +1 @@
+<!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"><link rel=icon href=/vueDataV/favicon.ico><title>vueDatav</title><link href=/vueDataV/css/chunk-1ac0896c.5746f07b.css rel=prefetch><link href=/vueDataV/css/chunk-7f5fddf8.c7d0dd82.css rel=prefetch><link href=/vueDataV/js/chunk-1ac0896c.3390318d.js rel=prefetch><link href=/vueDataV/js/chunk-7f5fddf8.5f4e2d9e.js rel=prefetch><link href=/vueDataV/css/app.5b7e24c8.css rel=preload as=style><link href=/vueDataV/js/app.5c1f4800.js rel=preload as=script><link href=/vueDataV/js/chunk-vendors.67968940.js rel=preload as=script><link href=/vueDataV/css/app.5b7e24c8.css rel=stylesheet></head><body><script src=//cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js></script><script src=//cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js></script><script src=//www.echartsjs.com/zh/dist/echarts-gl.min.js></script><script src=//www.echartsjs.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.min.js></script><script src=//cdn.bootcdn.net/ajax/libs/axios/0.19.0/axios.min.js></script><noscript><strong>We're sorry but vueDatav doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vueDataV/js/chunk-vendors.67968940.js></script><script src=/vueDataV/js/app.5c1f4800.js></script></body></html>

docs/js/chunk-7f5fddf8.5f4e2d9e.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-7f5fddf8"],{"178f":function(t,e,n){},"9bd8":function(t,e,n){"use strict";var c=n("178f"),i=n.n(c);i.a},bb51:function(t,e,n){"use strict";n.r(e);var c=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"home-container"},[n("div",{ref:"editor",staticClass:"wrap"},[n("div",{staticClass:"top"}),n("sinan"),n("seamless"),n("pyramid"),n("scrollArc"),n("szBar"),n("ringPin"),n("rotateColorful"),n("circleRunway"),n("scanRadius"),n("cakeLinkage"),n("pyramidTrend"),n("dynamicLine"),n("staffMix"),n("flashCloud"),n("ringPie"),n("colorfulRadar"),n("dynamicList"),n("bar3d"),n("colorfulArea"),n("rainbow"),n("gauge"),n("waterPolo"),n("circleNesting"),n("div",{staticClass:"divider"})],1)])},i=[];function o(t){var e=document.body.clientWidth||document.documentElement.clientWidth,n=document.body.clientHeight||document.documentElement.clientHeight,c=1920,i=1080,o=e/c,a=n/i;t.style.cssText+=";transform: scale("+o+","+a+")",$(window).resize((function(){var e=document.body.clientWidth||document.documentElement.clientWidth,n=document.body.clientHeight||document.documentElement.clientHeight;o=e/c,a=n/i,t.style.cssText+=";transform: scale("+o+","+a+")"}))}var a={name:"Home",components:{},data:function(){return{}},computed:{},created:function(){},mounted:function(){o(this.$refs.editor)},methods:{}},d=a,s=(n("9bd8"),n("2877")),r=Object(s["a"])(d,c,i,!1,null,"cf13c2c6",null);e["default"]=r.exports}}]);

vue.config.js

@@ -18,9 +18,9 @@ module.exports = {
   configureWebpack: {
       // 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
       externals: {
-           'jquery' : '$',
-           'echarts': 'echarts',
-           'axios' : 'axios'
+       'jquery' : '$',
+       'echarts': 'echarts',
+       'axios' : 'axios'
       }
     }
 };