Nodejs爬取杭州楼盘房价的可视化分析

这是一个十分简陋的初学项目，现已重写👇
房价数据爬取接口+数据可视化 - 简书 (jianshu.com)

1.使用Nodejs 爬取楼盘信息

爬取页:

image.png

使用http爬取页面，cheerio分析爬取需要元素的数据，本项目爬取楼盘的名称、地址以及每平米的价格

const https = require("https");
const cheerio = require("cheerio");
const fs = require("fs");

const startPage = 1; // 开始页
const endPage = 100; // 结束页

let page = startPage; // 当前抓取页
let total = 0; // 数据总数

// 初始化url
const url = "https://hz.fang.lianjia.com/loupan/";
// 收集最终数据
let result = [];

// 抓取开始
getData(url);

/**
 * 抓取数据请求函数
 * @param {抓取地址} url
 */
function getData(url) {
  https.get(url, res => {
    let data = "";
    res.on("data", function(chunk) {
      data += chunk;
    });
    res.on("end", function() {
      let formatData = filter(data); // 筛选出需要的数据
      result = result.concat(formatData); // 拼接此次抓取到的数据
      page++;
      if (page <= endPage) {
        // 继续抓取下一页
        // 通过分析 url 规律，拼出下一页的 url
        let tempUrl = "https://hz.fang.lianjia.com/loupan/pg" + page;
        getData(tempUrl); // 递归继续抓取
      } else {
        fs.writeFile("url.js", "let data = " + JSON.stringify(result), err => {
          if (!err) console.log("success~");
        });
      }
    });
  });
}

/**
 * 处理抓取到的dom函数
 * @param {dom数据} data
 */
function filter(data) {
  let final = []; // 用来存储本页所有数据信息
  //将页面源代码转换为$对象
  let $ = cheerio.load(data);

  if (total == 0)
    // 如果没获取过总数，那么获取一次总数
    total = $(".resblock-list-container resblock-have-find span.value").text();
  // 找到列表外层
  let items = $(
    ".resblock-list-container .resblock-list-wrapper .resblock-list"
  );
  // 遍历处理每一条数据
  items.each((index, item) => {
    let temp = {}; // 用来存储此条数据的信息
    let price;
    let title = $(item)
      .find("a.name")
      .text()
      .replace(/\s/g, "");
    if (
      $(item)
        .find("span.desc")
        .text()
        .indexOf("元/平(均价)") >= 0
    ) {
      price = $(item)
        .find("span.number")
        .text();
    } else {
      return final;
    }
    // 过滤万/套的数据方便处理
    let info = $(item)
      .find("div.resblock-location")
      .text()
      .replace(/\s/g, "");
    let address = info;
    temp.name = title;
    temp.value = price;
    temp.address = address;
    console.log(temp);
    final.push(temp);
  });
  return final;
}

结果保存在该目录的url.js文件中

image.png

2.获取数据后需要进行对数据的处理以获取各个楼盘的坐标

本项目使用百度地图api对数据地址进行地址解析获得经纬度

var myGeo = new BMap.Geocoder();

myGeo.getPoint(
              item.address,
              function(point) {
             //point为api返回的地址经纬度
              },
              "杭州市"
            );

经处理后的部分数据:

image.png

3.使用echarts+bmp显示房价散点图

var myChart = echarts.init(document.getElementById("container"));
 myChart.setOption({
        backgroundColor: "transparent",
        title: {
          text: "杭州楼盘房价 - 百度地图",
          left: "right"
        },
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return params.data.name + ":" + params.data.value[2];
          }
        },
        bmap: {
          center: [120.15, 30.28],//显示地图的中心
          zoom: 12,//缩放倍数
          roam: true,
          mapStyle: {//百度地图样式可在该网站在线编辑 [http://lbsyun.baidu.com/index.php?title=open/custom](http://lbsyun.baidu.com/index.php?title=open/custom)

            styleJson: [
              {
                featureType: "road",
                elementType: "all",
                stylers: {
                  lightness: 20
                }
              },
              {
                featureType: "highway",
                elementType: "geometry",
                stylers: {
                  color: "#f49935"
                }
              },
              {
                featureType: "local",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#d1e5ff"
                }
              },
              {
                featureType: "city",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              }
            ]
          }
        },
        series: [
          {
            name: "hzlp",
            type: "scatter",
            coordinateSystem: "bmap",
            data: data,//设定数据源
            symbolSize: function(val) {
              return val[2] / 5000; //调整圆点的大小为value/5000
            },
            label: {
              formatter: "",
              position: "right"
            },
            itemStyle: {
              color: "#ff3333"
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      });

效果:

1.jpg

2.jpg

具体项目地址:
Nodejs爬取杭州链家楼盘数据:https://github.com/kakuuuu/Node_Crawler_lj
杭州链家楼盘数据可视化:https://github.com/kakuuuu/houseprice-visualization