├── .editorconfig
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── 1.png
    ├── 2.png
    ├── 66.gif
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── close.png
    │   └── logo.png
    ├── common
    │   └── js
    │   │   └── date.js
    ├── components
    │   ├── app-header
    │   │   └── Header.vue
    │   ├── fans
    │   │   └── Fans.vue
    │   ├── lately
    │   │   └── Lately.vue
    │   ├── message
    │   │   └── Message.vue
    │   ├── user
    │   │   └── User.vue
    │   └── warehouse
    │   │   └── Warehouse.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    ├── styles
    │   ├── container.scss
    │   ├── index.scss
    │   └── reset.scss
    └── views
    │   ├── Home.vue
    │   ├── center
    │       └── HomeLeft.vue
    │   └── login
    │       └── login.vue
├── vue.config.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-echarts-datav
 2 | 
 3 | - 使用 vue 结合 v-charts 和 datav 实现一个可视化界面数据展示，所有的接口来源，来自 GitHub 中提供的数据信息
 4 | 
 5 | ### 项目构建
 6 | 
 7 | - 克隆仓库
 8 |   `https://github.com/MrZHLF/vue-echarts-datav.git`
 9 | - 进入目录里面
10 |   `cnpm install`
11 | - 启动
12 |   `cnpm run dev`
13 | 
14 | ## 项目结构
15 | 
16 | ```
17 | 	|——— public  #发模式下静态资源目录
18 | 	|    |——— favicon.ico  #图标
19 | 	|    |——— index.html    #首页入口文件，你可以添加一些 meta 信息或同统计代码啥的
20 | 	|——— node_modules #一些常用安装的依赖
21 | 	|——— src #前端项目源码目录
22 |   |	   |——— common  #公共文件
23 |   |	   |——— components  #公共组件
24 |   |	   |     ———— app-header  #头部
25 |   |	   |     ———— fans  #获取粉丝
26 |   |	   |     ———— lately  #操作记录
27 |   |	   |     ———— user  #个人信息
28 |   |	   |     ———— warehouse  #仓库Stars详情和仓库语言
29 | 	|	   |——— styles  #静态scss文件
30 |   |	   |——— views  #组件
31 |   |	   |     ———— center  #右边展示内容
32 |   |	   |     ———— login  #登录页面
33 |   |	   |     ———— Home.vue  #主页面
34 |   |	   |——— assets  #静态文件
35 | 	|    |——— router  #路由目录
36 | 	|    |——— store   #数据状态管理
37 | 	|    |——— App.vue #项目入口文件
38 | 	|    |——— main.js #项目核心文件
39 | 	|——— package.json #项目配置文件
40 | 	|——— babel.config.js #babel配置文件
41 | 	|——— vue.config.js #vue配置文件
42 | 	|___ README.md    #项目的说明文档
43 | 
44 | ```
45 | 
46 | ### 实现功能
47 | 
48 | - [x] 用户登录以及个人信息展示
49 | - [x] 公开仓库
50 | - [x] 仓库 Stars 详情
51 | - [x] 仓库语言详情
52 | - [x] 粉丝数量以及粉丝展示
53 | - [x] 最近操作记录
54 | 
55 | ### 请求接口介绍
56 | 
57 | - 请求个人信息接口 `https://api.github.com/users/用户名`
58 | - 请求粉丝接口 `https://api.github.com/users/用户名/followers`
59 | - 仓库信息 `https://api.github.com/users/用户名/repos`
60 |   - 这个接口里面包含个人仓库所有信息
61 | - 包含提交信息 `https://api.github.com/users/用户名/events`
62 | 
63 | ### 成果展示
64 | 
65 | ![avatar](./public/1.png)
66 | ![avatar](./public/2.png)
67 | ![avatar](./public/66.gif)
68 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-echarts-datav",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.19.2",
12 |     "core-js": "^3.6.4",
13 |     "echarts": "^4.7.0",
14 |     "v-charts": "^1.19.0",
15 |     "vue": "^2.6.11",
16 |     "vue-router": "^3.1.5",
17 |     "vuex": "^3.1.2"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "^4.2.0",
21 |     "@vue/cli-plugin-eslint": "^4.2.0",
22 |     "@vue/cli-plugin-router": "^4.2.0",
23 |     "@vue/cli-plugin-vuex": "^4.2.0",
24 |     "@vue/cli-service": "^4.2.0",
25 |     "@vue/eslint-config-standard": "^5.1.0",
26 |     "babel-eslint": "^10.0.3",
27 |     "eslint": "^6.7.2",
28 |     "eslint-plugin-import": "^2.20.1",
29 |     "eslint-plugin-node": "^11.0.0",
30 |     "eslint-plugin-promise": "^4.2.1",
31 |     "eslint-plugin-standard": "^4.0.0",
32 |     "eslint-plugin-vue": "^6.1.2",
33 |     "node-sass": "^4.12.0",
34 |     "sass-loader": "^8.0.2",
35 |     "vue-particles": "^1.0.9",
36 |     "vue-template-compiler": "^2.6.11"
37 |   },
38 |   "eslintConfig": {
39 |     "root": true,
40 |     "env": {
41 |       "node": true
42 |     },
43 |     "extends": [
44 |       "plugin:vue/essential",
45 |       "@vue/standard"
46 |     ],
47 |     "parserOptions": {
48 |       "parser": "babel-eslint"
49 |     },
50 |     "rules": {}
51 |   },
52 |   "browserslist": [
53 |     "> 1%",
54 |     "last 2 versions"
55 |   ]
56 | }
57 | 


