这是一个十分简陋的初学项目，现已重写👇
房价数据爬取接口+数据可视化 - 简书 (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
