时间：2025-07-08 18:02:32
效果图
完成这个项目，我感觉我已经被掏空了，我几乎用尽了我会的所有知识html+css+javascript+jQuery+python+requests+numpy+mysql+pymysql+json+ajax+flask+echarts在这个过程中，并不是那么顺利，遇到了很多坑，好在全部都已经解决在整个页面全部功能运行成功的那一刻，我感觉幸福极了
下面我就带领大家实践一下，怎么从无到有
如果觉得涉及的知识太多,实践起来困难的同学.不要怕,我专门做了一期视频一分钟上手此项目点我观看视频
需要用到的Python第三方库:flask,requests,pymysql,numpy
听说看着源码读文章绝配哦Github
点我直达可视化页面
整个页面可划分为10个盒子，使用HTML和CSS就可以把最基础的框架搭建出来，大家都是pink老师的学生，怎么在页面中写盒子我就不多说了，我主要讲解一下如何将echarts的图表插入到页面中来
图1
Echarts官方网站ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求
ECharts 遵循 Apache-2.0 开源协议，免费商用
ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示
第一个 ECharts 实例源码
!!!!!!
使用Echarts的前提是你需要掌握HTML和Javascript的知识，毕竟Echarts是基于JS开发观察源码不难发现，引入了外部文件[echarts.js] 如果不引入，程序将无法正常运行基于准备好的div，绑定事件，初始化echarts实例指定图表的配置项和数据，即可显示图表大致流程：引入所需文件，在HTML定义好div盒子，在JS中绑定事件，初始化echarts实例，指定图表的配置项和数据
1.引入所需文件
图2
说明：上面第一个实例将echarts的代码写在了HTML文件中，而我为了后期维护起来方便，就分开写了，所以需要引入[js.js]文件，也就是我把关于echarts的代码都写在了[js.js]文件中
2.在HTML定义好div盒子
图3
3.在JS中绑定事件，初始化echarts实例
图4
4.指定图表的配置项和数据
代码过多，请到源码中查看
项目中一共用了5种Echarts图表，使用的方法大同小异，我相信你可以举一反三
在讲解爬取数据之前，我还是想简单介绍一下什么是爬虫，回答大家对于爬虫的一些误解；假定大家都有一定的爬虫基础
什么是爬虫，爬虫违法吗？
点我查看官网比赛数据
图5
这个网站很特别，是一个动态的网站。如果说只是简单的使用requests获取页面的源码；虽然可以获取到数据，但是数据只有当前显示的一页。我最开始的想法是使用selenium这个可以操控浏览器的第三方库，进行数据的获取。代码写完后，获取数据没什么问题，就是速度太慢了，我也利用requests重新写了爬虫程序，速度提升非常明显（selenium用时20s,requests用时2s；两个程序还包括了将数据写入数据库的代码）
所有，selenium版本的爬虫我不会讲，主要还是讲解requests的版本
现在，我们来到官网，右键点击检查（如果是谷歌浏览器，按F12也可以），点击【Network】
图6
按CTRL+R 刷新一下在【name】下方找到【LOL_MATCH2_MATCH_TEAMRANK_LIST_134_7_8.js】，接着点击【Preview】，你就会看到这么一个界面
图7
观察右边的数据，是不是就是战队的信息，只不过就是用json包装起来了而已，利用Python简单处理一下就能获取到你想要的数据。这些数据是用接口形式传输的，我们就可以直接爬取接口
图8
我们打印一下请求的网址
Python
输出结果:
图9
可以看出所有的战队信息已经获取成功，可是输出的内容是一个str（字符串）对象，我们需要使用json.loads()函数将str对象转换为dict（字典）对象。再使用字典和列表的方法就可以将想要的数据提取出来，并且存放到另外一个字典里面
Python
输出结果:
图10
在上面的程序当中，我运用列表推导式，字典推导式，很轻松的就拿到了想要数据。如果你还看不懂推导式，你可以到我这篇文章看看Python高级编程之列表推导式、字典推导式、集合推导式
其实，列表推导式还有更简单的写法，你可以去源码当中的【spider_api.py】文件中，第125行代码查看，117-122行注释的代码就是未优化的代码，留个小小的彩蛋，期待你去发现
我们回到官方网站,点击【个人数据】
图11
接着右键检查,找到【LOL_MATCH2_MATCH_PERSONALRANK_LIST_134_7_8.js】
图12
获取数据的方法就和上面的类似了,我相信你可以举一反三
然而,获取英雄数据就不是那么顺利了还是回到官网,点击【英雄数据】还是右键检查,找到【LOL_MATCH2_MATCH_HERORANK_LIST_134_7_8.js】
图13
你会惊奇的发现,为什么没有英雄的名字,而只有【iChampionId】和其他数据于是,我们大胆的猜测,这些【iChampionId】会不会是英雄对应的ID呢?
想查看英雄的名称,我脑袋里面第一个蹦出了的想法就是英雄联盟官网老规矩,右键检查,找到【hero_list.js】,Amazing呀!
图14
你仔细看,发现英雄名称前面有个【heroId】,会不会就和我们刚才看到的【iChampionId】相对应呢?你不用去对比啦,我已经对比过了,就是相对应的,嘿嘿
虽然已经找到英雄名称,但是新的问题又来了从两个接口获取到的数据,怎么保证【iChampionId】的英雄匹配到正确的名称如何获取数据,我就不多嘴了,详细代码请查看源码.我这里主要讲解一下如何匹配正确的英雄名称
Python
【hero_key_id_top60】中的内容:
图15
【hero_name_id_list】中的内容:
图16
【hero_name_list】中的内容:
图17
【name 】中的内容:
图18
数据已到位,下一步导入数据库
首先,请在你的电脑上面创建一个名为【lpl】的数据库,不需要建表,后面我会讲解如何用pymysql建表
我们需要连接自己的数据库代码如下,值得注意的是, passwd=’你自己数据库的密码’ 如果说看不懂代码,可以先去了解一下MySQL和pyMySQL
Python
数据库连接成功后,我们以【战队排行榜】为例
Python
【info_list】当中的数据
图19
数据库中的数据
图20
数据库还是需要连接的,我们任然以【战队排行榜】为例
Python
Web应用程序是一种可以通过Web访问的应用程序。Web应用程序的一个最大好处是用户很容易访问应用程序。用户只需要有浏览器即可,不需要再安装其他软件能够开发web程序的编程语言有很多,比如Java,Php,Python等而我们选择用Python进行开发,使用Falsk框架进行 快速 开发
Flask是一个使用 Python编写的轻量级Web应用框架。其WSGl( Python Web Server Gateway Interface）工具包采用 Werkzeug,模板引擎则使用 Jinja2,是目前十分流行的Web框架这里给大家推荐一期视频,Flask快速入门.由于我的能力有限,还请大家花点时间将视频看完,再接着往后看文章
假定大家已经看完了视频,嘿嘿
使用pycharm创建一个flask项目,会自动帮我们生成两个文件夹【templates】【static】和一个python文件【app.py】我们需要将写好的HTML文件放在【templates】目录下,CSS、JS和所用到的图片放在【static】目录下，如下图所示
图21
值得注意的是，也是一个坑，HTML文件当中，引用的外部文件，文件地址一定要去修改。因为我们是先写好的前端页面，而flask当中需要我们将外部文件都放在【static】当中
注意事项
这里所说的模板，就是我们写好的HTMl文件，只不过需要使用render_template()将其引入
Python
Ajax是Asynchronous Javascript and XML的简称，通过Ajax向服务器发送请求，接收服务器返回的json数据，然后使用 Javascript修改网页，来实现页面局部数据更新。使用 Jquery框架可方便的编写Ajax代码，需要 Jquery.js文件
基本格式
JavaScript
我们先到app.py文件中，定义好一个路由(/wingsvd)，methods添加一个’post’,这里以【战队胜负图表】为例
Python
LPL.get_wings_vd(),你可以到lpldata.py文件查看相关的代码。主要功能就是从数据获取数据，并且将数据整理好后，存到字典里面，最后使用json.dumps()将dict(字典)对象转换为json对象，最为函数的返回值返回
现在回到Ajax的部分,你可以到【js.js】文件中359行查看
JavaScript
数据提取成功后，就可以在后面的echarts代码中修改对应的配置，图表就可以显示出数据啦
这里以图表的X轴为例
JavaScript
所有的图表传输数据的操作方法都是一样的，先在【app.py】中创建路由，返回你需要的数据，再到【js.js】当中写Ajax和Echarts的代码
所有的准备工作完成后，我们就只剩最后一步啦！
Python
图24
一、查战绩
首先在电脑上打开奇游，加速英雄联盟国际服，进入加速页面，即可看到战绩查询的选项：
点击之后，输入想查询的玩家id，一键查看战绩：
奇游支持加速英雄联盟台服，优化本地网络，除开基本的加速功能以外，还提供教程以及实用的小工具，帮助玩家们全方位获得好的体验，有需要的玩家们可以领取时长来免费加速：
二、一键配置符文
游玩国服时，玩家们可以启动wegame，再启动国服客户端去游玩，在选英雄时一键选择wegame提供的符文天赋；而在游玩台服时，玩家们同样可以先启动wegame，再启动台服客户端，进入对局选英雄界面时即可使用符文。
英雄联盟设计师Lexical，在今天(6月27日)带来了一个全新的消息，在目前的8.14版本测试服中，英雄联盟的客户端中将启用数据统计功能!
数据统计也是很多玩家之前就呼吁的功能，毕竟每个玩家都想看到自己有怎样的表现。在客户端的游戏面板中，将会新增一个全新的按钮和页面。在这个数据统计页面中，玩家可以查看自己打了多少场比赛、每个英雄使用了多少场、所有历史数据，包括KDA和胜率等。还有玩家在每个位置的整体胜率和综合评分，点开各个英雄还能看到每个英雄的平均数据。
当然，玩家也能够查看自己一共在英雄联盟中花费了多少游戏时间，自己的平均KDA是多少。这个页面还能够和其他玩家进行数据对比，包括好友、其他玩家，甚至可以进行特定英雄的对比。这能够让玩家更好地看清楚，自己目前的实力和差距。
这些数据对比，也会以清晰的分析图显示出来，玩家可以比较不同的排位模式、最近多少场游戏、什么主打位置。在数据统计页面有多个筛选项，数据对比包括三个主要的方面，分别是战斗、收入和团队表现。以辅助位置为例，团队表现方面的对比包括目标控制、视野分、游走得分、击杀参与等。
这个功能可以说受到了广大玩家的好评，虽然英雄联盟目前有很多第三方的数据统计网站，但没有任何一个数据统计网站，可以读取到玩家的源数据。因此，官方推出的这个全新数据网站，可以让玩家更好地了解自己的成长，哪些英雄玩得好，哪些英雄需要加强，从而找到自己最适合上分的英雄。
而设计师Lexical也表示这个数据统计功能会不断改进，他们会修复更多BUG，并且改进玩家交换位置后的数据调整，争取让这个功能更加完善。目前，设计师还没有确定这个功能将会在哪个版本中推出，但如果进展顺利的话，在两个版本内就会上线到正式服了。
用户评论
想查查自己最近的LOL战绩，就来用 lol盒子查询啊。
有20位网友表示赞同！
lol盒子真的很方便，想看谁的战绩直接进去查，一目了然。
有18位网友表示赞同！
今天打开lol盒子，发现打不开怎么回事？是不是服务器出故障了？
有6位网友表示赞同！
哎，最近老是找不到lol盒子的页面，也不知道怎么解决啊，有人知道吗？
有5位网友表示赞同！
玩LOL谁不爱查看战绩呢？lol盒子方便快捷是我的首选。
有18位网友表示赞同！
我的电脑突然打开lol盒子就卡住怎么回事啊？是不是版本问题？
有9位网友表示赞同！
有没有什么好用的lol盒子第三方插件推荐，可以分析战绩的？
有5位网友表示赞同！
Lol盒子查询功能强大，可以看英雄、装备明细，真是一把好手。
有7位网友表示赞同！
不知道有没有人跟我一样遇到lol盒子打不开的问题啊，好 frustrating!
有7位网友表示赞同！
最近玩游戏太少了，打开lol盒子就吓了一跳，战绩全落后了哈哈。
有10位网友表示赞同！
Lol盒子还能查看别人的视频攻略，真是全方位地提高水平了。
有16位网友表示赞同！
想知道自己的运营数据，只能靠lol盒子查询这个软件啦。
有7位网友表示赞同！
为什么我的网络信号好正常，但还是打不开lol盒子啊？
有9位网友表示赞同！
希望lol盒子能更新一下，增加更多英雄和模式的战绩查询功能。
有11位网友表示赞同！
lol盒子真是老朋友了，陪我一起成长很多年了，これからも愛用！
有20位网友表示赞同！
玩LOL的朋友赶紧去下载lol盒子查询软件吧，方便好用又有趣。
有19位网友表示赞同！
lol盒子的界面越来越简洁了，操作更方便了。点赞！
有12位网友表示赞同！
每次遇到不会的操作，都能在lol盒子论坛里找到答案哦，真棒！
有20位网友表示赞同！