--------------------------------------------------------------------------------
/public/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrZHLF/vue-echarts-datav/f0278df21ade7d77f3807c9e4f6c4a1d185d4e50/public/1.png


--------------------------------------------------------------------------------
/public/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrZHLF/vue-echarts-datav/f0278df21ade7d77f3807c9e4f6c4a1d185d4e50/public/2.png


--------------------------------------------------------------------------------
/public/66.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrZHLF/vue-echarts-datav/f0278df21ade7d77f3807c9e4f6c4a1d185d4e50/public/66.gif


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrZHLF/vue-echarts-datav/f0278df21ade7d77f3807c9e4f6c4a1d185d4e50/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="scss">
 8 | #app {
 9 |   font-family: Avenir, Helvetica, Arial, sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 |   background: #282c34;
13 | }
14 | </style>
15 | 


--------------------------------------------------------------------------------
/src/assets/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrZHLF/vue-echarts-datav/f0278df21ade7d77f3807c9e4f6c4a1d185d4e50/src/assets/close.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrZHLF/vue-echarts-datav/f0278df21ade7d77f3807c9e4f6c4a1d185d4e50/src/assets/logo.png


--------------------------------------------------------------------------------
/src/common/js/date.js:
--------------------------------------------------------------------------------
 1 | export function formatDate(date, fmt) {
 2 |   if (/(y+)/.test(fmt)) {
 3 |     fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
 4 |   }
 5 |   let o = {
 6 |     'M+': date.getMonth() + 1,
 7 |     'd+': date.getDate(),
 8 |     'h+': date.getHours(),
 9 |     'm+': date.getMinutes(),
10 |     's+': date.getSeconds()
11 |   }
12 |   for (let k in o) {
13 |     if (new RegExp(`(${k})`).test(fmt)) {
14 |       let str = o[k] + ''
15 |       fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
16 |     }
17 |   }
18 |   return fmt
19 | }
20 | 
21 | function padLeftZero(str) {
22 |   return ('00' + str).substr(str.length)
23 | }
24 | 


--------------------------------------------------------------------------------
/src/components/app-header/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="header-wrap">
 3 |     <div class="header-left">
 4 |       <dv-decoration-8 style="width:300px;height:50px;" />
 5 |     </div>
 6 |     <div class="header-title">
 7 |       <h1 class="title">Github仓库统计信息</h1>
 8 |       <dv-decoration-5 style="width:700px;height:40px;" />
 9 |     </div>
