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

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

news 2025/8/24 1:11:33

亿牛云代理

导语

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

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/8/19 15:38:50

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2025/8/18 2:28:17

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/8/23 15:42:25

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/8/22 5:43:23

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/7/9 8:36:10

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/7/8 17:49:38

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2025/8/22 5:37:40

tauri项目，如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

编程新知 2025/8/22 12:14:51