菜单 搜索
首页 前端知识 基于Echarts HTML5可视化数据大屏展示-英雄联盟比赛数据可视化

基于Echarts HTML5可视化数据大屏展示-英雄联盟比赛数据可视化

2024-09-10 23:09:10 前端知识 前端哥 372 221 我要收藏

博主主页：猫头鹰源码
博主简介：Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万+、专注Java技术领域和毕业设计项目实战，欢迎高校老师\讲师\同行交流合作
​主要内容：毕业设计(Javaweb项目|小程序|Python|HTML|数据可视化|SSM|SpringBoot|Vue|Jsp|PHP等)、简历模板、学习资料、面试题库、技术咨询、文档编写和辅导、论文降重、长期答辩答疑辅导、腾讯会议一对一专业讲解辅导答辩
☑️ 文末联系获取

👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟

2024年最新计算机软件毕业设计选题大全：数百热门选题推荐✅

2024最新精品毕业设计项目，已整理自取
感兴趣可以先收藏起来，以防走丢，有任何选题、文档编写、代码问题也可以咨询我们

动图演示：文末白嫖源码

代码结构

主要代码实现

index.html布局

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
 
    <title>英雄联盟LPL比赛数据可视化 BY:Java_S</title>
    <link rel="shortcut icon" href="lol.ico" type="image/x-icon">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/js.js"></script>
    <script type="text/javascript" src="js/jquery.liMarquee.js"></script>
    <script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>
 
