第基于PHP實現(xiàn)微博熱搜實時監(jiān)控平臺目錄背景一、整體思路二、數(shù)據(jù)爬取1.獲取HTML2.提取數(shù)據(jù)3.返回數(shù)據(jù)三、數(shù)據(jù)可視化1.畫柱狀圖2.ajax請求數(shù)據(jù)四、效果展示寫在最后

背景

在學(xué)習(xí)、脫發(fā)之余，便是去微博看看有沒有發(fā)生什么有趣的事情，或是了解一下正在發(fā)生著哪些大事，亦或是某些讓我久久不能平復(fù)的事

Whatever~因為重點并不是這個

重點是，當(dāng)我去搜微博熱搜的時候，是這樣的：

界面需要一直手動刷新，而且我簡單搜了一下，似乎是沒有相關(guān)的實時統(tǒng)計圖的，于是我嘗試著自己寫一個。

(ps.要是有哪位大佬知道有現(xiàn)成的歡迎留言哦，定將感激涕零~)

一、整體思路

一個簡單的想法在我嬸嬸的腦海里浮現(xiàn)了出來：首先搜集數(shù)據(jù)，然后通過一個web頁面來進行統(tǒng)計展示。

對于搜集數(shù)據(jù)當(dāng)然是寫個爬蟲就好了，首先腦里閃過的是用python，但是人總是喜歡嘗試下新東西，于是我選擇試試用PHP來寫爬蟲。所以，大體框架便出來了：

二、數(shù)據(jù)爬取

1.獲取HTML

PHP爬取微博熱搜頁面，得到HTML源碼：

functiongetUrlContent($url){//通過url獲取html內(nèi)容

$ch=curl_init();

curl_setopt($ch,CURLOPT_URL,$url);

curl_setopt($ch,CURLOPT_USERAGENT,"Mozilla/4.0(compatible;MSIE7.0;WindowsNT6.1)");

curl_setopt($ch,CURLOPT_HEADER,1);

curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);

$output=curl_exec($ch);

curl_close($ch);

return$output;

}

當(dāng)然，也可以直接用file_get_contents等方法。

2.提取數(shù)據(jù)

通過正則等方式，將HTML中的table標(biāo)簽提取出來，并轉(zhuǎn)換為Array類型：

functiongetTable($html){

preg_match_all("/table[\s\S]*\/table/i",$html,$table);

$table=$table[0][0];

$table=preg_replace("'table[^]*'si","",$table);

$table=preg_replace("'tr[^]*'si","",$table);

$table=preg_replace("'td[^]*'si","",$table);

$table=str_replace("/tr","{tr}",$table);

$table=str_replace("/td","{td}",$table);

//去掉HTML標(biāo)記

$table=preg_replace("'[/!]*[^]*'si","",$table);

//去掉空白字符

$table=preg_replace("'([rn])[s]+'","",$table);

$table=str_replace("","",$table);

$table=str_replace("","",$table);

$table=explode('{tr}',$table);

array_pop($table);

foreach($tableas$key=$tr){

//自己可添加對應(yīng)的替換

$tr=str_replace("\n\n","",$tr);

$td=explode('{td}',$tr);

array_pop($td);

$td_array[]=$td;

return$td_array;

}

3.返回數(shù)據(jù)

爬取整理數(shù)據(jù)并返回以便前端調(diào)用：

$html=getUrlContent("/top/summaryRefer=top_hottopnav=1wvr=6");

$table=getTable($html);

$table=array_slice($table,2);#把前面多余部分截掉

echojson_encode($table);

至此，可將以上代碼整合為一個php文件，設(shè)名為weibo.php，以待前端通過ajax的方式調(diào)用。

三、數(shù)據(jù)可視化

實不相瞞：前端咱不行，但四處搬磚、東拼西湊還是比較拿手的~現(xiàn)學(xué)了echarts.js，再看看網(wǎng)上前輩大佬們的演示，最終還是湊了出來。

1.畫柱狀圖

利用echarts.js在畫布上畫出統(tǒng)計的柱狀圖：

functionCreateBar(keywords,value){

//初始化echarts實例

varmyChart=echarts.init(document.getElementById('chartmain'));

myChart.on('click',function(param){

window.open('#');

//指定圖標(biāo)的配置和數(shù)據(jù)

varoption={

title:{

text:''

tooltip:{},

grid:{

top:"15%",

left:"16%",

bottom:"5%"

legend:{

data:['熱搜詞']

xAxis:{

yAxis:{

data:keywords

series:[{

name:'搜索量',

type:'bar',

itemStyle:{

normal:{

color:'#ff9406'

data:value

myChart.setOption(option);

}

這里需要兩個參數(shù)（兩個Array），即熱搜詞和搜索量，而它們得通過ajax的方式向后端發(fā)送請求獲取。

2.ajax請求數(shù)據(jù)

通過ajax的方式向后端發(fā)起請求（即之前提到的weibo.php），以獲得數(shù)據(jù):

functionGetData(){

$.ajax({

type:"post",//數(shù)據(jù)提交方式（post/get）

url:"weibo.php",//提交到的url

dataType:"json",//返回的數(shù)據(jù)類型格式

success:function(msg){

//返回成功的回調(diào)函數(shù)

if(msg!=''){

vardata=eval(msg);//將返回的json數(shù)據(jù)進行解析，并賦給data

varkeywords=[];

varvalue=[];

for(vari=0;ii++){//取TOP20

keywords.push(data[i][1].split('\n')[0]);

value.push(Number(data[i][1].split('\n')[1]));

CreateBar(keywords.reverse(),value.reverse());

setInterval("GetData()",10000);//間隔10S

error:function(msg){

//返回失敗的回調(diào)函數(shù)

console.log(msg);

setInterval("GetData()",30000);//間隔30S

}

注：這里用了**setInterval()**的方法來實現(xiàn)定時發(fā)送異步請求，以實現(xiàn)實時監(jiān)控。

四、效果展示

經(jīng)過不懈的嘗試和修改，最后達到了一個還算比較滿意的