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

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

news 文章来源：https://blog.csdn.net/ip16yun/article/details/132669765 2025/5/18 11:06:20

亿牛云代理

导语

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

22 元类技术(面向切片编程)|ORM的实现|抽象类与接口类

文章目录 前情知识补充hasattr 函数setattr函数getattr函数join 函数 元类技术使用type创建类什么是元类&#xff08;概念总结&#xff09;\_\_metaclass\_\_属性使用metaclass 的函数方式进行创建类使用metaclass 的类方式进行创建类 自定义元类 元类实现ORM接口类与抽象类抽象…...

编程日记 2023/9/5 2:48:17

fuchsia系统介绍

fuchsia系统 Fuchsia&#xff0c;是由Google公司开发的继Android和Chrome OS之后的第三个系统&#xff0c;已在Github中公开的部分源码可以得知。Google对于Fuchsia的说明是“Pink&#xff08;粉红&#xff09;Purple&#xff08;紫色&#xff09;Fuchsia&#xff08;灯笼海棠…...

编程日记 2023/9/5 2:47:16

解决Jenkins执行Python脚本不能实时输出打印信息的问题

问题&#xff1a; 在使用Jenkins的shell command来执行python脚本时&#xff0c;总是会等脚本执行完毕&#xff0c;最后一次性才把脚本中的print语句给打印出来&#xff1b; 解决方法&#xff1a; 在print语句后加上sys.stdout.flush(), 就可以达到实时输出的目的了。...

编程日记 2023/9/5 2:46:12

2021年03月 C/C++（五级）真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程（1~8级）全部真题・点这里 第1题：最小新整数 给定一个十进制正整数n(0 < n < 1000000000)，每个数位上数字均不为0。n的位数为m。 现在从m位中删除k位(0<k < m)，求生成的新整数最小为多少？ 例如: n = 9128456, k = 2, 则生成的新整数最小为12456 时间…...

编程日记 2023/9/5 2:45:11

【微服务】服务发现和管理技术框架选型调研

选型背景 方案对比 结论 结合实际业务和开发需要&#xff0c;着重考虑性能可靠性、功能和社区支持程度三方面&#xff0c;认为Nacos更适合作为服务发现和管理的技术框架。具体理由如下&#xff1a; 性能更好&#xff0c;可靠性更高 经过阿里、APISIX、SpringCloudAlibaba,阿…...

编程日记 2023/9/5 2:44:09

【核磁共振成像】观共享重建

目录 一、K空间关键孔技术-数据采集二、BRISK技术三、TRICKS技术四、实时成像和滑动窗重建五、心电触发电影(CINE)采集六、分段心脏采集和观共享 一、K空间关键孔技术-数据采集 对于笛卡尔K空间&#xff0c;一个相位编码行有时称为一个K空间观。一般情况下&#xff0c;每帧图像…...

编程日记 2023/9/5 2:43:08

〔020〕Stable Diffusion 之 骨骼姿势 篇

✨ 目录 🎈 姿势检测 / OpenPose🎈 姿势检测 OpenPose 参数介绍🎈 姿势检测 OpenPose 基本使用🎈 深度库 / Depth Lib🎈 深度库 Depth Lib 参数介绍🎈 3D姿势检测 / 3D Openpose Editor🎈 3D姿势检测 3D Openpose Editor 参数介绍🎈 3D姿势检测 3D Openpose Ed…...

编程日记 2023/9/5 2:42:05

使用Python进行Base64编码和解码

假设您有一个想要通过网络传输的二进制图像文件。您很惊讶对方没有正确接收该文件 - 该文件只是包含奇怪的字符&#xff01; 嗯&#xff0c;您似乎试图以原始位和字节格式发送文件&#xff0c;而所使用的媒体是为流文本而设计的。 避免此类问题的解决方法是什么&#xff1f;答…...

编程日记 2023/9/5 2:41:04

MongoDB的数据恢复与备份

MongoDB的数据恢复与备份 在MongoDB中&#xff0c;备份和恢复数据是一项关键任务&#xff0c;可以确保数据的安全性并防止意外数据丢失。本文将介绍MongoDB的数据恢复与备份原理并提供相关的编程代码和配置。 1. 数据备份原理 MongoDB提供了多种备份数据…...

编程日记 2023/9/5 2:40:03

Java之SpringCloud Alibaba【五】【微服务 Sentinel整合openfeign进行降级】

一、Sentinel整合openfeign 1、复制一下order-openfeign项目&#xff08;创建order-openfeign-sentinel&#xff09; 然后在stock-nacos当中编写对应的接口 RequestMapping("/reduct2")public String reduct2(){int a 1/0;System.out.println("扣减库存"…...

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