基于ECharts的英雄聯(lián)盟（LPL）數(shù)據(jù)可視化分析

廈門華廈學(xué)院信息與智能機(jī)電學(xué)院 鄭濤 陳婷婷 林國(guó)鳳 何晶

本文基于英雄聯(lián)盟（LPL）官網(wǎng)給出的數(shù)據(jù)將把2022賽季最熱門戰(zhàn)隊(duì)比賽數(shù)據(jù)和選手的個(gè)人數(shù)據(jù)進(jìn)行可視化分析。通過網(wǎng)絡(luò)爬蟲Requests方法，爬取2022年賽季熱門戰(zhàn)隊(duì)數(shù)據(jù)，隨后將爬取的戰(zhàn)隊(duì)數(shù)據(jù)進(jìn)行數(shù)據(jù)預(yù)處理與模塊化分析，最后，采用Flask搭建框架，Ajax進(jìn)行前后端交互和ECharts實(shí)現(xiàn)數(shù)據(jù)可視化，其中包括呈現(xiàn)個(gè)人戰(zhàn)績(jī)堆疊圖、英雄數(shù)據(jù)輪播圖等，還設(shè)置了英雄比賽數(shù)據(jù)查詢模塊，用戶可通過輸入英雄名字查詢?cè)撚⑿鄣某鰣?chǎng)數(shù)、支持率和勝率，幫助觀眾對(duì)比賽情況進(jìn)行了解。

1 研究背景及意義

電子競(jìng)技是時(shí)代進(jìn)步，科技發(fā)展的產(chǎn)物，它豐富了人們的娛樂生活，同時(shí)也為企業(yè)提供了發(fā)展的機(jī)會(huì)。當(dāng)前，體育產(chǎn)業(yè)有力促進(jìn)了我國(guó)的經(jīng)濟(jì)增長(zhǎng)。而電子競(jìng)技作為體育產(chǎn)業(yè)中增長(zhǎng)最快的一部分，理應(yīng)得到更多關(guān)注與引導(dǎo)，形成更加可持續(xù)發(fā)展的產(chǎn)業(yè)。

英雄聯(lián)盟是在全球范圍內(nèi)極具影響力和知名度的電子競(jìng)技項(xiàng)目，近年來，以英雄聯(lián)盟職業(yè)聯(lián)賽為代表的電競(jìng)產(chǎn)業(yè)在我國(guó)的發(fā)展如火如荼，自2013年創(chuàng)立到現(xiàn)在，LPL（英雄聯(lián)盟職業(yè)聯(lián)賽中國(guó)賽區(qū)）的賽事規(guī)模不斷擴(kuò)大，觀賽不斷增加，粉絲影響力不斷提升。

本文基于英雄聯(lián)盟LPL官網(wǎng)給出的數(shù)據(jù)，通過Flask搭建框架，Ajax進(jìn)行前后端交互和ECharts實(shí)現(xiàn)LPL賽事數(shù)據(jù)的可視化分析，針對(duì)目前為止的比賽數(shù)據(jù)，對(duì)其進(jìn)行分析，提高我們對(duì)比賽情況的認(rèn)知，使觀眾能夠更便捷的了解比賽數(shù)據(jù)和選手個(gè)人情況，也能讓數(shù)據(jù)呈現(xiàn)出更加直觀簡(jiǎn)潔高效的成果。

2 數(shù)據(jù)采集模塊

數(shù)據(jù)采集模塊采用網(wǎng)絡(luò)爬蟲技術(shù)訪問英雄聯(lián)盟（LPL）官網(wǎng)界面。通過相關(guān)的頁面解析技術(shù)，從訪問頁面中提取需要的數(shù)據(jù)，然后存儲(chǔ)到數(shù)據(jù)庫(kù)中。由于比賽數(shù)據(jù)更新周期短，數(shù)據(jù)時(shí)效性比較有限，故本項(xiàng)目以前后端交互的形式實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新。

首先，登錄英雄聯(lián)盟（LPL）官網(wǎng)，右鍵點(diǎn)擊檢查，之后選擇Network，在【name】下方找到【LOL_MATCH2_ MATCH_TEAMRANK_LIST_134_7_8.js】，接著點(diǎn)擊【Preview】。

由于在網(wǎng)站上爬取下來的輸出內(nèi)容是字符串對(duì)象，需要用json.loads()，將其轉(zhuǎn)化為字典，再使用字典和列表的方法就可以將想要的數(shù)據(jù)提取出來，并且存放到另外一個(gè)字典里面，最后獲取的數(shù)據(jù)包括：個(gè)人MVP前十二，個(gè)人排行榜前五，個(gè)人總擊殺數(shù)據(jù)、英雄選擇率前六十等，隨后將獲取到的數(shù)據(jù)，導(dǎo)入數(shù)據(jù)庫(kù)。