10 |     <div class="header-right">
11 |       <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: "Header"
19 | };
20 | </script>
21 | <style scoped lang="scss">
22 | .header-wrap {
23 |   width: 100%;
24 |   display: flex;
25 |   justify-content: space-between;
26 |   .header-title {
27 |     .title {
28 |       color: white;
29 |       text-align: center;
30 |       font-size: 30px;
31 |       padding-top: 10px;
32 |     }
33 |   }
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/components/fans/Fans.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="border-box-content">
  3 |     <div class="fans-wrap">
  4 |       <dv-decoration-7 class="moer">粉丝</dv-decoration-7>
  5 |       <ul>
  6 |         <li v-for="(item,index) in fans.slice(0,9)"
  7 |             :key="index">
  8 |           <img :src="item.avatar_url"
  9 |                alt="">
 10 |           <span>{{item.login}}</span>
 11 |         </li>
 12 |       </ul>
 13 |       <dv-decoration-11 class="moer">
 14 |         <p @click="moerClick">点击查看更</p>
 15 |       </dv-decoration-11>
 16 |     </div>
 17 |     <!-- 显示弹框 -->
 18 |     <div class="show-wrap"
 19 |          v-show="isShow">
 20 |       <div class="show-content">
 21 |         <dv-border-box-11 class="box"
 22 |                           title="粉丝展示">
 23 |           <div class="border-box-content">
 24 |             <ul>
 25 |               <li v-for="(item,index) in fans"
 26 |                   :key="index">
 27 |                 <img :src="item.avatar_url"
 28 |                      alt="">
 29 |                 <span>{{item.login}}</span>
 30 |               </li>
 31 |             </ul>
 32 |           </div>
 33 |         </dv-border-box-11>
 34 |         <div class="close"
 35 |              @click="close">
 36 |           <img src="./../../assets/close.png"
 37 |                alt="">
 38 |         </div>
 39 |       </div>
 40 | 
 41 |     </div>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | export default {
 47 |   name: "Fans",
 48 |   props: {
 49 |     dataObj: Object
 50 |   },
 51 |   data () {
 52 |     return {
 53 |       fans: [],
 54 |       isShow: false,
 55 |       userName: ""
 56 |     }
 57 |   },
 58 |   methods: {
 59 |     getFans () {
 60 |       // 获取粉丝
 61 |       this.$axios.get(`https://api.github.com/users/${this.userName}/followers`).then((res) => {
 62 |         let { data } = res
 63 |         if (data.length > 0) {
 64 |           this.fans = data
 65 |         }
 66 |       })
 67 |     },
 68 |     moerClick () {
 69 |       this.isShow = true
 70 |     },
 71 |     close () {
 72 |       this.isShow = false
 73 |     }
 74 |   },
 75 |   created () {
 76 | 
 77 |     if (localStorage.getItem('userkey')) {
 78 |       this.userName = localStorage.getItem('userkey')
 79 |     } else {
 80 |       this.userName = this.dataObj.login
 81 |     }
 82 |     this.getFans()
 83 |   }
 84 | }
 85 | </script>
 86 | 
 87 | <style scoped lang="scss">
 88 | .fans-wrap {
 89 |   width: 100%;
 90 |   display: block;
 91 |   ul {
 92 |     display: flex;
 93 |     flex-direction: row;
 94 |     flex-wrap: wrap;
 95 |     justify-content: space-between;
 96 |     li {
 97 |       width: 30%;
 98 |       margin-bottom: 10px;
 99 |       img {
100 |         width: 50px;
101 |         height: 50px;
102 |         border-radius: 50%;
103 |         display: block;
104 |         margin: 0 auto;
105 |       }
106 |       span {
107 |         color: #fff;
108 |         text-align: center;
109 |         display: block;
110 |       }
111 |     }
112 |   }
113 |   .moer {
114 |     width: 200px;
115 |     height: 60px;
116 |     margin: 0 auto;
117 |     color: #25f3e6;
118 |     cursor: pointer;
119 |   }
120 | }
121 | .show-wrap {
122 |   position: fixed;
123 |   top: 0%;
124 |   left: 0%;
125 |   right: 0;
126 |   bottom: 0;
127 |   width: 100%;
128 |   height: 100%;
129 |   z-index: 9999;
130 |   background: rgba(0, 0, 0, 0.8);
131 |   .show-content {
132 |     position: relative;
133 |     top: 50%;
134 |     left: 50%;
135 |     right: 0;
136 |     bottom: 0;
137 |     width: 800px;
138 |     height: 500px;
139 |     margin-top: -250px;
140 |     margin-left: -400px;
141 |     .box {
142 |       width: 100%;
143 |       padding-top: 20px;
144 |     }
145 |     .close {
146 |       position: absolute;
147 |       left: 50%;
148 |       img {
149 |         width: 40px;
150 |         height: 40px;
151 |       }
152 |     }
153 |     ul {
154 |       display: flex;
155 |       flex-direction: row;
156 |       flex-wrap: wrap;
157 |       justify-content: space-between;
158 |       li {
159 |         width: 15%;
160 |         margin-bottom: 10px;
161 |         img {
162 |           width: 50px;
163 |           height: 50px;
164 |           border-radius: 50%;
165 |           display: block;
166 |           margin: 0 auto;
167 |         }
168 |         span {
169 |           color: #fff;
170 |           text-align: center;
171 |           display: block;
172 |         }
173 |       }
174 |     }
175 |   }
176 | }
177 | </style>


--------------------------------------------------------------------------------
/src/components/lately/Lately.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <dv-border-box-9 class="tables">
 3 |     <dv-scroll-board :config="config"
 4 |                      style="width:100%;height:auto" />
 5 |   </dv-border-box-9>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   data () {
11 |     return {
12 |       config: {
13 |       },
14 |       userName: ""
15 |     }
16 |   },
17 |   methods: {
18 |     getEvents () {
19 |       this.$axios.get(`https://api.github.com/users/${this.userName}/events`).then(res => {
20 |         let { data } = res;
21 |         let dataAry = [];
22 |         if (data) {
23 |           for (let i = 0; i < data.length; i++) {
24 |             let date = data[i].created_at.split('T')[0]
25 |             if (data[i].payload.commits) {
26 |               data[i].payload.commits.forEach(ele => {
27 |                 dataAry.push([date, data[i].type, data[i].repo.name, ele.message])
28 |               })
29 |             }
30 |           }
31 |         }
32 | 
33 |         this.config = {
34 |           header: ['操作时间', '类型', '操作的仓库', '备注'],
35 |           data: dataAry
36 |         }
37 |       })
38 |     }
39 |   },
40 |   created () {
41 |     this.userName = sessionStorage.getItem('userkey')
42 |     this.getEvents()
43 |   }
44 | }
45 | </script>
46 | 
47 | <style scoped lang="scss">
48 | .tables {
49 |   padding: 0 10px;
50 | }
51 | </style>


