寫在前面

    GitDataV，是一個github“大資料視覺化平臺”，通過它你可以更直觀的看到你在github裡的一些資料，（之所以打雙引號，是因為我覺得這個還沒到大資料視覺化的程度）。其實我在 上篇文章 分享的時候已經提到了這個想法，通過github提供的介面，做一個自己的“大資料分析頁面”，所以我就花了幾天晚上的時間，把這想法從設計到開發構建出來了，那麼下面我就我個人的賬號測試看看效果如下gif圖

如果您感興趣可以點選這裡訪問簡單的：GitDataV網站(目前打包後有些小bug，但不影響正常使用) ，看看你的github“大資料分析”詳情。

   
     很多初學者，對大資料的概念都是模糊不清的，大資料是什麼，能做什麼，學的時候，該按照什麼線路去學習，學完往哪方面發展，想深入瞭解，想學習的同學歡迎加入大資料學習qq群：410391744，有大量乾貨（零基礎以及進階的經典實戰）分享給大家，並且有清華大學畢業的資深大資料講師給大家免費授課，給大家分享目前國內最完整的大資料高階實戰實用學習流程體系。

推薦把GitDataV（github原始碼）專案下載下來，在本機執行專案，在本機瀏覽器開啟網頁，生成自己的“大資料分析”詳情。

通過它你將看到你在github裡的這些資料：個人資訊(✔)，倉庫stars情況(✔)，倉庫語言分類(✔)倉庫公開數量(✔)、粉絲數量(✔)、跟隨數量(✔)、倉庫資料(✔)、最近你的操作(✔)、最近的粉絲(✔)、最近的跟隨(✔)、最新資訊(✔)，左上角箭頭小彩蛋： 全屏(✔)、 國際化語言切換（開發中...）、面板切換（開發中..）

看著還不錯吧（沒有設計師，自己作為前端設計，審美[chou]就這樣），有點小感（la）覺（ji）。下面步入正題，我將從下面幾點：需求分析、開發準備、功能設計和程式碼實現，對我獨立從設計到開發構建這個“視覺化大資料平臺”小玩意做個分享：

需求分析