<body>
    <div style="background:#000d4a url(img/bg.png) center top;">
        <div class="loading">
            <div class="loadbox"> <img src="img/loading.gif"> 页面加载中... </div>
        </div>
        <div class="back"></div>
        <div class="head">
            <div class="JavaS"><a href="https://www.maotouyingcc.com/category/bishe" target="_blank">Java_S</a></div>
            <div class="weather"><span id="showTime"></span></div>
            <a href="" target="_blank">
                <h1>英雄联盟LPL比赛数据可视化</h1>
            </a>
 
        </div>
        <script>
            var t = null;
            t = setTimeout(time, 1000); /*开始运行*/
            function time() {
                clearTimeout(t); /*清除定时器*/
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();
                var m = dt.getMinutes();
                var s = dt.getSeconds();
                document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000);
            }
        </script>
        <div class="mainbox">
            <ul class="clearfix">
                <li>
                    <div class="boxall" style="height:400px;">
                        <div class="alltitle">个人数据堆叠图</div>
                        <div class="navboxall" id="echart5"></div>
                    </div>
                    <div class="boxall" style="height:260px;">
                        <div class="alltitle">英雄数据轮播</div>
                        <div class="navboxall">
                            <div class="wraptit">
                                <span>英雄名</span><span>出场次数</span><span>Pick比率</span><span>胜率</span>
                            </div>
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <p><span>寒冰射手</span><span>205</span><span>56%</span><span>51%</span></p>
                                    </li>
                                    <li>
                                        <p><span>残月之肃</span><span>159</span><span>47%</span><span>57%</span></p>
                                    </li>
                                    <li>
                                        <p><span>深海泰坦</span><span>164</span><span>38%</span><span>53%</span></p>
                                    </li>
                                    <li>
                                        <p><span>探险家</span><span>137</span><span>37%</span><span>50%</span></p>
                                    </li>
                                    <li>
                                        <p><span>法外狂徒</span><span>135</span><span>36%</span><span>49%</span></p>
                                    </li>
                                    <li>
                                        <p><span>盲僧</span><span>135</span><span>36%</span><span>53%</span></p>
                                    </li>
                                    <li>
                                        <p><span>巨魔之王</span><span>124</span><span>33%</span><span>45%</span></p>
                                    </li>
                                    <li>
                                        <p><span>不灭狂雷</span><span>124</span><span>33%</span><span>45%</span></p>
                                    </li>
                                    <li>
                                        <p><span>山隐之焰</span><span>122</span><span>33%</span><span>47%</span></p>
                                    </li>
                                    <li>
                                        <p><span>欧豪</span><span>109</span><span>29%</span><span>43%</span></p>
                                    </li>
                                    <li>
                                        <p><span>暗黑元首</span><span>102</span><span>27%</span><span>53%</span></p>
                                    </li>
                                    <li>
                                        <p><span>齐天大圣</span><span>90</span><span>24%</span><span>52%</span></p>
                                    </li>
 
                                </ul>
                            </div>
 
                        </div>
                    </div>
                    <div class="boxall" style="height:260px;">
                        <div class="alltitle">2020LPL夏季赛总冠军</div>
 
                        <div class="navboxall" id="echart1"></div>
                    </div>
                </li>
                <li>
 
                    <div class="boxall" style="height:230px">
                        <div class="clearfix navboxall" style="height: 100%">
 
                            <div class="pulll_left zhibiao">
                                <div class="zb1"><span>TES<br>胜率最高</span>
                                    <div id="zb1"></div>
                                </div>
                                <div class="zb2"><span>JDG<br>击杀最高</span>
                                    <div id="zb2"></div>
                                </div>
                                <div class="zb3"><span>SN<br>插眼最多</span>
                                    <div id="zb3"></div>
                                </div>
                            </div>
                            <div class="pulll_right zhibiao ">
                                <div class="zb4"><span>TESknight<br>击杀最多</span>
                                    <div id="zb4"></div>
                                </div>
                                <div class="zb5"><span>IGTheShy<br>死亡最多</span>
                                    <div id="zb5"></div>
                                </div>
                                <div class="zb6"><span>V5y4<br>KDA最高</span>
                                    <div id="zb6"></div>
                                </div>
                            </div>
                        </div>
                    </div>
 
                    <div class="boxall" style="height:350px">
                        <div class="alltitle">战队胜负数据</div>
                        <div class="navboxall" id="echart4"></div>
                    </div>
 
                    <div class="boxall" style="height:340px">
                        <div class="alltitle">个人击杀数据</div>
                        <div class="navboxall" id="echart3"></div>
                    </div>
                </li>
                <li>
                    <div class="boxall" style="height:300px">
                        <div class="alltitle">战队排行榜</div>
                        <div class="navboxall">
                            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr>
                                        <th scope="col" class="toptop">排名</th>
                                        <th scope="col">战队</th>
                                        <th scope="col">出场次数</th>
                                        <th scope="col">胜率</th>
                                    </tr>
                                    <tr>
                                        <td><span>1</span></td>
                                        <td>TES</td>
                                        <td>45<br></td>
                                        <td>73%<br></td>
                                    </tr>
                                    <tr>
                                        <td><span>2</span></td>
                                        <td>JDG</td>
                                        <td>48</td>
                                        <td>68%</td>
                                    </tr>
 
                                    <tr>
                                        <td><span>3</span></td>
                                        <td>V5</td>
                                        <td>49</td>
                                        <td>61%</td>
                                    </tr>
                                    <tr>
                                        <td><span>4</span></td>
                                        <td>IG</td>
                                        <td>44</td>
                                        <td>59%</td>
                                    </tr>
                                    <tr>
                                        <td><span>5</span></td>
                                        <td>SN</td>
                                        <td>52</td>
                                        <td>59%</td>
                                    </tr>
 
                                </tbody>
                            </table>
                        </div>
                    </div>
 
                    <div class="boxall" style="height: 300px">
                        <div class="alltitle">个人排行榜</div>
                        <div class="navboxall">
                            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr>
                                        <th scope="col" class="toptop">排名</th>
                                        <th scope="col">队员</th>
                                        <th scope="col">位置</th>
                                        <th scope="col">总击杀</th>
                                    </tr>
                                    <tr>
                                        <td><span>1</span></td>
                                        <td>TESknight</td>
                                        <td>中单<br></td>
                                        <td>239<br></td>
                                    </tr>
                                    <tr>
                                        <td><span>2</span></td>
                                        <td>WEJiumeng</td>
                                        <td>ADC</td>
                                        <td>205</td>
                                    </tr>
 
                                    <tr>
                                        <td><span>3</span></td>
                                        <td>TESJackeyLove</td>
                                        <td>ADC</td>
                                        <td>205</td>
                                    </tr>
                                    <tr>
                                        <td><span>4</span></td>
                                        <td>JDGLokeN</td>
                                        <td>ADC</td>
                                        <td>205</td>
                                    </tr>
                                    <tr>
                                        <td><span>5</span></td>
                                        <td>LGDxiye</td>
                                        <td>中单</td>
                                        <td>191</td>
                                    </tr>
 
                                </tbody>
                            </table>
                        </div>
 
                    </div>
 
                    <div class="boxall" style="height:320px">
                        <div class="alltitle">MVP种子选手</div>
                        <div class="navboxall" id="echart2"></div>
                    </div>
 
 
                </li>
            </ul>
 
        </div>
    </div>
 
    <script>
        $(function() {
            $('.wrap,.adduser').liMarquee({
                direction: 'up',
                /*向上滚动*/
                runshort: false,
                /*内容不足时不滚动*/
                scrollamount: 20 /*速度*/
            });
        });
    </script>
 
 
 
 
