程序小院

工作闲暇之余微博上了解一下正在发生的事情，查看微博热搜发现界面需要一直手动刷新，于是想到了实时统计图展示，用现有的技术进行数据爬取，实时监控

1、先获取HTML内容
function getUrlContent($url){//通过url获取html内容
    $ch = curl_init();
    curl_setopt($ch,CURLOPT_URL,$url);
    curl_setopt($ch,CURLOPT_USERAGENT,"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1 )");
    curl_setopt($ch,CURLOPT_HEADER,1);
    curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
    $output = curl_exec($ch);
    curl_close($ch);
    return $output;
 }
2、获取数据，通过正则方式，table标签转换数组
function getTable($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 标记
    $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 ($table as $key=>$tr) {
      // 自己可添加对应的替换
      $tr = str_replace("\n\n","",$tr);
        $td = explode('{td}', $tr);
        array_pop($td);
        $td_array[] = $td;
    }
    return $td_array;
}
3、数据整理返回前端
$html = getUrlContent("https://s.weibo.com/top/summary?Refer=top_hot&topnav=1&wvr=6");
$table = getTable($html);
$table = array_slice($table,2); # 把前面多余部分截掉
echo json_encode($table);
4、数据展示柱状图echarts.js
function CreateBar(keywords,value){
  //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));
    myChart.on('click',function(param){
    window.open('#');
  });
  //指定图标的配置和数据
    var option = {
        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);
}
5、ajax请求数据
function GetData(){
  $.ajax({
    type: "post",        //数据提交方式（post/get）
    url: "weibo.php",    //提交到的url
    dataType: "json",    //返回的数据类型格式
    success: function(msg){
      //返回成功的回调函数
      if(msg!=''){
        var data = eval(msg); //将返回的json数据进行解析，并赋给data
        var keywords = [];
        var value = [];
        for(var i=0; i < 20; i++){ // 取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){
        //返回失败的回调函数
        console.log(msg);
        setInterval("GetData()",30000); // 间隔30S
      }
  });
}