對110W知乎使用者資訊進行分析，使用echarts+servlet+jsp視覺化展示
阿新 • • 發佈：2019-01-03
上一篇介紹了使用scrapy框架爬取知乎資訊，爬取了知乎112W使用者的資訊，接下來是對這些資訊進行分析處理和前端視覺化。
使用的工具
Java web
servlet + jsp
mysql資料庫
echarts
這裡重點是echarts，是一款百度開發的基於canvas的視覺化開發工具，還是很好用的，詳情請看官網：echarts官網
對於資料的分析只是簡單的sql語句，然後將結果存到表中，再通過寫javaweb程式碼，獲取資料庫資料，傳到.jsp中作為echarts畫圖的資料。進行資料的前端視覺化展示。
我們來看一下知乎使用者的性別分佈：
結果如下圖：/* 性別分佈餅狀圖 */ // 指定圖表的配置項和資料 var sexoption = { title : { text: '知乎使用者性別分佈', subtext: '112w條資料', x:'60%' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: '30%', data: ['男','女','未知'] }, series : [ { name: '使用者性別', type: 'pie', radius : '55%', center: ['70%', '50%'], data:[{value:435265, name:'男'}, {value:367175, name:'女'}, {value:318923, name:'未知'},] } ] };
男為38.82%，女為32.74% 居然有28.44%是未知，將近三分之一的使用者沒有註明自己的性別。
再來看知乎使用者校友排行榜——>
看看結果：/* 學校柱狀圖 */ //指定圖表的配置項和資料 var schooloption = { //標題 title: { text: '知乎校友排行(前20)', textStyle :{ color: '#408829' } }, //工具箱 toolbox: { show: true, feature: { dataView:{ show: true }, restore:{ show:true }, dataZoom:{ show: true }, saveAsImage: { show: true }, magicType: { type:['line', 'bar'] } } }, tooltip: { trigger: 'axis' }, //圖例 legend: { data: ['學校'] }, grid: { y2: 100 }, //x軸 xAxis: { axisLabel :{ textStyle: { color:'green', fontSize: 15 }, rotate: 40, //傾斜度數 interval:0 }, data: arrName.slice(0, 20) }, yAxis: {}, //資料 series: [{ name: '學校', type: 'bar', center: ['50%', '50%'], itemStyle: { normal: { color: '#00ffcc' } }, data: arrNum.slice(0, 20) }] };
不是這些學校畢業的都不好意思寫自己的學校嗎（23233333）！
看一下知乎使用者的專業情況——>
結果呢？/* 專業分佈餅狀圖 */ // 指定圖表的配置項和資料 var majoroption = { title : { text: '知乎使用者專業（前20）', subtext: '112w條資料', x:'60%' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: '30%', data: majorName }, series : [ { name: '使用者所學專業', type: 'pie', radius : '55%', center: ['70%', '50%'], data:majorJson } ] };
知乎是程式設計師的知乎，這話也不是沒有道理！！！
再來看知乎使用者所在城市排行——>
/*
所在地區分佈
*/
// 指定圖表的配置項和資料
var addreoption = {
title : {
text: '知乎使用者所在城市（前十）',
subtext: '112w條資料',
x:'60%'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: '30%',
data: ['北京','上海','杭州', '成都', '南京', '廣州', '深圳', '武漢', '西安', '重慶']
},
series : [
{
name: '使用者所在城市',
type: 'pie',
radius : '55%',
center: ['70%', '50%'],
data:[
{value:50002, name:'北京'},
{value:32055, name:'上海'},
{value:11925, name:'杭州'},
{value:8794, name:'成都'},
{value:8331, name:'南京'},
{value:7748, name:'廣州'},
{value:7548, name:'深圳'},
{value:7456, name:'武漢'},
{value:5639, name:'西安'},
{value:4202, name:'重慶'},
]
}
]
};and結果——>
北京和上海佔了一大半！！！！
再來看一下粉絲排行榜吧——>
/*
粉絲排名柱狀圖
*/
//指定圖表的配置項和資料
var fanoption = {
//標題
title: {
text: '粉絲數量排行(前20)',
textStyle :{
color: '#408829'
}
},
//工具箱
toolbox: {
show: true,
feature: {
dataView:{
show: true
},
restore:{
show:true
},
dataZoom:{
show: true
},
saveAsImage: {
show: true
},
magicType: {
type:['line', 'bar']
}
}
},
tooltip: {
trigger: 'axis'
},
//圖例
legend: {
data: ['', '', '']
},
grid: {
y2: 100
},
//x軸
xAxis: {
axisLabel :{
textStyle: {
color:'green',
fontSize: 15
},
rotate: 30, //傾斜度數
interval:0
},
data: arrfanName.slice(0, 20)
},
yAxis: {},
//資料
series: [{
name: '姓名',
type: 'bar',
itemStyle: {
normal: {
color:function(params) {
if (arrfanGender[params.dataIndex] ==1){
return '#0088a8';
} else if(arrfanGender[params.dataIndex] ==0){
return '#ffb7dd';
}else {
return '#dddddd';
}
}
}
},
data: arrfanFollower_count.slice(0, 20)
}]
};
不同的顏色代表不同的性別 藍色是男，粉色是女，灰色是未知，，（一看就知！）
雖然看了之乎使用者的城市排行，但還是想看一下使用者的地域分佈 所以，，懟程式碼——>
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
mapoption = {
backgroundColor: '#ffffff',
title: {
text: '知乎使用者所在城市',
left: 'center',
textStyle: {
color: '#666666'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value[2];
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x:'right',
data:['數量'],
textStyle: {
color: '#666666'
}
},
dataRange: {
min: 0,
max: 51000,
calculable: true,
color: ['#d94e5d','#eac736','#50a3ba'],
textStyle: {
color: '#666666'
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
left: 'center',
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series : [
{
name: '數量',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(addressJson),
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
}
]
};看結果：
一目瞭然，，使用者還是集中在東部地區。