</body>
 
</html>
复制

css文件：

 
.loading {
    position: fixed;
    left: 0;
    top: 0;
    font-size: 16px;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    background: #1a1a1c;
    text-align: center;
}
 
.loadbox {
    position: absolute;
    width: 160px;
    height: 150px;
    color: rgba(255, 255, 255, .6);
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -75px;
}
 
.loadbox img {
    margin: 10px auto;
    display: block;
    width: 40px;
}
 
.head {
    height: 105px;
    background: url(../img/head_bg.png) no-repeat center center;
    position: relative
}
 
.head h1 {
    color: #ffc800;
    font-size: 42px;
    line-height: 90px;
    font-family: 汉仪趣黑W;
    font-weight: 500;
    position: absolute;
    left: 50%;
    margin-left: -265px
}
 
.head h1 img {
    width: 1.5rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: .2rem
}
 
.weather {
    position: absolute;
    right: 20px;
    top: 0;
    line-height: 85px;
}
 
.weather span {
    color: rgba(255, 255, 255, .9) !important;
    font-size: 24px;
    font-family: DS-Digital
}
 
.mainbox {
    padding: 10px 20px 0 20px;
}
 
.mainbox>ul {
    margin-left: -.4rem;
    margin-right: -.4rem;
}
 
.mainbox>ul>li {
    float: left;
    padding: 0 .4rem
}
 
.mainbox>ul>li {
    width: 24%
}
 
.mainbox>ul>li:nth-child(2) {
    width: 52%
}
 
.boxall {
    padding: 15px;
    background: rgba(186, 125, 81, .2);
    position: relative;
    margin-bottom: 15px;
    ;
    z-index: 10;
}
 
.alltitle {
    font-size: 18px;
    color: #fff;
    position: relative;
    padding-left: 12px;
    margin-bottom: 10px;
}
 
.alltitle:before {
    width: 5px;
    height: 20px;
    top: 2px;
    position: absolute;
    content: "";
    background: #49bcf7;
    border-radius: 20px;
    left: 0;
}
 
.navboxall {
    height: calc(100% - 30px);
}
 
.num,
.zhibiao {
    height: 100%;
    width: 50%;
}
 
.zb1,
.zb2,
.zb3 {
    float: left;
    width: 33.3333%;
    height: 100%;
}
 
#zb1,
#zb2,
#zb3 {
    height: calc(100% - 30px);
}
 
.zb4,
.zb5,
.zb6 {
    float: right;
    width: 33.3333%;
    height: 100%;
}
复制

作品来自于网络收集、侵权立删 

由于js和css过多，上面只粘主页代码，其它的自行下载即可

源码获取

大家点赞、收藏、关注、评论啦 、联系下方获取👇🏻👇🏻👇🏻

专栏推荐阅读：

2024年最新计算机软件毕业设计选题大全：数百热门选题推荐✅

2024最新精品毕业设计项目，已整理自取

转载请注明出处或者链接地址：https://www.qianduange.cn//article/18059.html
标签
大屏端
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！