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

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

news 2026/5/21 2:16:43

亿牛云代理

导语

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循环依赖与三级缓存：从原理到实战，彻底搞懂不踩坑

“Bean正在创建中&#xff0c;存在无法解决的循环引用”——这就是Spring循环依赖的典型表现。很多人只知道“用Lazy注解能解决”“改Set注入就行”&#xff0c;但背后的三级缓存机制却一知半解。一、什么是Spring循环依赖&#xff1f; 循环依赖&#xff0c;本质就是两个或多个…...

编程新知 2026/5/21 1:08:48

告别轮询！用STM32CubeMX和DMA实现ADC多通道‘无感’采集与串口打印（附完整工程）

告别轮询&#xff01;STM32CubeMX与DMA实现ADC多通道无感采集实战指南 在嵌入式开发中&#xff0c;数据采集系统的效率往往决定了整个应用的性能上限。传统轮询方式不仅消耗大量CPU资源&#xff0c;还会引入不可预测的延迟。想象一下&#xff0c;当你需要同时监测多个环境传感器…...

编程新知 2026/5/21 0:48:29

DeepSeek-R1 MoE架构逆向工程报告（基于HuggingFace源码+NCCL trace分析）：专家粒度、FFN维度与token路由热力图首次披露

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;DeepSeek-R1 MoE架构逆向工程总览 DeepSeek-R1 是一款基于稀疏混合专家&#xff08;Mixture of Experts, MoE&#xff09;架构的大语言模型&#xff0c;其推理与训练行为在公开文档中未完全披露。本章聚焦于通…...

编程新知 2026/5/21 0:35:48

W5500 TCP客户端开发避坑指南：从寄存器配置到稳定通信的5个关键步骤

W5500 TCP客户端开发避坑指南&#xff1a;从寄存器配置到稳定通信的5个关键步骤 在嵌入式网络通信领域&#xff0c;W5500作为一款硬件集成TCP/IP协议栈的以太网控制器&#xff0c;因其易用性和稳定性备受开发者青睐。然而&#xff0c;当项目从实验室demo转向实际部署时&#xf…...

编程新知 2026/5/20 23:53:41

FPGA资源吃紧？看Artix7-35T如何“精打细算”实现MIPI视频解码与HDMI输出

Artix7-35T极限优化&#xff1a;在资源受限FPGA上实现MIPI-HDMI全流程处理 当医疗内窥镜或工业检测设备需要嵌入式图像处理时&#xff0c;工程师们常常面临一个残酷的现实&#xff1a;既要实现复杂的MIPI视频处理流水线&#xff0c;又不得不使用Artix7-35T这类入门级FPGA。这颗…...

编程新知 2026/5/20 23:51:39

2026年数字人拍摄新方式：一条视频能省多少时间

2026年数字人拍摄新方式&#xff1a;一条视频能省多少时间 【导语】 做视频最耗时间的是什么&#xff1f;不是拍摄那几分钟&#xff0c;而是前期的准备工作。但现在有一种新方式&#xff0c;可以让你完全不用拍摄真人&#xff0c;一条视频从准备到成片&#xff0c;最快只要7分钟…...

编程新知 2026/5/20 23:25:28

别再傻傻分不清了！用大白话+真实案例讲透OAuth 2.0和OIDC到底差在哪

别再傻傻分不清了&#xff01;用大白话真实案例讲透OAuth 2.0和OIDC到底差在哪 想象一下这样的场景&#xff1a;你正在开发一个美食分享App&#xff0c;想让用户能直接用微信登录。接入微信开放平台时&#xff0c;技术文档里突然冒出OAuth 2.0和OIDC两个术语&#xff0c;产品经…...

编程新知 2026/5/20 23:01:20

机器学习核心术语全解析：从评估指标到TensorFlow实战避坑指南

1. 项目概述与核心价值刚接触机器学习&#xff0c;尤其是像TensorFlow这样庞大框架的朋友&#xff0c;最头疼的莫过于满屏的英文术语。什么“Backpropagation”、“Softmax”、“Embedding”&#xff0c;每个词都认识&#xff0c;但组合在一起就让人云里雾里。更别提那些缩写&a…...

编程新知 2026/5/20 22:40:42

# 040、实战项目五：多 Agent 协作系统 —— 项目经理、开发者、测试者角色模拟

从一次凌晨三点的事故说起 去年做智能客服系统重构&#xff0c;我犯了个低级错误——让单个Agent既写代码又自测。结果上线当天&#xff0c;它把“用户退款”的SQL写成了DELETE FROM orders WHERE status‘refund’&#xff0c;还自信满满地标注“测试通过”。凌晨三点被运维电…...

编程新知 2026/5/20 22:19:04

Python点云处理入门：从零开始用pypcd4库读取.pcd文件并可视化（附完整代码）

Python点云处理入门&#xff1a;从零开始用pypcd4库读取.pcd文件并可视化 点云数据正逐渐成为三维感知领域的通用语言&#xff0c;从自动驾驶的环境建模到工业质检的精密测量&#xff0c;这些由数百万个空间点构成的数据集正在重塑我们与物理世界交互的方式。对于刚接触这一领域…...

编程新知 2026/5/20 20:52:29