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

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

2024-09-10 23:09:10 前端知识 前端哥 363 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

jQuery 选择器

2024-05-12 00:05:34

jQuery Layer插件：前端弹出层快速实现指南

2024-10-13 20:10:14

cdn引入前端插件

2024-10-13 20:10:14

echarts将不同表放入一个网页中（简单版）

2024-10-13 20:10:11

ECharts关系图-日历关系图，附视频讲解与代码下载

2024-10-13 20:10:05

简单的vue三维饼状图，echacts

2024-10-13 20:10:05

基于ssm vue.js的仓库管理系统附带文章源码部署视频讲解等

2024-10-13 20:10:39

基于SpringBoot Vue的商城购物系统实战

2024-10-13 20:10:40

Vue、Springboot 大文件分片下载、多线程下载

2024-10-13 20:10:14

下载vue/cli脚手架的时候，下载速度过慢怎么解决，适配版本

2024-10-13 20:10:46

大家推荐的文章
1

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

2024-03-03 11:03:011001
2

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

2024-09-30 23:09:061000
3

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

2024-09-09 00:09:071000
4

vue使用datav echarts

2024-09-06 00:09:381000
5

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

2024-09-04 23:09:411000
6

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
7

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

2024-08-19 22:08:161000
8

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

2024-08-19 22:08:121000
9

npm的使用

2024-08-18 00:08:131000
10

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

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

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

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

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

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