使用vue构建一个可视化大数据平台

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

使用vue全家桶以及v-charts和datav实现一个github可视化大数据界面展示，没有设计搞的原因，只能忽略设计编写一下界面，

用户只需要登录的时候填写自己github用户名。就可以看到数据展示
在登录的时候，可能会存在登录失败，可能造成的原因是网络不稳定，
最终界面展示效果

功能实现

- 用户登录以及个人信息展示
- 粉丝数量以及粉丝展示
- 仓库 Stars 详情
- 仓库语言详情

接口数据

在这个项目中所需要用到的接口，其实github提供的接口不值这些，如果想访问更多接口的话，地址传送门：https://developer.github.com/v3查询多有的API接口
请求个人信息接口 https://api.github.com/users/用户名
请求粉丝接口 https://api.github.com/users/用户名/followers
仓库信息 https://api.github.com/users/用户名/repos
这个接口里面包含个人仓库所有信息
包含提交信息 https://api.github.com/users/用户名/events

登录页面设计

在登录页面中，对input做一下校验，不能为空，并封装了一个弹出框，通过弹出框,点击确定触发接口请求数据

表单严重完之后，点击确定，用户输入完用户名之后，就会跳转到首页
其中userName就是用户要输入的用户名，
onLogin () {
this.$axios
.get(`https://api.github.com/users/${this.userName}`)
.then(res => {
const { data } = res;
sessionStorage.setItem("userkey", data.login);
localStorage.setItem("userkey", data.login);
this.$router.push({
name: "Home",
query: { user: data.login }
});
});
}
登录成功之后，把用户名存储到sessionStorage，方便在首页的时候用到

首页效果

当一进到首页的时候，会有一个加载效果，知道数据加载完成。
从页面当中，把页面分为左中右三个部分

左边数据展示

在左边的内容中展示的主要是自己gitub中开源仓库数量，个人粉丝以及跟随效果

仓库数据展示

在这个有分为上下两部分
在上面可以看到个人仓库点赞数量，以及仓库所需要的语言
仓库Starts中，需要对数据进行处理，后台给我们返回的不是我们想要的格式，需要自己手动处理，按照插件需要的格式进行显示，因为这里我们只需要用到仓库名称和点赞量
getStats () {
this.$axios.get(`https://api.github.com/users/${this.userName}/repos`).then((res) => {
let data = res.data;
// 仓库和仓库star 只有star大于0的时候展示
for (var i = ; i < data.length; i++) {
if (data[i].stargazers_count > ) {
this.chartDatas.rows.push({
'名称': data[i].name,
'star数量': data[i].stargazers_count
})
}
}
}
在这个table表格中展示的效果

在datav提供的数据格式为

export default {
header: ['列1', '列2', '列3'],
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]
}

需要我们处理成他们那样，从接口中，获取到需要的数据，遍历循环，在接口中需要拿到用户名

getEvents () {
this.$axios.get(`https://api.github.com/users/${this.userName}/events`).then(res => {
let { data } = res;
let dataAry = [];
if (data) {
for (let i = ; i < data.length; i++) {
let date = data[i].created_at.split('T')[]
if (data[i].payload.commits) {
data[i].payload.commits.forEach(ele => {
dataAry.push([date, data[i].type, data[i].repo.name, ele.message])
})
}
}
} this.config = {
header: ['操作时间', '类型', '操作的仓库', '备注'],
data: dataAry
}
})
}

右边个人数据展示

其实在右边数据展示，没有太多复杂行，从接口读取数据，直接渲染就行了
在https://api.github.com/users/用户名请求接口就可以拿到了
通过接口数据userName登录用户名，就可以拿到个人所有粉丝，一开始我就下让展示9个，剩下的需要点击查看更多会把所有的粉丝都列举出来
getFans () {
// 获取粉丝
this.$axios.get(`https://api.github.com/users/${this.userName}/followers`).then((res) => {
let { data } = res
if (data.length > ) {
this.fans = data
}
})
},
最后
到这里所有的工作都已接近尾声，剩下的就是在优化优化细节，项目已经上传到github源码仓库，需要的可以取github下载，如果感觉可以的话，求Star一下，一次鼓励