3 系統(tǒng)設(shè)計(jì)

3.1 系統(tǒng)總體框架

本項(xiàng)目運(yùn)用Request網(wǎng)絡(luò)爬蟲框架，從英雄聯(lián)盟（LPL）官網(wǎng)爬取各戰(zhàn)隊(duì)比賽數(shù)據(jù)，利用Flask框架及Python、ECharts、HTML5、CSSJavaScript等多種語言，構(gòu)建針對(duì)賽事觀眾設(shè)計(jì)的一套智能分析系統(tǒng)，并進(jìn)行可視化展示，其系統(tǒng)結(jié)構(gòu)框架圖如圖1所示。

圖1 系統(tǒng)框架圖Fig.1 System framework diagram

由圖1可以看出，該系統(tǒng)由三個(gè)模塊組成：數(shù)據(jù)采集模塊，數(shù)據(jù)傳輸模塊，數(shù)據(jù)可視化模塊。其中數(shù)據(jù)可視化包括個(gè)人戰(zhàn)績(jī)堆疊圖、英雄數(shù)據(jù)輪播圖、戰(zhàn)隊(duì)勝負(fù)數(shù)據(jù)、個(gè)人比賽數(shù)據(jù)、戰(zhàn)隊(duì)排行榜、個(gè)人排行榜及MVP種子選手，還有英雄比賽數(shù)據(jù)查詢模塊。

3.2 軟件體系架構(gòu)設(shè)計(jì)

在軟件體系架構(gòu)設(shè)計(jì)中，采用分層模塊化設(shè)計(jì)。在用戶層上，安裝常見的瀏覽器軟件，用戶本機(jī)可連接英特網(wǎng)前提下，用戶即可操作功能模塊；在應(yīng)用層上，設(shè)計(jì)英雄比賽數(shù)據(jù)查詢模塊、英雄數(shù)據(jù)輪播圖等子模塊；在交互層上，使用Flask連接前端頁面，通過Ajax向服務(wù)器發(fā)送請(qǐng)求，接收服務(wù)器返回的JSON數(shù)據(jù)然后使用JavaScript修改網(wǎng)頁，進(jìn)而實(shí)現(xiàn)頁面局部數(shù)據(jù)更新。

3.3 系統(tǒng)設(shè)計(jì)技術(shù)路線

在設(shè)計(jì)本系統(tǒng)時(shí)，前端模塊可使用VScode來進(jìn)行代碼的編輯、開發(fā)和優(yōu)化，使用Django基礎(chǔ)架構(gòu)，利用原生前端開發(fā)工具和Bootstrap前端框架來進(jìn)行前端頁面的搭建，并使用ECharts可視化開發(fā)工具構(gòu)建可視化圖表，構(gòu)建可視化系統(tǒng)，針對(duì)部分系統(tǒng)的數(shù)據(jù)，可使用數(shù)據(jù)庫(kù)作為存儲(chǔ)和交換的中間載體，系統(tǒng)設(shè)計(jì)技術(shù)路線直觀表述如圖2所示。

圖2 系統(tǒng)設(shè)計(jì)路線圖Fig.2 System design roadmap

3.4 前端布局設(shè)計(jì)

在前端頁面的設(shè)計(jì)方面，根據(jù)英雄聯(lián)盟這一主題，背景設(shè)計(jì)上選擇英雄聯(lián)盟logo圖作為背景，增強(qiáng)個(gè)性化設(shè)計(jì)。在整個(gè)頁面布局上，首先將整個(gè)頁面劃分為10個(gè)盒子，使用HTML和CSS把最基礎(chǔ)的框架搭建出來，各頁面繪制的圖表模塊如圖3所示。

圖3 前端頁面設(shè)計(jì)圖Fig.3 Front-end page design diagram

4 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

數(shù)據(jù)可視化模塊將數(shù)據(jù)分析模塊的數(shù)據(jù)進(jìn)行一個(gè)精美而又直接的展示，我們采用大屏的方式進(jìn)行展示，如圖4所示。在數(shù)據(jù)可視化模塊中所展示的包括個(gè)人戰(zhàn)績(jī)堆疊圖、英雄數(shù)據(jù)輪播圖、戰(zhàn)隊(duì)勝負(fù)數(shù)據(jù)、個(gè)人擊殺數(shù)據(jù)、戰(zhàn)隊(duì)排行榜、個(gè)人排行榜及MVP種子選手，還有英雄比賽數(shù)據(jù)查詢模塊。