資訊資料時代，每個人對資料都是敏感的，對於你在github的資料，你除了看到github官方網站給你的資料之外，其實你還可以看到更多的資料。我當時的初心就是通過使用者輸入自己的github賬號，可以獲取自己在github裡有用的資料。在上次做入口網站在前端頁面互動應用和小技巧的時候偶然發現原來github提供了開發者API，地址傳送門：(https://developer.github.com/v3/)

點進一看發現新大陸，欣喜若狂的我感覺有了一個心血來潮，自己的想法還是自己實現吧，開搞！

 

開發準備

一、瞭解GitHub開發者文件

v3版API的文件連結、v3版API的官方教程

 先看看github介面都能獲取什麼資料吧，先做個簡單的測試我通過我自己的賬號（hongqingcao）去請求/users介面（https://api.github.com/users/hongqingcao）得到下面的資料，哇哇。從上往下看，真全面，連我都忘記自己GitHub註冊時間，這裡都有

當然你如果懶得去學習官方文件，網上一搜還真有人總結了Github API呼叫，傳送門《一篇文章搞定Github API 呼叫 (v3）》

 

二、瞭解視覺化相關的設計

首先進入百度瞭解了一哈，乍一眼看，基本上都是偏深藍色調，當然不僅僅如此《大資料資料視覺化的設計原則》，我也是有看的，具體資料有興趣的同學可以自行研究。

阿里的DataV資料視覺化是比較6的，自信到百度查出來的都是“雙十一大屏展示”賣點啊（多次提到百度，阿里，哈哈）

看完這些，說實話心裡對資料視覺化的設計就有個譜了，沒有設計師，前端一樣可以好好玩耍。在這裡宣告一哈：整個專案背景圖來自17素材網等網上平臺（不用於商業用途）。

 

三、技術選型、知識準備

既然上篇文章被各路“扛精”，那我就繼續用Vue來搞事情，這裡想了一哈整個專案（回憶了功能），梳理列了下面幾項技術棧和知識點：

1、vue（vue專案構建、指令的靈活運用、元件封裝、元件之間通訊）

2、vue-router(路由預備知識：hash和history區別、動態路由、路由切換傳參)

3、網路請求axios(自己封裝axios、跨域代理配置)

4、視覺化工具echarts、v-charts處理圖形（控制大小、佈局、顏色、接受資料格式）

5、es6（基礎語法，比如在梳理資料過程中用到map遍歷陣列、物件和陣列轉換等等）

6、scss(配置、語法)

7、bootstrap、iconfont（用於沒有設計師，作為前端設計能力有限，所以引用這兩個）

8、打包上線（一些小坑）

好的列完了以上開發準備，裝備好以上技能，繫好安全帶，開始上路了

 

功能設計和程式碼實現

一、構建專案

直接用腳手架構建，把需要的axios、echarts、v-charts、scss、bootstrap，安裝配置好，具體操作略，axios跨域代理配置可以在網上找到相關資源，主要看看我規劃的src檔案結構，這塊其實我封裝了很多公共元件，這裡就不細講了

├── src                   原始碼目錄  
│  ├── main.js            入口js檔案
│  ├── app.vue            根元件
│  ├── components         公共元件目錄
│  │  └── index.js       把全部元件遍歷出來
│  ├── assets             資源目錄，這裡的資源會被wabpack構建
│  │  └── css             css基礎重置
│  │  └── data            視覺化介面需要的圖片
│  │  └── iconfont        字型圖示
│  │    └── bg.png
│  ├── routes             前端路由
│  │  └── index.js
│  └── pages             頁面目錄
│    ├── app             入口檔案
│    └── data             視覺化檔案
複製程式碼

二、入口首頁設計

先看看效果圖（沒有設計師，一個前端的審美）

主要功能：

1、服務條款彈框，這裡彈框我封裝了一個首頁的元件，有用bootstrap樣式，這裡有一個父子元件通訊，首先點選服務條款，父元件告訴子元件要顯示了，子元件顯示之後，點選“x”或者“知道了”，告訴父元件需要讓子元件不顯示了

首頁（父元件）引用“服務條款彈框”元件

 <pmodal :isShow="isShow" @sayhidden="sayhidden" v-if="isShow"/>複製程式碼

首頁（父元件）控制彈框的 methods

showpm(){
    	this.isShow = true
    },
    sayhidden(sayhidden){
    	this.isShow = sayhidden
    }複製程式碼

 

“服務條款彈框”元件，接收首頁的是否顯示彈框的命令，然後通過$emit點選關閉向首頁傳遞“關閉”狀態 

export default {
  name: 'pmodal',
  props: {
    isShow: null,
  },
  data () {
      return {
        sayhidden: false
      }
  },
  methods:{
  	closebtn(){
  		this.$emit('sayhidden', this.sayhidden)
  	}
  }
}
複製程式碼

2、輸入框表單驗證，這裡主要是兩個判斷，當輸入框為空時候點“生成”按鈕，提示不能為空，當用戶輸入的時候，提示消失、點選提交的時候，請求介面然後把資訊反饋回來，如果使用者有誤，提示重新輸入，如果正確，就帶著引數跳到"大資料視覺化"頁面

主要程式碼：

  generate(username){
    	let name = this.username
    	let self = this
    	if(name.length <= 0){
    		this.namelg = true
    		return
    	}else{
	        this.$axios.get('/api/users/'+ name).then((response)=>{
          	    let res = JSON.parse(JSON.stringify(response))
          	    if(res.status === 200){
          	     	this.$router.push({ 
          	     		name: 'data',
          	     		params: { user: name }
          	     	})
			      }   
			      return
		    	}).catch(err => {
		    		this.nousename = true
          	     	this.errname = name
				  console.log(err.message);
				})
            }
    	
    }
複製程式碼

 

3、首頁背景和粒子動效（已經在前面一篇文章有講）這裡略

 

二、大資料頁設計和開發

先看看效果圖（沒有設計師，一個前端的審美），這裡我用的尤雨溪大大賬號進行查詢的資料例項（向Vue作者致敬），尤大大的各項資料槓槓的，膜拜臉.img

好了，通過我這個設計可以劃分上、中（左中右）三個部分內容為：

【1】上面基本上一個標題，左上角有一個“彩蛋”（後頭講作用）

【2】中-左部分：個人資訊，倉庫stars情況，倉庫語言分類

【3】中-中部分：倉庫公開數量、粉絲數量、跟隨數量、倉庫資料、最近你的操作

【4】中-右：最近的粉絲、最近的跟隨、最新資訊

值得一說的是我這邊每個功能都是一個模組元件，首先帶邊框的是一個元件盒子、圖表都是一個元件盒子、數量資料模組也是一個元件盒子、粉絲和跟隨一個元件盒子

下面我按功能模組講：

1、個人資訊、倉庫公開數量、粉絲數量、跟隨數量：個人頭像、使用者名稱、加入時間。這些都是可以通過介面(https://api.github.com/users)直接獲取，然後直接放上去就OK了

2、倉庫stars情況，倉庫語言分類，我這裡用的是一個介面（https://api.github.com/users/使用者名稱/repos）例如，我這邊用自己賬號測的第一條資料

你會發現這個資料一條都有93行資料，看的你頭皮發麻，其實這裡你只需要，倉庫名和獲取的star數量和語言型別，這幾個資料。

這個時候你就得研究一下v-charts官網了（對於有經驗的同學直接跳過），看看它要接受什麼樣型別的物件資料，然後你就按照他的要求去拼裝成它能識別的資料格式，這樣才能生成想要的視覺化圖表，看了一下，資料格式基本上就是這個樣子，看到片這裡，你可以順便了解一下怎麼設定v-charts 的外觀和大小之類的設定，其中我總結這幾個屬性legend、grid、series用到的概率比較高。

 

<script>
  export default {
    data: function () {
      return {
        chartData: {
          columns: ['日期', '訪問使用者', '下單使用者', '下單率'],
          rows: [
            { '日期': '1/1', '訪問使用者': 1393, '下單使用者': 1093, '下單率': 0.32 },
            { '日期': '1/2', '訪問使用者': 3530, '下單使用者': 3230, '下單率': 0.26 },
            { '日期': '1/3', '訪問使用者': 2923, '下單使用者': 2623, '下單率': 0.76 },
            { '日期': '1/4', '訪問使用者': 1723, '下單使用者': 1423, '下單率': 0.49 },
            { '日期': '1/5', '訪問使用者': 3792, '下單使用者': 3492, '下單率': 0.323 },
            { '日期': '1/6', '訪問使用者': 4593, '下單使用者': 4293, '下單率': 0.78 }
          ]
        }
      }
    }
  }
</script>
複製程式碼

 

所以你就一起抽離一下

 

  data () {
  	 this.extend = {
        legend:{
        	 textStyle: {color: '#fff'},
        },
        grid: {
            textStyle: {
                color: "#fff"
            }
          },
          series:{
          	radius:['0','40%'],
          	center: ['50%', '50%']
          }
    }
    return {
      personalD:{},
      starData:{
		  columns: ['reposName', 'getStars'],
		  rows: [
		  ]
		},
      noStarData:false,
      languageData:{
		  columns: ['lang', 'number'],
		  rows: [
		  ]
		},
      nolanguageData:false
    }
  }
複製程式碼

 

說明：starData、languageData,分別是倉庫stars情況，倉庫語言分類初始化資料物件

這裡是請求資料和梳理倉庫名和獲取的star數量和語言型別的程式碼

getData(username){
  	let comUrl = "https://api.github.com/users/"
    	axios.get(comUrl + username + '/repos').then((response)=>{
      	    let data = JSON.parse(JSON.stringify(response.data))
      	    if(data.length<1){
	    		this.noStarData = true
	    	}else{
	    		let rowdata = []
	    		let languages = {}
		        for(var i=0;i<data.length;i++){	
		        	// 倉庫和倉庫star
	        		let reposName = data[i].name
	        		let getStars = data[i].stargazers_count
	        		let obj = {
                            reposName:reposName,
                            getStars:getStars
                       }
                    rowdata.push(obj)
                    
                    //梳理語言，計算語言型別和各個語言的數量
                    let langData =data[i].language
                    if (langData) {
			            if (langData in languages) {
			                languages[langData]++;
			            }else {
			                languages[langData] = 1;
			            }
			        }
		        }
		        //把值附到starData.rows
		        this.starData.rows = rowdata
		        //console.log(this.starData.rows)
                 
                 //重新組裝語言封成物件
		        let objL = JSON.parse(JSON.stringify(languages))
		        let dataL =[]
		        for(var key in objL){
		         	dataL.push({"lang":key,"number":objL[key]}) 
		         }
		       this.languageData.rows = dataL
		        //console.log(objL)  
		        //console.log(this.languageData.rows)
	    	}  
		    return
		    
		    
	    	}).catch(err => {
			   console.log(err.message);
			})
  	   }
複製程式碼

 

這裡的程式碼不夠優雅（別問我為什麼不用map函式），比如我計算具體語言的倉庫的語言型別，每個倉庫都有可能有幾種語言，每條倉庫的語言都不一樣，我要統計全部倉庫的各個語言的個數，然後再封裝成v-charts可以識別的資料型別，所以分兩步做了，首先把遍歷出來的語言都放在一個物件裡，如下

1、{"JavaScript":2,"CSS":2,"less":2}
複製程式碼

 

然後把這個資料轉換成v-charts可以識別的資料型別，如下

[
{"lang":"JavaScript",
 "number":2
}
{"lang":"CSS",
 "number":2
}
] 
複製程式碼

 

3、倉庫資料、最近你的操作、最近的粉絲、最近的跟隨 這個資料直接可以獲取

4、最新資訊，這裡也是都做了，一個新聞滾動效果，具體實現可以移步我寫的這篇文章這裡

 

三、優化和體驗互動的一些處理

1、在載入資料的時候會有一個遮罩層設計，資料加載出來了這個遮罩層消失、展現資料，實現原理就是v-if控制顯示隱藏

2、當用戶尷尬到，沒有查詢無資料的會有對應的提示沒有資料選項

3、當用戶在位址列輸入不存在的使用者的查詢會有個判斷，然後彈框提示，點選關閉都會跳轉到首頁入口頁面

四、小彩蛋

說是小彩蛋，其實，就是大概講一下作為作者，我後面GitDataV後面的一些小展望吧，之前說的左上角左箭頭圖示，其實這裡是做一個拓展功能，目前點選全屏已經實現，後面還會繼續新增國際化處理、切換面板等功能。

 

最後：

到這裡，GitDataV，Vue構建的github“視覺化大資料平臺”設計、開發分享到這裡就告一段落，希望對初中級前端同學有所幫助。github提供了開發者API，能獲取的資料遠不止這些，如果要更全面的梳理資料，需要比較長的路要走，資料分析可以做的更好，目前這些功能和資料梳理在效能上和實用性上沒有做過多的測試，包括文章寫的倉促，描述有誤之處，謝謝大家指正。

目前打包後的專案放在github通過網站訪問有些Bug待解決，但不影響正常使用，推薦把GitDataV（github原始碼倉庫）專案下載下來，在本機執行專案，然後通過自己的賬號生成自己的github“視覺化大資料平臺”。（感覺還不錯的話，老鐵們是不是來github裡賞個★Star鼓勵一哈）

後續會持續更新和優化，分享一些新的功能在github倉庫，也會發布更新在這篇文章和上，也期待大家的交流....