写在前面
GitDataV&＃xff0c;是一个github“大数据可视化平台”&＃xff0c;通过它你可以更直观的看到你在github里的一些数据&＃xff0c;(之所以打双引号&＃xff0c;是因为我觉得这个还没到大数据可视化的程度)。其实我在 上篇文章 分享的时候已经提到了这个想法&＃xff0c;通过github提供的接口&＃xff0c;做一个自己的“大数据分析页面”&＃xff0c;所以我就花了几天晚上的时间&＃xff0c;把这想法从设计到开发构建出来了&＃xff0c;那么下面我就我个人的账号测试看看效果如下
![]()
如果您感兴趣可以点击这里访问简单的&＃xff1a;GitDataV网站 (目前打包后有些小bug&＃xff0c;但不影响正常使用) &＃xff0c;看看你的github“大数据分析”详情。
推荐把GitDataV(github源码)项目下载下来&＃xff0c;在本机运行项目&＃xff0c;在本机浏览器打开网页&＃xff0c;生成自己的“大数据分析”详情。
通过它你将看到你在github里的这些数据&＃xff1a;个人信息(✔)&＃xff0c;仓库stars情况(✔)&＃xff0c;仓库语言分类(✔)仓库公开数量(✔)、粉丝数量(✔)、跟随数量(✔)、仓库数据(✔)、最近你的操作(✔)、最近的粉丝(✔)、最近的跟随(✔)、最新信息(✔)&＃xff0c;左上角箭头小彩蛋&＃xff1a; 全屏(✔)、 国际化语言切换(开发中...)、皮肤切换(开发中..)
看着还不错吧(没有设计师&＃xff0c;自己作为前端设计&＃xff0c;审美[chou]就这样)&＃xff0c;有点小感(la)觉(ji)。下面步入正题&＃xff0c;我将从下面几点&＃xff1a;需求分析、开发准备、功能设计和代码实现&＃xff0c;对我独立从设计到开发构建这个“可视化大数据平台”小玩意做个分享&＃xff1a;
需求分析
信息数据时代&＃xff0c;每个人对数据都是敏感的&＃xff0c;对于你在github的数据&＃xff0c;你除了看到github官方网站给你的数据之外&＃xff0c;其实你还可以看到更多的数据。我当时的初心就是通过用户输入自己的github账号&＃xff0c;可以获取自己在github里有用的数据。在上次做门户网站在前端页面交互应用和小技巧的时候偶然发现原来github提供了开发者API&＃xff0c;地址传送门&＃xff1a;(https://developer.github.com/...
点进一看发现新大陆&＃xff0c;欣喜若狂的我感觉有了一个心血来潮&＃xff0c;自己的想法还是自己实现吧&＃xff0c;开搞&＃xff01;
开发准备
一、了解GitHub开发者文档
v3版API的文档链接、v3版API的官方教程
先看看github接口都能获取什么数据吧&＃xff0c;先做个简单的测试我通过我自己的账号(hongqingcao)去请求/users接口(https://api.github.com/users/...)得到下面的数据&＃xff0c;哇哇。从上往下看&＃xff0c;真全面&＃xff0c;连我都忘记自己GitHub注册时间&＃xff0c;这里都有
![]()
当然你如果懒得去学习官方文档&＃xff0c;网上一搜还真有人总结了Github API调用&＃xff0c;传送门《一篇文章搞定Github API 调用 (v3)》
二、了解可视化相关的设计
首先进入百度了解了一哈&＃xff0c;乍一眼看&＃xff0c;基本上都是偏深蓝色调&＃xff0c;当然不仅仅如此《大数据数据可视化的设计原则》&＃xff0c;我也是有看的&＃xff0c;具体资料有兴趣的同学可以自行研究。
![]()
阿里的DataV数据可视化是比较6的&＃xff0c;自信到百度查出来的都是“双十一大屏展示”卖点啊(多次提到百度&＃xff0c;阿里&＃xff0c;哈哈)
![]()
看完这些&＃xff0c;说实话心里对数据可视化的设计就有个谱了&＃xff0c;没有设计师&＃xff0c;前端一样可以好好玩耍。在这里声明一哈&＃xff1a;整个项目背景图来自17素材网等网上平台(不用于商业用途)。
三、技术选型、知识准备
既然上篇文章被各路“扛精”&＃xff0c;那我就继续用Vue来搞事情&＃xff0c;这里想了一哈整个项目(回忆了功能)&＃xff0c;梳理列了下面几项技术栈和知识点&＃xff1a;
1、vue(vue项目构建、指令的灵活运用、组件封装、组件之间通信)
2、vue-router(路由预备知识&＃xff1a;hash和history区别、动态路由、路由切换传参)
3、网络请求axios(自己封装axios、跨域代理配置)
4、可视化工具echarts、v-charts处理图形(控制大小、布局、颜色、接受数据格式)
5、es6(基础语法&＃xff0c;比如在梳理数据过程中用到map遍历数组、对象和数组转换等等)
6、scss(配置、语法)
7、bootstrap、iconfont(用于没有设计师&＃xff0c;作为前端设计能力有限&＃xff0c;所以引用这两个)
8、打包上线(一些小坑)
好的列完了以上开发准备&＃xff0c;装备好以上技能&＃xff0c;系好安全带&＃xff0c;开始上路了
功能设计和代码实现
一、构建项目
直接用脚手架构建&＃xff0c;把需要的axios、echarts、v-charts、scss、bootstrap&＃xff0c;安装配置好&＃xff0c;具体操作略&＃xff0c;axios跨域代理配置可以在网上找到相关资源&＃xff0c;主要看看我规划的src文件结构&＃xff0c;这块其实我封装了很多公共组件&＃xff0c;这里就不细讲了
├── src 源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── index.js 把全部组件遍历出来
│ ├── assets 资源目录&＃xff0c;这里的资源会被wabpack构建
│ │ └── css css基础重置
│ │ └── data 可视化界面需要的图片
│ │ └── iconfont 字体图标
│ │ └── bg.png
│ ├── routes 前端路由
│ │ └── index.js
│ └── pages 页面目录
│ ├── app 入口文件
│ └── data 可视化文件
二、入口首页设计
先看看效果图(没有设计师&＃xff0c;一个前端的审美)
![]()
主要功能&＃xff1a;
1、服务条款弹框&＃xff0c;这里弹框我封装了一个首页的组件&＃xff0c;有用bootstrap样式&＃xff0c;这里有一个父子组件通讯&＃xff0c;首先点击服务条款&＃xff0c;父组件告诉子组件要显示了&＃xff0c;子组件显示之后&＃xff0c;点击“x”或者“知道了”&＃xff0c;告诉父组件需要让子组件不显示了
首页(父组件)引用“服务条款弹框”组件
首页(父组件)控制弹框的 methods
showpm(){
this.isShow &＃61; true
},
sayhidden(sayhidden){
this.isShow &＃61; sayhidden
}
“服务条款弹框”组件&＃xff0c;接收首页的是否显示弹框的命令&＃xff0c;然后通过$emit点击关闭向首页传递“关闭”状态
export default {
name: &＃39;pmodal&＃39;,
props: {
isShow: null,
},
data () {
return {
sayhidden: false
}
},
methods:{
closebtn(){
this.$emit(&＃39;sayhidden&＃39;, this.sayhidden)
}
}
}
2、输入框表单验证&＃xff0c;这里主要是两个判断&＃xff0c;当输入框为空时候点“生成”按钮&＃xff0c;提示不能为空&＃xff0c;当用户输入的时候&＃xff0c;提示消失、点击提交的时候&＃xff0c;请求接口然后把信息反馈回来&＃xff0c;如果用户有误&＃xff0c;提示重新输入&＃xff0c;如果正确&＃xff0c;就带着参数跳到"大数据可视化"页面
主要代码&＃xff1a;
generate(username){
let name &＃61; this.username
let self &＃61; this
if(name.length <&＃61; 0){
this.namelg &＃61; true
return
}else{
this.$axios.get(&＃39;/api/users/&＃39;&＃43; name).then((response)&＃61;>{
let res &＃61; JSON.parse(JSON.stringify(response))
if(res.status &＃61;&＃61;&＃61; 200){
this.$router.push({
name: &＃39;data&＃39;,
params: { user: name }
})
}
return
}).catch(err &＃61;> {
this.nousename &＃61; true
this.errname &＃61; name
console.log(err.message);
})
}
}
3、首页背景和粒子动效(已经在前面一篇文章有讲)这里略
二、大数据页设计和开发
先看看效果图(没有设计师&＃xff0c;一个前端的审美)&＃xff0c;这里我用的尤雨溪大大账号进行查询的数据实例(向Vue作者致敬)&＃xff0c;尤大大的各项数据杠杠的&＃xff0c;膜拜脸.img
![]()
好了&＃xff0c;通过我这个设计可以划分上、中(左中右)三个部分内容为&＃xff1a;
【1】上面基本上一个标题&＃xff0c;左上角有一个“彩蛋”(后头讲作用)
【2】中-左部分&＃xff1a;个人信息&＃xff0c;仓库stars情况&＃xff0c;仓库语言分类
【3】中-中部分&＃xff1a;仓库公开数量、粉丝数量、跟随数量、仓库数据、最近你的操作
【4】中-右&＃xff1a;最近的粉丝、最近的跟随、最新信息
值得一说的是我这边每个功能都是一个模块组件&＃xff0c;首先带边框的是一个组件盒子、图表都是一个组件盒子、数量数据模块也是一个组件盒子、粉丝和跟随一个组件盒子
下面我按功能模块讲&＃xff1a;
1、个人信息、仓库公开数量、粉丝数量、跟随数量&＃xff1a;个人头像、用户名、加入时间。这些都是可以通过接口(https://api.github.com/users)...&＃xff0c;然后直接放上去就OK了
2、仓库stars情况&＃xff0c;仓库语言分类&＃xff0c;我这里用的是一个接口(https://api.github.com/users/...)例如&＃xff0c;我这边用自己账号测的第一条数据
你会发现这个数据一条都有93行数据&＃xff0c;看的你头皮发麻&＃xff0c;其实这里你只需要&＃xff0c;仓库名和获取的star数量和语言类型&＃xff0c;这几个数据。
这个时候你就得研究一下v-charts官网了(对于有经验的同学直接跳过)&＃xff0c;看看它要接受什么样类型的对象数据&＃xff0c;然后你就按照他的要求去拼装成它能识别的数据格式&＃xff0c;这样才能生成想要的可视化图表&＃xff0c;看了一下&＃xff0c;数据格式基本上就是这个样子&＃xff0c;看到片这里&＃xff0c;你可以顺便了解一下怎么设置v-charts 的外观和大小之类的设置&＃xff0c;其中我总结这几个属性legend、grid、series用到的概率比较高。
export default {
data: function () {
return {
chartData: {
columns: [&＃39;日期&＃39;, &＃39;访问用户&＃39;, &＃39;下单用户&＃39;, &＃39;下单率&＃39;],
rows: [
{ &＃39;日期&＃39;: &＃39;1/1&＃39;, &＃39;访问用户&＃39;: 1393, &＃39;下单用户&＃39;: 1093, &＃39;下单率&＃39;: 0.32 },
{ &＃39;日期&＃39;: &＃39;1/2&＃39;, &＃39;访问用户&＃39;: 3530, &＃39;下单用户&＃39;: 3230, &＃39;下单率&＃39;: 0.26 },
{ &＃39;日期&＃39;: &＃39;1/3&＃39;, &＃39;访问用户&＃39;: 2923, &＃39;下单用户&＃39;: 2623, &＃39;下单率&＃39;: 0.76 },
{ &＃39;日期&＃39;: &＃39;1/4&＃39;, &＃39;访问用户&＃39;: 1723, &＃39;下单用户&＃39;: 1423, &＃39;下单率&＃39;: 0.49 },
{ &＃39;日期&＃39;: &＃39;1/5&＃39;, &＃39;访问用户&＃39;: 3792, &＃39;下单用户&＃39;: 3492, &＃39;下单率&＃39;: 0.323 },
{ &＃39;日期&＃39;: &＃39;1/6&＃39;, &＃39;访问用户&＃39;: 4593, &＃39;下单用户&＃39;: 4293, &＃39;下单率&＃39;: 0.78 }
]
}
}
}
}
所以你就一起抽离一下
data () {
this.extend &＃61; {
legend:{
textStyle: {color: &＃39;#fff&＃39;},
},
grid: {
textStyle: {
color: "#fff"
}
},
series:{
radius:[&＃39;0&＃39;,&＃39;40%&＃39;],
center: [&＃39;50%&＃39;, &＃39;50%&＃39;]
}
}
return {
personalD:{},
starData:{
columns: [&＃39;reposName&＃39;, &＃39;getStars&＃39;],
rows: [
]
},
noStarData:false,
languageData:{
columns: [&＃39;lang&＃39;, &＃39;number&＃39;],
rows: [
]
},
nolanguageData:false
}
}
说明&＃xff1a;starData、languageData,分别是仓库stars情况&＃xff0c;仓库语言分类初始化数据对象
这里是请求数据和梳理仓库名和获取的star数量和语言类型的代码
getData(username){
let comUrl &＃61; "https://api.github.com/users/"
axios.get(comUrl &＃43; username &＃43; &＃39;/repos&＃39;).then((response)&＃61;>{
let data &＃61; JSON.parse(JSON.stringify(response.data))
if(data.length<1){
this.noStarData &＃61; true
}else{
let rowdata &＃61; []
let languages &＃61; {}
for(var i&＃61;0;i
// 仓库和仓库star
let reposName &＃61; data[i].name
let getStars &＃61; data[i].stargazers_count
let obj &＃61; {
reposName:reposName,
getStars:getStars
}
rowdata.push(obj)
//梳理语言&＃xff0c;计算语言类型和各个语言的数量
let langData &＃61;data[i].language
if (langData) {
if (langData in languages) {
languages[langData]&＃43;&＃43;;
}else {
languages[langData] &＃61; 1;
}
}
}
//把值附到starData.rows
this.starData.rows &＃61; rowdata
//console.log(this.starData.rows)
//重新组装语言封成对象
let objL &＃61; JSON.parse(JSON.stringify(languages))
let dataL &＃61;[]
for(var key in objL){
dataL.push({"lang":key,"number":objL[key]})
}
this.languageData.rows &＃61; dataL
//console.log(objL)
//console.log(this.languageData.rows)
}
return
}).catch(err &＃61;> {
console.log(err.message);
})
}
这里的代码不够优雅(别问我为什么不用map函数)&＃xff0c;比如我计算具体语言的仓库的语言类型&＃xff0c;每个仓库都有可能有几种语言&＃xff0c;每条仓库的语言都不一样&＃xff0c;我要统计全部仓库的各个语言的个数&＃xff0c;然后再封装成v-charts可以识别的数据类型&＃xff0c;所以分两步做了&＃xff0c;首先把遍历出来的语言都放在一个对象里&＃xff0c;如下
1、{"Javascript":2,"CSS":2,"less":2}
然后把这个数据转换成v-charts可以识别的数据类型&＃xff0c;如下
[
{"lang":"Javascript",
"number":2
}
{"lang":"CSS",
"number":2
}
]
3、仓库数据、最近你的操作、最近的粉丝、最近的跟随 这个数据直接可以获取
4、最新信息&＃xff0c;这里也是都做了&＃xff0c;一个新闻滚动效果&＃xff0c;具体实现可以移步我写的这篇文章这里
三、优化和体验交互的一些处理
1、在加载数据的时候会有一个遮罩层设计&＃xff0c;数据加载出来了这个遮罩层消失、展现数据&＃xff0c;实现原理就是v-if控制显示隐藏
![]()
2、当用户尴尬到&＃xff0c;没有查找无数据的会有对应的提示没有数据选项
![]()
3、当用户在地址栏输入不存在的用户的查询会有个判断&＃xff0c;然后弹框提示&＃xff0c;点击关闭都会跳转到首页入口页面
![]()
四、小彩蛋
说是小彩蛋&＃xff0c;其实&＃xff0c;就是大概讲一下作为作者&＃xff0c;我后面GitDataV后面的一些小展望吧&＃xff0c;之前说的左上角左箭头图标&＃xff0c;其实这里是做一个拓展功能&＃xff0c;目前点击全屏已经实现&＃xff0c;后面还会继续添加国际化处理、切换皮肤等功能。
![]()
最后&＃xff1a;
到这里&＃xff0c;GitDataV&＃xff0c;Vue构建的github“可视化大数据平台”设计、开发分享到这里就告一段落&＃xff0c;希望对初中级前端同学有所帮助。github提供了开发者API&＃xff0c;能获取的数据远不止这些&＃xff0c;如果要更全面的梳理数据&＃xff0c;需要比较长的路要走&＃xff0c;数据分析可以做的更好&＃xff0c;目前这些功能和数据梳理在性能上和实用性上没有做过多的测试&＃xff0c;包括文章写的仓促&＃xff0c;描述有误之处&＃xff0c;谢谢大家指正。
目前打包后的项目放在github通过网站访问有些Bug待解决&＃xff0c;但不影响正常使用&＃xff0c;推荐把GitDataV(github源码仓库)项目下载下来&＃xff0c;在本机运行项目&＃xff0c;然后通过自己的账号生成自己的github“可视化大数据平台”。(感觉还不错的话&＃xff0c;老铁们是不是来github里赏个★Star鼓励一哈)
后续会持续更新和优化&＃xff0c;分享一些新的功能在github仓库&＃xff0c;也会发布更新在这篇文章和上&＃xff0c;也期待大家的交流....
京公网安备 11010802041100号