--------------------------------------------------------------------------------
/src/components/message/Message.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="message-wrap"
  3 |        v-if="isConfirm">
  4 |     <div class="message">
  5 |       <div class="message-header">{{tip}}</div>
  6 |       <div class="message-box">{{title}}</div>
  7 |       <div class="message-btns">
  8 |         <button class="cancel"
  9 |                 @click="close">取消</button>
 10 |         <button class="determine"
 11 |                 @click="login">确定</button>
 12 |       </div>
 13 |     </div>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | export default {
 19 |   props: {
 20 |     tip: {
 21 |       type: String,
 22 |       default: '提示'
 23 |     },
 24 |     title: {
 25 |       type: String,
 26 |       default: '确保输入的Gihub用户名正确'
 27 |     },
 28 |     isConfirm: {
 29 |       type: Boolean,
 30 |       default: false
 31 |     }
 32 |   },
 33 |   methods: {
 34 |     close () {
 35 |       this.$emit('onClose')
 36 |     },
 37 |     login () {
 38 |       this.$emit('onLogin')
 39 |     }
 40 |   }
 41 | }
 42 | </script>
 43 | 
 44 | <style lang="scss" scoped>
 45 | .message-wrap {
 46 |   position: fixed;
 47 |   top: 0;
 48 |   left: 0;
 49 |   right: 0;
 50 |   bottom: 0;
 51 |   z-index: 9999;
 52 |   background: rgba(0, 0, 0, 0.8);
 53 |   .message {
 54 |     position: relative;
 55 |     top: 40%;
 56 |     left: 50%;
 57 |     right: 0;
 58 |     bottom: 0;
 59 |     margin-left: -210px;
 60 |     display: inline-block;
 61 |     width: 420px;
 62 |     padding-bottom: 10px;
 63 |     vertical-align: middle;
 64 |     background-color: #fff;
 65 |     border-radius: 4px;
 66 |     border: 1px solid #ebeef5;
 67 |     font-size: 18px;
 68 |     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 69 |     text-align: left;
 70 |     overflow: hidden;
 71 |     backface-visibility: hidden;
 72 |     .message-header {
 73 |       padding: 15px 15px 10px;
 74 |       line-height: 1;
 75 |       color: #303133;
 76 |     }
 77 |     .message-box {
 78 |       padding: 10px 15px;
 79 |       color: #606266;
 80 |       font-size: 14px;
 81 |     }
 82 |     .message-btns {
 83 |       padding: 5px 15px 0;
 84 |       text-align: right;
 85 |       button {
 86 |         display: inline-block;
 87 |         line-height: 1;
 88 |         white-space: nowrap;
 89 |         cursor: pointer;
 90 |         background: #fff;
 91 |         border: 1px solid #dcdfe6;
 92 |         text-align: center;
 93 |         box-sizing: border-box;
 94 |         outline: none;
 95 |         margin: 0;
 96 |         transition: 0.1s;
 97 |         font-weight: 500;
 98 |         padding: 9px 15px;
 99 |         font-size: 12px;
100 |         border-radius: 3px;
101 |       }
102 |       .cancel {
103 |         color: #3a8ee6;
104 |         border-color: #3a8ee6;
105 |         outline: none;
106 |       }
107 | 
108 |       .determine {
109 |         color: #fff;
110 |         background-color: #409eff;
111 |         border-color: #409eff;
112 |         margin-left: 20px;
113 |       }
114 |     }
115 |   }
116 | }
117 | </style>


--------------------------------------------------------------------------------
/src/components/user/User.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="info-wrap border-box-content">
 3 |     <div class="info-left">
 4 |       <img :src="dataObj.avatar_url"
 5 |            alt="" />
 6 |     </div>
 7 |     <div class="info-right">
 8 |       <h1 v-if="dataObj.login">{{dataObj.login}}</h1>
 9 |       <h1 v-else>暂无</h1>
10 |       <p v-if="dataObj.created_at">{{dataObj.created_at | formatDate}}</p>
11 |       <p v-else>暂无</p>
12 |       <span>加入github</span>
13 |       <p>{{dataObj.location}}</p>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import { formatDate } from './../../common/js/date'
20 | export default {
21 |   name: "User",
22 |   props: {
23 |     dataObj: Object
24 |   },
25 |   filters: {
26 |     // 对日期格式化处理
27 |     formatDate (time) {
28 |       let date = new Date(time)
29 |       return formatDate(date, 'yyyy--MM-dd')
30 |     }
31 |   },
32 |   created () {
33 |     console.log(this.dataObj, 'ppp')
34 |   }
35 | }
36 | </script>
37 | 
38 | <style scoped lang="scss">
39 | .info-wrap {
40 |   display: flex;
41 |   flex-direction: row;
42 |   z-index: 99;
43 |   .info-left {
44 |     width: 100px;
45 |     height: 100px;
46 |     border-radius: 50%;
47 |     padding: 10px;
48 |     border: 1px solid #4788fb;
49 |     img {
50 |       display: block;
51 |       width: 100%;
52 |       height: 100%;
53 |       background-size: 100% 100% !important;
54 |       border-radius: 50%;
55 |       vertical-align: middle;
56 |     }
57 |   }
58 |   .info-right {
59 |     vertical-align: top;
60 |     margin-left: 10px;
61 |     h1 {
62 |       margin-top: 10px;
63 |       font-size: 30px;
64 |       line-height: 20px;
65 |       font-weight: 700;
66 |       color: #25f3e6;
67 |       overflow: hidden;
68 |       text-overflow: ellipsis;
69 |       white-space: nowrap;
70 |     }
71 |     p {
72 |       display: block;
73 |       color: #f6a645;
74 |       font-size: 20px;
75 |       padding: 10px 0;
76 |       text-decoration: none;
77 |       cursor: none;
78 |     }
79 |     span {
80 |       color: #fff;
81 |     }
82 |   }
83 | }
84 | </style>