圖4 英雄聯(lián)盟2022年春季賽數(shù)據(jù)可視化Fig.4 Data visualization of LEAGUE of Legends 2022 Spring Games

在個(gè)人數(shù)據(jù)堆疊模塊主要通過統(tǒng)計(jì)KDA前12名職業(yè)選手的比賽數(shù)據(jù)做出的分析圖，包括出場(chǎng)次數(shù)、總擊殺、總助攻、總死亡。這個(gè)賽季出場(chǎng)次數(shù)是Knight選手最多，但各個(gè)選手出場(chǎng)次數(shù)之間相差不大，對(duì)于參團(tuán)數(shù)影響不大，而選手的參團(tuán)率即擊殺和助攻的和相差較大，其中Knight、Photic、Rookie的參團(tuán)超過600人頭，參團(tuán)率非常高，對(duì)于團(tuán)隊(duì)貢獻(xiàn)值相對(duì)較大。

英雄比賽數(shù)據(jù)查詢模塊主要通過利用Ajax技術(shù)實(shí)現(xiàn)，用戶可以通過輸入英雄ID進(jìn)行查詢英雄的比賽數(shù)據(jù)，包括場(chǎng)數(shù)、支持率、勝率。這些信息都是存儲(chǔ)在數(shù)據(jù)庫(kù)中，通過查詢可以從數(shù)據(jù)庫(kù)中提取信息并進(jìn)行展示。

戰(zhàn)隊(duì)和選手?jǐn)?shù)據(jù)模塊通過統(tǒng)計(jì)戰(zhàn)隊(duì)和選手的比賽數(shù)據(jù)進(jìn)行分析展示，從數(shù)據(jù)分析的結(jié)果可知選手V5的勝率最高，選手TES的總擊殺最多，選手WBG的插眼最多。其中，選手V5的勝率最高說明勝利的場(chǎng)數(shù)最多；選手WBG插眼最多可知該隊(duì)伍對(duì)于比賽中的視野掌控最高，而在比賽中，視野對(duì)比賽是很重要的。

個(gè)人擊殺模塊通過統(tǒng)計(jì)一些比賽選手的個(gè)人數(shù)據(jù)進(jìn)行分析得出結(jié)果，可以直觀的看出每個(gè)選手在比賽中的表現(xiàn)，從數(shù)據(jù)可知該賽季總擊殺數(shù)、總助攻和總死亡率最高分別為Photic選手、Weiwei選手和Theshy選手，通過該模塊掌握部分選手的個(gè)人數(shù)據(jù)和個(gè)人能力。

戰(zhàn)隊(duì)排行榜（如圖5所示)中，粉絲們可以直觀看到自己所支持的戰(zhàn)隊(duì)在常規(guī)賽中各項(xiàng)表現(xiàn)以及隊(duì)伍中的排行榜。從圖中可知VS戰(zhàn)隊(duì)的勝率最高為78%，出場(chǎng)次數(shù)19次，其中勝利次數(shù)15次，其次是RNG戰(zhàn)隊(duì)、TES戰(zhàn)隊(duì)。位于排行榜的第5位為L(zhǎng)NG戰(zhàn)隊(duì)，其勝率為64%，出場(chǎng)17次，其中勝利次數(shù)11次，失敗次數(shù)6次。

圖5 戰(zhàn)隊(duì)排行榜圖Fig.5 Team leaderboards

5 總結(jié)

本文詳細(xì)說明了基于ECharts的英雄聯(lián)盟LPL-2022年春季賽數(shù)據(jù)的可視化分析，從數(shù)據(jù)采集到最后的可視化展示，進(jìn)行了正式的前后端交互。在前端方面也用上了ECharts；數(shù)據(jù)采集采用了Request網(wǎng)絡(luò)爬蟲框架，后端方面是Flash、Ajax結(jié)合使用。從2022年春季賽賽隊(duì)的排名可知，其中冠軍隊(duì)GNG在整個(gè)春季賽的勝利次數(shù)14次，其次是亞軍隊(duì)TES和季軍隊(duì)V5，在整個(gè)春季賽也都有不俗的表現(xiàn)，都在整個(gè)春季賽獲得15次的勝利。從數(shù)據(jù)分析結(jié)果可知，該幾個(gè)賽隊(duì)的實(shí)力都是相當(dāng)?shù)男酆瘢⑶也幌嗌舷隆Ｎ磥砀鲬?zhàn)隊(duì)都需要分析和總結(jié)成敗原因?qū)⒖焖賻椭陨響?zhàn)斗能力的提升以及團(tuán)隊(duì)的成長(zhǎng)。