基于ECharts的英雄联盟（LPL）数据可视化分析

厦门华厦学院信息与智能机电学院 郑涛 陈婷婷 林国凤 何晶

本文基于英雄联盟（LPL）官网给出的数据将把2022赛季最热门战队比赛数据和选手的个人数据进行可视化分析。通过网络爬虫Requests方法，爬取2022年赛季热门战队数据，随后将爬取的战队数据进行数据预处理与模块化分析，最后，采用Flask搭建框架，Ajax进行前后端交互和ECharts实现数据可视化，其中包括呈现个人战绩堆叠图、英雄数据轮播图等，还设置了英雄比赛数据查询模块，用户可通过输入英雄名字查询该英雄的出场数、支持率和胜率，帮助观众对比赛情况进行了解。

1 研究背景及意义

电子竞技是时代进步，科技发展的产物，它丰富了人们的娱乐生活，同时也为企业提供了发展的机会。当前，体育产业有力促进了我国的经济增长。而电子竞技作为体育产业中增长最快的一部分，理应得到更多关注与引导，形成更加可持续发展的产业。

英雄联盟是在全球范围内极具影响力和知名度的电子竞技项目，近年来，以英雄联盟职业联赛为代表的电竞产业在我国的发展如火如荼，自2013年创立到现在，LPL（英雄联盟职业联赛中国赛区）的赛事规模不断扩大，观赛不断增加，粉丝影响力不断提升。

本文基于英雄联盟LPL官网给出的数据，通过Flask搭建框架，Ajax进行前后端交互和ECharts实现LPL赛事数据的可视化分析，针对目前为止的比赛数据，对其进行分析，提高我们对比赛情况的认知，使观众能够更便捷的了解比赛数据和选手个人情况，也能让数据呈现出更加直观简洁高效的成果。

2 数据采集模块

数据采集模块采用网络爬虫技术访问英雄联盟（LPL）官网界面。通过相关的页面解析技术，从访问页面中提取需要的数据，然后存储到数据库中。由于比赛数据更新周期短，数据时效性比较有限，故本项目以前后端交互的形式实现数据实时更新。

首先，登录英雄联盟（LPL）官网，右键点击检查，之后选择Network，在【name】下方找到【LOL_MATCH2_ MATCH_TEAMRANK_LIST_134_7_8.js】，接着点击【Preview】。

由于在网站上爬取下来的输出内容是字符串对象，需要用json.loads()，将其转化为字典，再使用字典和列表的方法就可以将想要的数据提取出来，并且存放到另外一个字典里面，最后获取的数据包括：个人MVP前十二，个人排行榜前五，个人总击杀数据、英雄选择率前六十等，随后将获取到的数据，导入数据库。

3 系统设计

3.1 系统总体框架

本项目运用Request网络爬虫框架，从英雄联盟（LPL）官网爬取各战队比赛数据，利用Flask框架及Python、ECharts、HTML5、CSSJavaScript等多种语言，构建针对赛事观众设计的一套智能分析系统，并进行可视化展示，其系统结构框架图如图1所示。

图1 系统框架图Fig.1 System framework diagram

由图1可以看出，该系统由三个模块组成：数据采集模块，数据传输模块，数据可视化模块。其中数据可视化包括个人战绩堆叠图、英雄数据轮播图、战队胜负数据、个人比赛数据、战队排行榜、个人排行榜及MVP种子选手，还有英雄比赛数据查询模块。

3.2 软件体系架构设计

在软件体系架构设计中，采用分层模块化设计。在用户层上，安装常见的浏览器软件，用户本机可连接英特网前提下，用户即可操作功能模块；在应用层上，设计英雄比赛数据查询模块、英雄数据轮播图等子模块；在交互层上，使用Flask连接前端页面，通过Ajax向服务器发送请求，接收服务器返回的JSON数据然后使用JavaScript修改网页，进而实现页面局部数据更新。

3.3 系统设计技术路线