--------------------------------------------------------------------------------
/src/components/warehouse/Warehouse.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="center-item-box">
  3 |     <div class="center-item-left">
  4 |       <dv-decoration-11 class="title">仓库Stars详情</dv-decoration-11>
  5 |       <ve-bar :data="chartDatas"
  6 |               :extend="extend"></ve-bar>
  7 |     </div>
  8 |     <dv-decoration-2 :reverse="true"
  9 |                      style="width:5px;height:400px;" />
 10 |     <div class="center-item-right">
 11 |       <dv-decoration-11 class="title">仓库语言分类</dv-decoration-11>
 12 |       <ve-funnel :data="chartData"
 13 |                  :settings="chartSettings"
 14 |                  :extend="extend"></ve-funnel>
 15 | 
 16 |     </div>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | export default {
 22 |   name: "Warehouse",
 23 |   props: {
 24 |     dataObj: Object
 25 |   },
 26 |   data () {
 27 |     this.extend = {
 28 |       series: {
 29 |         label: {
 30 |           normal: {
 31 |             show: true
 32 |           }
 33 |         }
 34 |       },
 35 |       legend: {
 36 |         textStyle: { color: "#fff" }
 37 |       },
 38 |       yAxis: {
 39 |         axisLabel: {
 40 |           textStyle: {
 41 |             color: "#fff"
 42 |           }
 43 |         }
 44 |       },
 45 |       xAxis: {
 46 |         axisLabel: {
 47 |           textStyle: {
 48 |             color: "#fff"
 49 |           }
 50 |         }
 51 |       }
 52 |     };
 53 |     this.chartSettings = {
 54 |       sequence: []
 55 |     };
 56 |     return {
 57 |       chartData: {
 58 |         columns: ["lang", "number"],
 59 |         rows: []
 60 |       },
 61 |       chartDatas: {
 62 |         columns: ['名称', 'star数量'],
 63 |         rows: []
 64 |       },
 65 |       userName: ""
 66 |     }
 67 |   },
 68 |   methods: {
 69 |     getStats () {
 70 |       this.$axios.get(`https://api.github.com/users/${this.userName}/repos`).then((res) => {
 71 |         let data = res.data;
 72 |         console.log(data);
 73 | 
 74 |         // 仓库和仓库star 只有star大于0的时候展示
 75 |         for (var i = 0; i < data.length; i++) {
 76 |           if (data[i].stargazers_count > 0) {
 77 |             this.chartDatas.rows.push({
 78 |               '名称': data[i].name,
 79 |               'star数量': data[i].stargazers_count
 80 |             })
 81 |           }
 82 |         }
 83 |         // 梳理语言，计算语言类型和各个语言的数量
 84 |         let languages = {};
 85 |         for (var i = 0; i < data.length; i++) {
 86 |           let langData = data[i].language;
 87 |           if (langData in languages) {
 88 |             languages[langData]++;
 89 |           } else {
 90 |             languages[langData] = 1;
 91 |           }
 92 |         }
 93 |         let dataL = [];
 94 |         let keyTitle = []
 95 |         for (const key in languages) {
 96 |           keyTitle.push(key)
 97 |           dataL.push({ lang: key, number: languages[key] });
 98 |         }
 99 |         this.chartData.rows = dataL;
100 |         this.chartSettings.sequence = keyTitle
101 |       })
102 |     }
103 |   },
104 |   created () {
105 | 
106 |     if (localStorage.getItem('userkey')) {
107 |       this.userName = localStorage.getItem('userkey')
108 |     } else {
109 |       this.userName = this.dataObj.login
110 |     }
111 |     this.getStats()
112 |   }
113 | }
114 | </script>
115 | 
116 | <style scoped lang="scss">
117 | .center-item-box {
118 |   width: 100%;
119 |   height: 100%;
120 |   display: flex;
121 |   flex-direction: row;
122 |   justify-content: space-around;
123 |   .center-item-left {
124 |     width: 400px;
125 |   }
126 |   .center-item-right {
127 |     width: 400px;
128 |   }
129 |   .title {
130 |     color: #25f3e6;
131 |     font-weight: 700;
132 |     font-size: 20px;
133 |     width: 200px;
134 |     height: 60px;
135 |     display: block;
136 |     margin: 0 auto;
137 |   }
138 | }
139 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import VCharts from 'v-charts'
 6 | import axios from 'axios'
 7 | Vue.use(VCharts)
 8 | Vue.prototype.$axios = axios
 9 | 
10 | 
11 | // 将自动注册所有组件为全局组件
12 | import dataV from '@jiaminghi/data-view'
13 | import VueParticles from 'vue-particles'
14 | Vue.use(VueParticles)
15 | Vue.use(dataV)
16 | 
17 | 
18 | import './styles/index.scss'
19 | Vue.config.productionTip = false
20 | 
21 | new Vue({
22 |   router,
23 |   store,
24 |   render: h => h(App)
25 | }).$mount('#app')
26 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Routerr from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | 
 5 | Vue.use(Routerr)
 6 | 
 7 | const router = new Routerr({
 8 |   routes: [{
 9 |     path: '/',
10 |     name: 'Home',
11 |     component: Home
12 |   }, {
13 |     path: '/login',
14 |     name: 'Login',
15 |     component: () => import('../views/login/login.vue')
16 |   }]
17 | })
18 | 
19 | // 路由守卫
20 | router.beforeEach((to, from, next) => {
21 |   const isLogin = !!sessionStorage.userkey
22 | 
23 |   if (to.path === '/login') {
24 |     next()
25 |   } else {
26 |     isLogin ? next() : next('/login')
27 |   }
28 | })
29 | 
30 | 
31 | export default router
32 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |   },
 9 |   mutations: {
10 |   },
11 |   actions: {
12 |   },
13 |   modules: {
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/src/styles/container.scss:
--------------------------------------------------------------------------------
 1 | html,
 2 | body,
 3 | #app {
 4 |     width: 100%;
 5 |     height: 100%;
 6 | }
 7 | 
 8 | .border-box-content {
 9 |     padding: 20px;
10 |     -webkit-box-sizing: border-box;
11 |     box-sizing: border-box;
12 |     display: -webkit-box;
13 |     display: -ms-flexbox;
14 |     display: flex;
15 | }


