当前位置：首页 > news >正文

使用Puppeteer进行游戏数据可视化

news 2025/7/8 6:17:05

亿牛云代理

导语

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-server=http://16YUN:16IP@www.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>
<head><meta charset="UTF-8"><title>英雄联盟英雄数据可视化</title><!-- 引入ECharts的CDN链接 --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body><!-- 创建一个div元素，用来放置散点图 --><div id="chart" style="width: 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进行游戏数据的爬取和可视化，得到一个类似于下图的结果。我们可以从中发现一些有趣的现象，比如热度和胜率之间的关系，以及哪些英雄是最受欢迎或者最强势的。当然，这只是一个简单的示例，我们还可以根据自己的需求和兴趣，对不同的网站和数据进行爬取和分析，发现更多的有价值的信息。

使用Puppeteer进行游戏数据可视化

导语

概述

正文

案例

结语

相关文章：

使用Puppeteer进行游戏数据可视化

【Flask】from flask_sqlalchemy import SQLAlchemy报错

索引简单概述（SQL）

union all 和 union 的区别,mysql union全连接查询

UDP和TCP的区别

阿里云 MSE 助力开迈斯实现业务高增长背后带来的服务挑战

消灭怪物的最大数量【力扣1921】

数据结构之算法

MyBatis与MyBatis-Plus的分页以及转换

TCP/IP网络编程(二) 套接字协议及其数据传输特性

在k8s中使用secret存储敏感数据与四种用法

国产10米分辨率的卫星介绍、下载和处理教程

解决SpringBoot项目war部署到tomcat下无法Nacos中注册服务问题

C++中的##、#符号含义

探究Vue3中的Composition API:优化组件逻辑的新利器

Google Services Framework 谷歌服务框架的安装以及遇到的常见问题

学习高级数据结构：探索平衡树与图的高级算法

centos7离线安装neo4j

【黑马头条之项目部署_持续集成Jenkins】

前端自动化部署,Devops,CI/CD

（十）学生端搭建

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享

UDP(Echoserver)

基于数字孪生的水厂可视化平台建设：架构与实践

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

vue3 定时器-定义全局方法 vue+ts

06 Deep learning神经网络编程基础激活函数 --吴恩达

Spring AI与Spring Modulith核心技术解析

回溯算法学习

短视频矩阵系统文案创作功能开发实践，定制化开发