在设计本系统时，前端模块可使用VScode来进行代码的编辑、开发和优化，使用Django基础架构，利用原生前端开发工具和Bootstrap前端框架来进行前端页面的搭建，并使用ECharts可视化开发工具构建可视化图表，构建可视化系统，针对部分系统的数据，可使用数据库作为存储和交换的中间载体，系统设计技术路线直观表述如图2所示。

图2 系统设计路线图Fig.2 System design roadmap

3.4 前端布局设计

在前端页面的设计方面，根据英雄联盟这一主题，背景设计上选择英雄联盟logo图作为背景，增强个性化设计。在整个页面布局上，首先将整个页面划分为10个盒子，使用HTML和CSS把最基础的框架搭建出来，各页面绘制的图表模块如图3所示。

图3 前端页面设计图Fig.3 Front-end page design diagram

4 系统设计与实现

数据可视化模块将数据分析模块的数据进行一个精美而又直接的展示，我们采用大屏的方式进行展示，如图4所示。在数据可视化模块中所展示的包括个人战绩堆叠图、英雄数据轮播图、战队胜负数据、个人击杀数据、战队排行榜、个人排行榜及MVP种子选手，还有英雄比赛数据查询模块。

图4 英雄联盟2022年春季赛数据可视化Fig.4 Data visualization of LEAGUE of Legends 2022 Spring Games

在个人数据堆叠模块主要通过统计KDA前12名职业选手的比赛数据做出的分析图，包括出场次数、总击杀、总助攻、总死亡。这个赛季出场次数是Knight选手最多，但各个选手出场次数之间相差不大，对于参团数影响不大，而选手的参团率即击杀和助攻的和相差较大，其中Knight、Photic、Rookie的参团超过600人头，参团率非常高，对于团队贡献值相对较大。

英雄比赛数据查询模块主要通过利用Ajax技术实现，用户可以通过输入英雄ID进行查询英雄的比赛数据，包括场数、支持率、胜率。这些信息都是存储在数据库中，通过查询可以从数据库中提取信息并进行展示。

战队和选手数据模块通过统计战队和选手的比赛数据进行分析展示，从数据分析的结果可知选手V5的胜率最高，选手TES的总击杀最多，选手WBG的插眼最多。其中，选手V5的胜率最高说明胜利的场数最多；选手WBG插眼最多可知该队伍对于比赛中的视野掌控最高，而在比赛中，视野对比赛是很重要的。

个人击杀模块通过统计一些比赛选手的个人数据进行分析得出结果，可以直观的看出每个选手在比赛中的表现，从数据可知该赛季总击杀数、总助攻和总死亡率最高分别为Photic选手、Weiwei选手和Theshy选手，通过该模块掌握部分选手的个人数据和个人能力。

战队排行榜（如图5所示)中，粉丝们可以直观看到自己所支持的战队在常规赛中各项表现以及队伍中的排行榜。从图中可知VS战队的胜率最高为78%，出场次数19次，其中胜利次数15次，其次是RNG战队、TES战队。位于排行榜的第5位为LNG战队，其胜率为64%，出场17次，其中胜利次数11次，失败次数6次。

图5 战队排行榜图Fig.5 Team leaderboards

5 总结

本文详细说明了基于ECharts的英雄联盟LPL-2022年春季赛数据的可视化分析，从数据采集到最后的可视化展示，进行了正式的前后端交互。在前端方面也用上了ECharts；数据采集采用了Request网络爬虫框架，后端方面是Flash、Ajax结合使用。从2022年春季赛赛队的排名可知，其中冠军队GNG在整个春季赛的胜利次数14次，其次是亚军队TES和季军队V5，在整个春季赛也都有不俗的表现，都在整个春季赛获得15次的胜利。从数据分析结果可知，该几个赛队的实力都是相当的雄厚，并且不相上下。未来各战队都需要分析和总结成败原因将快速帮助自身战斗能力的提升以及团队的成长。