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

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

news 2025/10/23 19:12:30

亿牛云代理

导语

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是一个基于Node.js的库&#xff0c;可以用来控制Chrome或Chromium浏览器&#xff0c;实现网页操作、截图、测试、爬虫等功能。本文将介绍如何使用Puppeteer进行游戏数据的爬取和可视化&#xff0c;以《英雄联盟》为例。 概述 《英雄联盟》是一款由Riot Games开…...

编程日记 2023/9/5 3:08:49

【Flask】from flask_sqlalchemy import SQLAlchemy报错

【可能出现的情况】 1、未安装 Flask-SQLAlchemy&#xff1a; 在使用 flask_sqlalchemy 之前&#xff0c;你需要确保已经通过 pip 安装了 Flask-SQLAlchemy。可以通过以下命令安装它&#xff1a; pip install Flask-SQLAlchemy 2、包名大小写问题&#xff1a; Python 是区分大…...

编程日记 2023/9/5 3:07:48

索引简单概述（SQL）

一、什么是索引&#xff1f; 索引是一种特殊的文件&#xff08;InnoDB数据表上的索引是表空间的一个组成部分&#xff09;&#xff0c;他们包含着对数据表里所有记录的引用指针。 索引是一种数据结构。数据库索引&#xff0c;是数据库管理系统中一个排序的数据结构&#xff0…...

编程日记 2023/9/5 3:06:45

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

602. 好友申请 II &#xff1a;谁有最多的好友(力扣mysql题,难度:中等) RequestAccepted 表&#xff1a; ------------------------- | Column Name | Type | ------------------------- | requester_id | int | | accepter_id | int | | accept_date …...

编程日记 2023/9/5 3:05:44

UDP和TCP的区别

UDP (User Datagram Protocol) 和 TCP (Transmission Control Protocol) 是两种常见的传输层协议。它们在设计和用途上有很大的区别&#xff0c;以下是它们的主要差异&#xff1a; 连接性: TCP: 是一个连接导向的协议。它首先需要建立连接&#xff0c;数据传输完毕后再终止连接…...

编程日记 2023/9/5 3:04:43

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

开迈斯新能源科技有限公司于 2019 年 5 月 16 日成立&#xff0c;目前合资股东分别为大众汽车&#xff08;中国&#xff09;投资有限公司、中国第一汽车股份有限公司、一汽-大众汽车有限公司[增资扩股将在取得适当监督&#xff08;包括反垄断&#xff09;审批后完成]、万帮数字…...

编程日记 2023/9/5 3:03:42

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

一、题目分析 需要满足的条件&#xff1a; 只能在每分钟的开始使用武器武器能杀死距离城市最近的怪兽怪兽到达城市就会输掉游戏 游戏最优策略&#xff1a;我们可以在每分钟的开始都使用一次武器&#xff0c;用来杀死距离城市最近的怪兽。这样可以在力所能及的范围内&#xf…...

编程日记 2023/9/5 3:02:39

数据结构之算法

算法的基本概念 计算机解题的过程实际上是在实施某种算法&#xff0c;这种算法称为计算机算法 算法的基本要素 一个算法是由两种基本要素组成&#xff1a;一是对数据对象的运算和操作&#xff1b;二是算法的控制结构 算法中对数据的运算和操作 在一般计算机系统中&#xf…...

编程日记 2023/9/5 3:01:38

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

一、介绍 MyBatis和MyBatis-Plus都是Java持久化框架&#xff0c;用于简化数据库访问和操作。它们提供了面向对象的方式来管理关系型数据库中的数据。 MyBatis是一个轻量级的持久化框架&#xff0c;通过XML或注解配置&#xff0c;将SQL语句与Java对象进行映射&#xff0c;使开…...

编程日记 2023/9/5 3:00:37

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

文章目录 套接字协议及其数据传输特性关于协议创建套接字协议族套接字类型1&#xff1a;面向连接的套接字&#xff08;SOCK_STREAM&#xff09;套接字类型2&#xff1a;面向消息的套接字&#xff08;SOCK_DGRAM&#xff09;协议的最终选择面向连接的套接字&#xff1a;TCP套接字…...

编程日记 2023/9/5 2:59:36

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

