编辑readme.md

README.md

@@ -1,29 +1,149 @@
-# vue-datav
+# 前言
+
+* 一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台，通过vue组件实现数据动态刷新渲染，内部图表组件库可实现自由替换和组合。
+* 项目中部分前端库采用外部CDN引入，可以减少打包文件体积，加快页面渲染。
+* 可视化数据大屏展示对前端性能要求高，建议使用谷歌浏览器查看或开发，屏幕尺寸为1920px宽，1080px高。
+* 目前制作数据可视化大屏，前端比较流行的第三方库有：Echarts（百度），AntV（阿里），Highcharts（国外公司），D3.js（国外公司）。
+
+# 效果截图
 
-## Project setup
-```
-npm install
-```
 
-### Compiles and hot-reloads for development
+
+
+# 项目架构
 ```
-npm run serve
+│  vue.config.js                     // webpack配置
+│                
+├─public
+│      favicon.ico                   // ico图标
+│      index.html                    // 入口html文件
+│      
+└─src
+    │  App.vue                       // 根组件
+    │  main.js                       // 程序入口文件
+    │  
+    ├─assets
+    │  │  
+    │  ├─iconfont                     // 引用阿里巴巴矢量图标库
+    │  │      
+    │  ├─img                          // 存放公共图片文件夹
+    │  │          
+    │  ├─js
+    │  │      utils.js                // 封装屏幕缩放js方法
+    │  │      
+    │  └─styles
+    │      │  base.scss               // 基础样式文件
+    │      │  common.scss             // 公用样式文件
+    │      │  
+    │      └─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                        // 双轴柱状图
+    │  │      
+    │  ├─toast 
+    │  │      index.js                // 注册全局消息提示框组件
+    │  │      index.vue               // 自定义消息提示框模板
+    │  │      
+    │  └─waterPolo
+    │          index.vue              // 水球图、水波图
+    │          
+    ├─router
+    │      index.js                   // 单页面路由注册组件
+    │      
+    ├─store
+    │      index.js                   // 状态管理仓库未使用到
+    │      
+    └─views
+            Home.vue                  // 酷屏首页统计图
+            Login.vue                 // 登录界面
 ```
 
-### Compiles and minifies for production
+
+# 技术栈
+ * vue2.6
+ * echarts4.7
+ * axios
+ * webpack
+ * ES6
+ * scss
+ * css3
+ * jquery
+ * iconfont
+ 
+# 功能模块
+* 登录界面抖动
+* 粒子动效
+* 背景图轮播
+* 自定义全局模态框
+* 自定义消息提示框
+* 酷屏首页组件库
+* 各种酷炫小部件
+
+# 下载安装依赖
 ```
-npm run build
+git clone https://github.com/jackchen0120/vueDataV.git
+cd vueDataV
+npm install 或 yarn
 ```
 
-### Run your tests
+## 开发模式
 ```
-npm run test
+npm run serve
 ```
+运行之后，访问地址：http://localhost:8081
 
-### Lints and fixes files
+## 生产环境打包
 ```
-npm run lint
+npm run build
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+
+

package.json

@@ -2,6 +2,7 @@
   "name": "vueDatav",
   "version": "0.1.0",
   "private": true,
+  "author": "JackChen <278910933@qq.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

src/components/index.js

@@ -8,7 +8,7 @@ import bgAnimation from './bgAnimation' // 登录界面背景图动画
 import modal from './modal' // 自定义全局模态框
 import sinan from './sinan' // 司南排名图
 import seamless from './seamless' // 新闻无缝滚动
-import pyramid from './pyramid' // 金字塔数据图
+import pyramid from './pyramid' // 金字塔动画
 import scrollArc from './scrollArc' // 滚动弧形线
 import szBar from './szBar' // 双轴柱状图
 import ringPin from './ringPin' // 环形气泡图

src/components/seamless/index.vue

@@ -33,7 +33,7 @@
                 <tbody>
                   <tr v-for="(item, index) in listData" :key="index">
                     <td width="100%" class="title">
-                      <span :class="{colorRed: item.hot > 4999}">{{ item.title }}</span>
+                      <span>{{ item.title }}</span>
                     </td>
                     <td width="20%">
                       <span>{{ item.date }}</span>
@@ -72,15 +72,15 @@ export default {
         date: '2020-05-02',
         hot: 5689
      }, {
-        title: '滴滴、美团、哈啰多赛道交战，本地生活会是终局？',
+        title: '滴滴、美团、哈啰交战，本地生活会是终局？',
         date: '2020-05-02',
         hot: 9
      }, {
-        title: '“互联网+文化”逆势上行文娱消费，云端真精彩',
+        title: '“互联网+文化”逆势上行文娱消费云端真精彩',
         date: '2020-04-25',
         hot: 288
      }, {
-        title: '乐观主义还是悲观主义？巴菲特事实上是个现实主义者！',
+        title: '乐观还是悲观？巴菲特是个现实主义者！',
         date: '2020-04-21',
         hot: 158
      }, {
@@ -88,7 +88,7 @@ export default {
         date: '2020-04-20',
         hot: 889
      }, {
-        title: '华为是如何做投资的：先给两个亿订单 一年送上市',
+        title: '华为如何做投资的：先给两亿订单一年上市',
         date: '2020-04-01',
         hot: 5800
      }, {
@@ -100,7 +100,7 @@ export default {
         date: '2020-03-16',
         hot: 88
      }, {
-        title: '刚刚港股"崩了"：狂跌近1000点！发生什么？',
+        title: '刚刚港股"崩了"：狂跌近1000点！',
         date: '2020-03-12',
         hot: 88
      }, {
@@ -108,15 +108,15 @@ export default {
         date: '2020-02-28',
         hot: 5
      }, {
-        title: '传软银国际裁员约10% 拉美基金两名管理合伙人离职',
+        title: '传软银国际裁员约10%两名管理合伙人离职',
         date: '2020-02-15',
         hot: 258
      }, {
-        title: '27.5万个岗位：事业单位、人工智能等热门专场招聘',
+        title: '27万个岗位：区块链、人工智能等专场招聘',
         date: '2020-02-10',
         hot: 198
      }, {
-        title: '一季度电子商务发展势头迅猛 农村电商突破1300万家',
+        title: '一季度电商发展势头迅猛农村电商破1300万家',
         date: '2020-02-08',
         hot: 19
      }]

src/components/toast/index.js

@@ -1,5 +1,5 @@
 /*
- * 描述: 消息提示框组件封装
+ * 描述: 注册全局消息提示框组件
  * 作者: Jack Chen
  * 日期: 2020-04-18
  */