--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import './reset';
2 | @import './container';


--------------------------------------------------------------------------------
/src/styles/reset.scss:
--------------------------------------------------------------------------------
  1 | /* http://meyerweb.com/eric/tools/css/reset/ 
  2 |    v2.0 | 20110126
  3 |    License: none (public domain)
  4 | */
  5 | 
  6 | html,
  7 | body,
  8 | div,
  9 | span,
 10 | applet,
 11 | object,
 12 | iframe,
 13 | h1,
 14 | h2,
 15 | h3,
 16 | h4,
 17 | h5,
 18 | h6,
 19 | p,
 20 | blockquote,
 21 | pre,
 22 | a,
 23 | abbr,
 24 | acronym,
 25 | address,
 26 | big,
 27 | cite,
 28 | code,
 29 | del,
 30 | dfn,
 31 | em,
 32 | img,
 33 | ins,
 34 | kbd,
 35 | q,
 36 | s,
 37 | samp,
 38 | small,
 39 | strike,
 40 | strong,
 41 | sub,
 42 | sup,
 43 | tt,
 44 | var,
 45 | b,
 46 | u,
 47 | i,
 48 | center,
 49 | dl,
 50 | dt,
 51 | dd,
 52 | ol,
 53 | ul,
 54 | li,
 55 | fieldset,
 56 | form,
 57 | label,
 58 | legend,
 59 | table,
 60 | caption,
 61 | tbody,
 62 | tfoot,
 63 | thead,
 64 | tr,
 65 | th,
 66 | td,
 67 | article,
 68 | aside,
 69 | canvas,
 70 | details,
 71 | embed,
 72 | figure,
 73 | figcaption,
 74 | footer,
 75 | header,
 76 | hgroup,
 77 | menu,
 78 | nav,
 79 | output,
 80 | ruby,
 81 | section,
 82 | summary,
 83 | time,
 84 | mark,
 85 | audio,
 86 | video {
 87 |     margin: 0;
 88 |     padding: 0;
 89 |     border: 0;
 90 |     font-size: 100%;
 91 |     font: inherit;
 92 |     vertical-align: baseline;
 93 | }
 94 | 
 95 | /* HTML5 display-role reset for older browsers */
 96 | article,
 97 | aside,
 98 | details,
 99 | figcaption,
