基于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次的勝利。從數據分析結果可知，該幾個賽隊的實力都是相當的雄厚，并且不相上下。未來各戰隊都需要分析和總結成敗原因將快速幫助自身戰斗能力的提升以及團隊的成長。