使用Node-RED爬虫并基于ECharts可视化某楼盘的销售情况

关于Node-RED的任何项目、技术咨询都可联系 vx: _0xffffffffffff, qq: 924219829

前言

博主一直在关注某一楼盘的成交情况，看看销售是不是在胡说八道，所以就用Node-RED写了个小程序去监控某一楼盘的成交情况，并且可视化显示出来。（后来发现好像有商业的APP，不过无所谓了，写个小程序也没花多久。）

项目以Node-RED为框架，通过HTTP请求官方的网签数据，通过cheerio解析HTML数据，保存到CSV文件中，最后使用ECharts显示出来。（至于为什么不用官方的Dashboard，只能说还是ECharts效果更丰富，API更有好）。

这个项目经过改造可以用来监控任何网页的数据，例如，家中用电量、用水量等等，全看自己折腾了。

流程

主要流程

1. 注入节点触发整个流程（间隔1小时，请求太频繁了也不好，容易被封，其次也没必要）
2. 向对应的连接发起GET请求，获取HTML数据
3. 使用CherrIO解析HTML数据，此处主要通过Selector进行定位
4. 将解析出的数据保存到本地的CSV文件中，以便查看历史数据
5. 保存完成后使用ECharts对数据进行渲染，绘制出折线图

当打开Dashboard时，由于没有执行对应的JavaScript，会导致图表没有渲染。
该问题可以通过UI Control监听Change事件，当打开新的页面后，会产生Change事件，此时渲染图表就可以正确显示。

下面对几个稍微有点困难的节点具体展开

解析HTML文件

此处假设访问 https://124.128.246.22:8090/onsaling/show.shtml?prjno=ccc3ff06-b23f-48f2-a761-d57c0bcf77de
通过F12打开开发者工具，通过右侧的元素栏，查看页面的HTML的源码。
可以通过“检查”（选择页面中的响应元素即可进行检查）按钮，去选择按兴趣的内容

要爬取的内容主要是总套数以及可手售套数。对应的HTML源码如上图，此时右击对应的HTML标签，选择

此时就可以获得该元素在页面中的位置：body > div.wrap > div.warp-content > div.form-list
在Node-REd中，通过HTTP Get获取到HTML页面后，就可以通过CheerIO进行数据的解析。
具体的代码如下

// 加载HTML页面的内容
const $ = cheerio.load(msg.payload);
// 根据Selector找到对应的内容，并且每条数据都是一个类为list-main的div标签，把其收集起来
const listMains = $('body > div.wrap > div.warp-content > div.form-list').find('.list-main');

// 解析每一个楼盘信息元素
const result = listMains.map((index, listMain) => {
    // 获取所有的信息
    const infoElements = $(listMain).find('li > span');
    // 获取操作链接
    let time = Date.now();
            // 时间, 楼盘名称, 总套数, 总面积, 可售套数, 可售面积, 已售套数, 已售面积
    return `${time},${$(infoElements[0]).text()},${$(infoElements[4]).text()},${$(infoElements[5]).text()},${$(infoElements[6]).text()},${$(infoElements[7]).text()},${$(infoElements[8]).text()},${$(infoElements[9]).text()}\n`
}).get();

msg.payload = result.join('');

return msg;

这里引入了第三方的依赖CheerIO，要在Function节点的设置栏进行设置，Node-RED会自动安装依赖，之后便可以在运行函数中使用。

ECharts完成图表可视化

由于Node-RED没有原生的ECharts节点，但前端就那么些东西，Template节点先引入第三方的JavsScript库，直接开用就可以。
唯独需要解决的就是数据如何动态的传入。
Template节点也给了示例，对照着抄就好。以下为ECharts绘图的实现

<div id="chart" style="width: 600px;height:400px;"></div>
<script>
(function() {
    // 绘制图表，见ECharts的官方文档
    function createChart(data) {
        data = data.filter(item => item['楼盘名称'] == '2#楼');
        chart = echarts.init(document.getElementById('chart'));

        let option = {
	        title: {
		        text: '2#楼 已售/可售套数'
	        },
	        tooltip: {
		        trigger: 'axis'
	        },
	        legend: {
	        	data: ['已售套数', '可售套数']
	        },
	        xAxis: {
	        	data: data.map(item => new Date(item['时间']).toLocaleString())
	        },
	        yAxis: {},
	        series: [{
		        name: '已售套数',
		        type: 'line',
		        data: data.map(item => item['已售套数'])
	        }, {
		        name: '可售套数',
		        type: 'line',
		        data: data.map(item => item['可售套数'])
	        }]
        };
        chart.setOption(option)
    }
    
    (function(scope) {
        scope.$watch('msg', function(msg) {
            if (msg) {
                createChart(msg.payload);
            }
        });
    })(scope); // 核心是该函数，监听msg事件，当有消息传入时，会回调该函数。
})();
</script>

后记

一个简单的小应用，随便爬点东西，主要是为了演示如何爬虫并进行数据可视化，学习用途。

官方应该不至于这么敏感请我喝茶。若有不妥，我立马删除。