100 | figure,
101 | footer,
102 | header,
103 | hgroup,
104 | menu,
105 | nav,
106 | section {
107 |     display: block;
108 | }
109 | 
110 | body {
111 |     line-height: 1;
112 | }
113 | 
114 | ol,
115 | ul {
116 |     list-style: none;
117 | }
118 | 
119 | blockquote,
120 | q {
121 |     quotes: none;
122 | }
123 | 
124 | blockquote:before,
125 | blockquote:after,
126 | q:before,
127 | q:after {
128 |     content: '';
129 |     content: none;
130 | }
131 | 
132 | table {
133 |     border-collapse: collapse;
134 |     border-spacing: 0;
135 | }


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home">
  3 |     <div class="loading"
  4 |          v-if="isLoading">
  5 |       <dv-loading class="txt">数据加载中...</dv-loading>
  6 |     </div>
  7 |     <Header />
  8 |     <div class="container">
  9 |       <dv-border-box-1>
 10 |         <div class="container-wrap">
 11 |           <div class="container-left">
 12 |             <HomeLeft :dataObj="dataObj" />
 13 |           </div>
 14 |           <div class="container-right">
 15 |             <div class="container-center">
 16 |               <div class="container-center-left">
 17 |                 <dv-border-box-10 class="center-item">
 18 |                   <Warehouse :dataObj="dataObj" />
 19 |                 </dv-border-box-10>
 20 |                 <div class="tab-list">
 21 | 
 22 |                   <Lately />
 23 |                 </div>
 24 |               </div>
 25 |               <div class="container-center-right">
 26 |                 <div style="overflow: hidden;">
 27 |                   <dv-border-box-3 class="info">
 28 |                     <User :dataObj="dataObj" />
 29 |                   </dv-border-box-3>
 30 |                   <dv-border-box-3 class="classification">
 31 |                     <div class="border-box-content">
 32 |                       <Fans :dataObj="dataObj" />
 33 |                     </div>
 34 |                   </dv-border-box-3>
 35 |                 </div>
 36 |               </div>
 37 | 
 38 |             </div>
 39 |           </div>
 40 |         </div>
 41 |       </dv-border-box-1>
 42 |     </div>
 43 | 
 44 |   </div>
 45 | </template>
 46 | 
 47 | <script>
 48 | import Header from "./../components/app-header/Header";
 49 | import HomeLeft from "./center/HomeLeft";
 50 | import Fans from './../components/fans/Fans'
 51 | import User from './../components/user/User'
 52 | import Warehouse from './../components/warehouse/Warehouse'
 53 | import Lately from './../components//lately/Lately'
 54 | export default {
 55 |   name: "Home",
 56 |   data () {
 57 |     return {
 58 |       userName: "",
 59 |       fans: [], //获取粉丝量
 60 |       dataObj: {},
 61 |       isLoading: true, //加载状态
 62 |     };
 63 |   },
 64 |   components: {
 65 |     Header,
 66 |     HomeLeft,
 67 |     Fans,
 68 |     User,
 69 |     Warehouse,
 70 |     Lately
 71 |   },
 72 |   methods: {
 73 |     getUserInfo () {
 74 |       this.$axios
 75 |         .get(`https://api.github.com/users/${this.userName}`)
 76 |         .then(res => {
 77 |           const { data } = res;
 78 |           this.dataObj = data;
 79 |           this.isLoading = false
 80 |         });
 81 |     }
 82 |   },
 83 |   created () {
 84 |     this.userName = this.$route.query.user;
 85 |     this.getUserInfo()
 86 |   }
 87 | };
 88 | </script>
 89 | <style scoped lang="scss">
 90 | .home {
 91 |   width: 100%;
 92 |   height: 100%;
 93 |   background-image: url(http://datav.jiaminghi.com/demo/electronic-file/img/bg.110420cf.png);
 94 |   background-repeat: no-repeat;
 95 |   background-size: cover;
 96 |   padding-bottom: 5%;
 97 |   .loading {
 98 |     position: fixed;
 99 |     top: 0;
100 |     left: 0;
101 |     right: 0;
102 |     bottom: 0;
103 |     z-index: 9999;
104 |     background: rgba(0, 0, 0, 0.8);
105 |     .txt {
106 |       color: #ffffff;
107 |       padding-top: 10px;
108 |     }
109 |   }
110 |   .container {
111 |     width: 100%;
112 |     height: 100%;
113 |     .container-wrap {
114 |       width: 100%;
115 |       height: 100%;
116 |       display: flex;
117 |       flex-direction: row;
118 |       .container-left {
119 |         width: 20%;
120 |         height: 100%;
121 |       }
122 |       .container-right {
123 |         margin-left: 10px;
124 |         .container-center {
125 |           display: flex;
126 |           flex-direction: row;
127 |           width: 100%;
128 |           .container-center-left {
129 |             width: 100%;
130 |             .tab-list {
131 |               width: 100%;
132 |               height: 230px;
133 |               margin-top: 10px;
134 |             }
135 |           }
136 |           .container-center-right {
137 |             flex: 1;
138 |           }
139 |           .center-item {
140 |             width: 800px;
141 |             height: 450px;
142 |           }
143 |           .info {
144 |             width: 400px;
145 |             height: 200px;
146 |             margin-left: 20px;
147 |           }
148 |           .classification {
149 |             height: 460px;
150 |             margin-top: 20px;
151 |             margin-left: 20px;
152 |           }
153 |         }
154 |       }
155 |     }
156 |   }
157 | }
158 | </style>
159 | 


--------------------------------------------------------------------------------
/src/views/center/HomeLeft.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <dv-border-box-3 class="border-box-content">
 3 |     <div class="container-item">
 4 |       <div class="box-item">
 5 |         <p class="item">公开仓库数</p>
 6 |         <dv-decoration-9 style="width:150px;height:150px;color:#fff">
 7 |           <p v-if="dataObj.public_repos>0">
 8 |             {{dataObj.public_repos}}
 9 |           </p>
10 |           <p v-else>无</p>
11 |         </dv-decoration-9>
12 |       </div>
13 |       <dv-decoration-2 style="height:5px;display: block;" />
14 |       <div class="box-item">
15 |         <p class="item">粉丝</p>
16 |         <dv-decoration-9 style="width:150px;height:150px;color:#fff">
17 |           <p v-if="dataObj.followers>0">
18 |             {{dataObj.followers}}
19 |           </p>
20 |           <p v-else>无</p>
21 |         </dv-decoration-9>
22 |       </div>
23 |       <dv-decoration-2 style="height:5px;display: block;" />
24 |       <div class="box-item last-item">
25 |         <p class="item">跟随</p>
26 |         <dv-decoration-9 style="width:150px;height:150px;color:#fff">
27 |           <p v-if="dataObj.following>0">
28 |             {{dataObj.following}}
29 |           </p>
30 |           <p v-else>无</p>
31 |         </dv-decoration-9>
32 |       </div>
33 |     </div>
34 |   </dv-border-box-3>
35 | </template>
36 | 
37 | <script>
38 | export default {
39 |   props: {
40 |     dataObj: Object
41 |   },
42 |   data () {
43 |     return {
44 | 
45 |     }
46 |   },
47 |   created () {
48 |     console.log(this.dataObj)
49 |   },
50 | };
51 | </script>
52 | 
53 | <style scoped lang="scss">
54 | .container-left {
55 |   width: 20%;
56 |   height: 100%;
57 |   .container-item {
58 |     display: flex;
59 |     flex-direction: column;
60 |     align-items: center;
61 |     justify-content: space-around;
62 |     .box-item {
63 |       margin-bottom: 10px;
64 |       .item {
65 |         color: white;
66 |         text-align: center;
67 |         padding-top: 10px;
68 |       }
69 |     }
70 |     .last-item {
71 |       margin-top: 20px;
72 |       .item {
73 |         padding-top: 5px;
74 |       }
75 |     }
76 |   }
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/views/login/login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="login-wrap">
  3 |     <vue-particles color="#dedede"
  4 |                    :particleOpacity="0.7"
  5 |                    :particlesNumber="80"
  6 |                    shapeType="circle"
  7 |                    :particleSize="4"
  8 |                    linesColor="#dedede"
  9 |                    :linesWidth="1"
 10 |                    :lineLinked="true"
 11 |                    :lineOpacity="0.4"
 12 |                    :linesDistance="150"
 13 |                    :moveSpeed="3"
 14 |                    :hoverEffect="true"
 15 |                    hoverMode="grab"
 16 |                    :clickEffect="true"
 17 |                    clickMode="push">
 18 |     </vue-particles>
 19 |     <div class="login">
 20 |       <div class="login-center">
 21 |         <p>使用Vue构建 <b>Github</b> 可视化大数据平台</p>
 22 |         <div class="form-section">
 23 |           <div class="form-item">
 24 |             <input placeholder="输入您的github账号"
 25 |                    class="item-input"
 26 |                    type="text"
 27 |                    @focus="onFocus"
 28 |                    :class="[isShow ? 'active' : '']"
 29 |                    v-model="userName" />
 30 |             <p class="tip"
 31 |                v-if="isShow">{{tip}}</p>
 32 |           </div>
 33 |           <div class="form-item">
 34 |             <button @click="open">登录</button>
 35 |           </div>
 36 |         </div>
 37 |         <Message @onClose="onClose"
 38 |                  :isConfirm="isConfirm"
 39 |                  @onLogin="onLogin" />
 40 |       </div>
 41 |     </div>
 42 |   </div>
 43 | </template>
 44 | <script>
 45 | import Message from './../../components//message/Message'
 46 | export default {
 47 |   name: "Login",
 48 |   data () {
 49 |     return {
 50 |       userName: "",
 51 |       tip: "*不能为空",
 52 |       isShow: false,
 53 |       isConfirm: false
 54 |     };
 55 |   },
 56 |   components: {
 57 |     Message
 58 |   },
 59 |   watch: {
 60 |     userName (value) {
 61 |       if (value == '') {
 62 |         this.isShow = true
 63 |       } else {
 64 |         this.isShow = false
 65 |       }
 66 | 
 67 |     }
 68 |   },
 69 |   methods: {
 70 |     onFocus (e) {
 71 |       if (e.target.value == '') {
 72 |         this.isShow = true
 73 |       } else {
 74 |         this.isShow = false
 75 |       }
 76 |     },
 77 |     open () {
 78 |       if (this.userName === "") {
 79 |         this.isShow = true
 80 |         return
 81 |       }
 82 |       this.isConfirm = true
 83 |     },
 84 |     onClose () {
 85 |       this.isConfirm = false
 86 |     },
 87 |     onLogin () {
 88 |       this.$axios
 89 |         .get(`https://api.github.com/users/${this.userName}`)
 90 |         .then(res => {
 91 |           const { data } = res;
 92 |           sessionStorage.setItem("userkey", data.login);
 93 |           localStorage.setItem("userkey", data.login);
 94 |           this.$router.push({
 95 |             name: "Home",
 96 |             query: { user: data.login }
 97 |           });
 98 |         });
 99 |     }
100 |   }
101 | };
102 | </script>
103 | <style lang="scss" scoped>
104 | .login-wrap {
105 |   width: 100%;
106 |   height: 100%;
107 |   background-color: #006593;
108 |   overflow: hidden;
109 |   #particles-js {
110 |     position: fixed;
111 |     top: 0;
112 |     left: 0;
113 |     z-index: 100000;
114 |     width: 100%;
115 |     height: 100%;
116 |   }
117 |   .login {
118 |     position: relative;
119 |     width: 600px;
120 |     margin: 0 auto;
121 |     z-index: 100000;
122 |     .login-center {
123 |       display: flex;
124 |       flex-direction: column;
125 |       justify-content: center;
126 |       align-items: center;
127 |       margin-top: 100px;
128 |       z-index: 100000;
129 |       p {
130 |         font-size: 30px;
131 |         color: white;
132 |       }
133 |       .form-section {
134 |         margin-top: 30px;
135 |         width: 70%;
136 | 
137 |         .form-item {
138 |           .item-input {
139 |             width: 100%;
140 |             height: 40px;
141 |             outline: none;
142 |             color: white;
143 |             font-size: 15px;
144 |             background: none;
145 |             padding-left: 10px;
146 |             border-radius: 10px;
147 |             border: 1px solid #ffffff;
148 |           }
149 |           input::-webkit-input-placeholder {
150 |             color: white;
151 |           }
152 |           input::-moz-input-placeholder {
153 |             color: white;
154 |           }
155 |           input::-ms-input-placeholder {
156 |             color: white;
157 |           }
158 |           .active {
159 |             border: 1px solid red;
160 |           }
161 |           .tip {
162 |             font-size: 15px;
163 |             padding-top: 5px;
164 |             color: red;
165 |           }
166 |           button {
167 |             width: 70%;
168 |             height: 40px;
169 |             line-height: 40px;
170 |             display: block;
171 |             margin: 20px auto auto auto;
172 |             border: none;
173 |             border-color: #fff;
174 |             outline: none;
175 |             border-radius: 10px;
176 |             background: white;
177 |             cursor: pointer;
178 |           }
179 |         }
180 |       }
181 |     }
182 |   }
183 | }
184 | </style>
185 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   lintOnSave: false
3 | }
4 | 


--------------------------------------------------------------------------------