当需要存储敏感数据时可以使用&#xff0c;secret会以密文的方式存储数据。 创建secret的四种方法 &#xff08;1&#xff09;通过--from-literal #每个--from-literal对应一个信息条目 kubectl create secret generic mysecret --from-literalusernameadmin --from-litera…...

编程日记 2023/9/5 2:58:33

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

10米分辨率的资源卫星介绍、下载和处理教程 简介 说起免费的10米分辨率卫星影像，大家首先想到的是sentinel卫星。但其实还有我国的中巴地球资源卫星04星(CBERS04)。 中巴地球资源卫星(China Brazil Earth Resources Satellite, CBERS)是中国和巴西共同投资、联合研制的地球…...

编程日记 2023/9/5 2:57:32

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

问题说明 怎么解决Spring Boot项目部署到tomcat下无法Nacos中注册服务问题"&#xff0c;希望能够解决您遇到有关问题。 在使用Nacos作为注册中心的Spring Boot项目&#xff0c;以war包形式部署到服务器上&#xff0c;启动项目发现该服务无法在Nacos中注册。 分析 …...

编程日记 2023/9/5 2:56:30

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

在C中&#xff0c;## 和 # 是两个不同的预处理符号。这些符号都是在C的预处理阶段使用的&#xff0c;用于在代码编译之前对文本进行操作。 #&#xff08;字符串化操作符&#xff09;&#xff1a; 用于将宏参数转换为字符串常量。 #define STRINGIZE(x) #x const char* str S…...

编程日记 2023/9/5 2:55:28

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

一、toRef函数 在 Vue 3.0 中&#xff0c;引入了一种新的响应式 API,即 toRef。toRef 函数可以将一个普通值转换为响应式引用类型&#xff0c;这样就可以在模板中直接使用这个响应式引用类型的属性&#xff0c;并且当该属性发生变化时&#xff0c;视图会自动更新。 <templat…...

编程日记 2023/9/5 2:54:26

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

安装谷歌三件套&#xff1a; 1、Google 服务框架&#xff08;Google Services Framework&#xff09;下载地址&#xff1a; https://www.apkmirror.com/apk/google-inc/google-services-framework/ 注意一定要选择与自己手机对应的安卓系统版本的服务框架。 2、Google Play Se…...

编程日记 2023/9/5 2:53:26

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

文章目录 1. 平衡树&#xff1a;维护数据的平衡与高效性1.1 AVL 树&#xff1a;严格的平衡1.2 红黑树&#xff1a;近似平衡 2. 图的高级算法&#xff1a;建模复杂关系与优化2.1 最小生成树&#xff1a;寻找最优连接方式2.2 拓扑排序&#xff1a;解决依赖关系 拓展思考 &#x1…...

编程日记 2023/9/5 2:52:24

centos7离线安装neo4j

一、准备需要的rpm包 本地环境执行如下命令&#xff1a; docker pull couchbase/centos7-systemd docker run -it couchbase/centos7-systemd bash # 可能需要换源 yum update -y vi /etc/yum.conf # 修改其中的keepcache1 rpm --import https://debian.neo4j.com/neotechnol…...

编程日记 2023/9/5 2:51:23

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

本笔记内容为黑马头条项目的项目部署_持续集成部分 目录 一、内容介绍 1、什么是持续集成 2、持续集成的好处 3、今日内容 二、软件开发模式 1、软件开发生命周期 2、软件开发瀑布模型 3、软件的敏捷开发 三、Jenkins安装配置 1、Jenkins介绍 2、Jenkins环境搭建 …...

编程日记 2023/9/5 2:50:21

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

DevOps 提到 Jenkins&#xff0c;想到的第一个概念就是 CI/CD 在这之前应该再了解一个概念。 DevOps Development 和 Operations 的组合&#xff0c;是一种方法论&#xff0c;并不特指某种技术或者工具。DevOps 是一种重视 Dev 开发人员和 Ops 运维人员之间沟通、协作的流程。…...

编程日记 2023/9/5 2:49:20

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/10/16 10:02:33

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/10/23 12:39:09

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/9/28 3:31:02

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/9/20 22:30:25

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/10/23 16:20:47

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/7/27 8:17:48

抽象类和接口（全）

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

编程新知 2025/10/14 13:53:13