受雇去建设网站类网站,最好建设网站,建阳网站建设wzjseo,怎么挑选网站建设公司导语
Puppeteer是一个基于Node.js的库#xff0c;可以用来控制Chrome或Chromium浏览器#xff0c;实现网页操作、截图、测试、爬虫等功能。本文将介绍如何使用Puppeteer进行游戏数据的爬取和可视化#xff0c;以《英雄联盟》为例。
概述
《英雄联盟》是一款由Riot Games开…
导语
Puppeteer是一个基于Node.js的库可以用来控制Chrome或Chromium浏览器实现网页操作、截图、测试、爬虫等功能。本文将介绍如何使用Puppeteer进行游戏数据的爬取和可视化以《英雄联盟》为例。
概述
《英雄联盟》是一款由Riot Games开发和运营的多人在线竞技游戏拥有数亿玩家和观众。游戏中有超过150种不同的英雄每个英雄都有自己的特点和技能。为了了解每个英雄的热度和胜率我们可以使用Puppeteer爬取官方网站上的数据并用ECharts进行可视化。
正文
要使用Puppeteer进行爬虫我们需要先安装Node.js和Puppeteer库。然后我们可以编写一个JavaScript文件比如叫做spider.js用来实现以下步骤
引入Puppeteer和ECharts模块创建一个浏览器实例并设置代理IP和认证信息以提高爬虫效果打开一个新的页面并设置视口大小访问《英雄联盟》官方网站上的英雄列表页面等待页面加载完成并获取所有英雄的名称、热度和胜率将数据保存到一个数组中并按照热度排序创建一个HTML文件用来显示数据可视化的结果使用ECharts生成一个散点图横轴为热度纵轴为胜率每个点代表一个英雄并显示其名称将散点图插入到HTML文件中并保存关闭浏览器实例
案例
下面是spider.js的代码示例以及相应的中文注释
// 引入Puppeteer和ECharts模块
const puppeteer require(puppeteer);
const echarts require(echarts);// 创建一个浏览器实例并设置代理IP
// 具体参考亿牛云爬虫代理的域名、端口、用户名、密码
const browser await puppeteer.launch({args: [--proxy-serverhttp://16YUN:16IPwww.16yun.cn:8800]
});// 打开一个新的页面并设置视口大小
const page await browser.newPage();
await page.setViewport({width: 1280, height: 800});// 访问《英雄联盟》官方网站上的英雄列表页面
await page.goto(https://lol.qq.com/data/info-heros.shtml);// 等待页面加载完成并获取所有英雄的名称、热度和胜率
await page.waitForSelector(.data_list);
const data await page.evaluate(() {// 获取所有英雄的元素const heroes document.querySelectorAll(.data_list li);// 创建一个空数组用来存放数据const result [];// 遍历每个英雄元素获取其名称、热度和胜率并添加到数组中for (let hero of heroes) {const name hero.querySelector(.name).innerText;const hot parseFloat(hero.querySelector(.hot).innerText);const winRate parseFloat(hero.querySelector(.win-rate).innerText);result.push({name, hot, winRate});}// 返回数组return result;
});// 将数据保存到一个数组中并按照热度排序
const sortedData data.sort((a, b) b.hot - a.hot);// 创建一个HTML文件用来显示数据可视化的结果
const fs require(fs);
const html
html
headmeta charsetUTF-8title英雄联盟英雄数据可视化/title!-- 引入ECharts的CDN链接 --script srchttps://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js/script
/head
body!-- 创建一个div元素用来放置散点图 --div idchart stylewidth: 800px; height: 600px;/div!-- 创建一个script元素用来生成散点图 --script// 获取div元素const chart document.getElementById(chart);// 初始化ECharts实例const myChart echarts.init(chart);// 设置散点图的选项const option {title: {text: 英雄联盟英雄数据可视化},tooltip: {trigger: item,formatter: function (params) {// 显示英雄的名称、热度和胜率return params.data[2] br热度 params.data[0] %br胜率 params.data[1] %;}},xAxis: {name: 热度(%),min: 0,max: 100},yAxis: {name: 胜率(%),min: 40,max: 60},series: [{type: scatter,symbolSize: 10,data: [// 将数据转换为散点图所需的格式// 每个点的数据为[热度, 胜率, 名称]${sortedData.map(item [${item.hot}, ${item.winRate}, ${item.name}]).join(,\n)}]}]};// 设置散点图的选项myChart.setOption(option);/script
/body
/html
;// 将HTML文件保存到本地
fs.writeFileSync(result.html, html);// 关闭浏览器实例
await browser.close();结语
通过上面的代码我们可以使用Puppeteer进行游戏数据的爬取和可视化得到一个类似于下图的结果。我们可以从中发现一些有趣的现象比如热度和胜率之间的关系以及哪些英雄是最受欢迎或者最强势的。当然这只是一个简单的示例我们还可以根据自己的需求和兴趣对不同的网站和数据进行爬取和分析发现更多的有价值的信息。
