<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>大数据可视化数据大屏可视化模板</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/comon0.css">
</head>
<body>
<div class="loading">
<div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
</div>
<div class="head">
<h1><a href=" " style="color: white">大数据可视化系统数据分析通用模版</a></h1>
<div class="time" id="showTime"><a href=" /tree/master/web">2021年12月05日16时16分54秒</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();//获取秒
var t = null;
document.getElementById("showTime").innerHTML = y + "年" + Appendzero(mt) + "月" + Appendzero(day) + "日" + Appendzero(h) + "时" + Appendzero(m) + "分" + Appendzero(s) + "秒";
function Appendzero(obj) {
if (obj < 10) return "0" + "" + obj;
else return obj;
}
t = setTimeout(time, 1000); //设定定时器，循环运行
}
</script>
</div>
<div class="mainbox">
<ul class="clearfix">
<li>
<div class="boxall" style="height: calc(15% - .15rem)">
<ul class="row h100 row1">
<li class="col-4">
<div class="bar1"><img src="images/icon1.png">
<h3><span>字段名称</span>200个</h3>
</div>
</li>
<li class="col-4">
<div class="bar1"><img src="images/icon4.png">
<h3><span>字段名称</span>1200个</h3>
</div>
</li>
<li class="col-4">
<div class="bar1"><img src="images/icon5.png">
<h3><span>字段名称
</span>150家</h3>
</div>
</li>
</ul>
</div>
<div class="boxall" style="height: calc(43% - .15rem)">
<ul class="sec h100">
<li>
<div>
<p><img src="images/icon4.png">字段名称</p>
<div class="barnav"><div class="bar2"><span style="width:50%;"></span></div> <span>24356件</span></div>
</div>
<div>
<div class="zaf">
<p>同比</p>
<p><span>34<i>%</i></span><img src="images/up.png"></p>
</div>
</div>
</li>
<li>
<div>
<p><img src="images/icon5.png">字段名称</p>
<div class="barnav"><div class="bar2"><span style="width:50%;"></span></div> <span>243567封</span></div>
</div>
<div>
<div class="zaf">
<p>同比</p>
<p><span>34<i>%</i></span><img src="images/up.png"></p>
</div>
</div>
</li>
<li>
<div>
<p><img src="images/icon6.png">字段名称</p>
<div class="barnav"><div class="bar2"><span style="width:50%;"></span></div> <span>24356笔</span></div>
</div>
<div>
<div class="zaf">
<p>同比</p>
<p><span>50<i>%</i></span><img src="images/down.png"></p>
</div>
</div>
</li>
</ul>
</div>
<div class="boxall" style="height: calc(42% - .15rem)">
<div class="alltitle">模块标题</div>
<div class="boxnav" id="echarts3"></div>
</div>
</li>
<li>
<div class="boxall" style="height: calc(20% - .15rem)">
<ul class="row h100 clearfix">
<li class="col-6">
<div class="sqzs h100">
<p>业绩总览</p>
<h1>1938272</h1>
</div>
</li>
<li class="col-6">
<ul class="row h100 clearfix">
<li class="col-4">
<div class="tit01">字段名称</div>
<div class="piebox" id="pe01"></div>
</li>
<li class="col-4">
<div class="tit01">“字段名称</div>
<div class="piebox" id="pe02"></div>
</li>
<li class="col-4">
<div class="tit01">字段名称</div>
<div class="piebox" id="pe03"></div>
</li>
</ul>
</li>
</ul>
</div>
<div class="boxall" style="height: calc(38% - .15rem)">
<div class="boxnav h100" id="echarts1"></div>
</div>
<div class="boxall" style="height: calc(42% - .15rem)">
<div class="alltitle">模块标题 </div>
<div class="boxnav" id="echarts2"></div>
</div>
</li>
<li>
<div class="boxall" style="height: calc(15% - .15rem)">
<ul class="row h100 row1">
<li class="col-4">
<div class="bar1 bar2"><img src="images/icon7.png">
<h3><span>字段名称
</span>251项</h3>
</div>
</li>
<li class="col-4">
<div class="bar1 bar2"><img src="images/icon8.png">
<h3><span>字段名称
</span>34家</h3>
</div>
</li>
<li class="col-4">
<div class="bar1 bar2"><img src="images/icon9.png">
<h3><span>字段名称
</span>150项</h3>
</div>
</li>
</ul>
</div>
<div class="boxall" style="height: calc(43% - .15rem)">
<div class="alltitle">模块标题</div>
<div class=" boxnav" id="lastecharts">
</div>
</div>
<div class="boxall" style="height: calc(42% - .15rem)">
<div class="alltitle">排行榜</div>
<div class=" boxnav paim">
<ul class="h100">
<li>
<span>1</span>
<div class="pmnav">
<p>标题名称标题名称标题名称标题名称</p>
<div class="pmbar"><span style="width:100%"></span><i>500</i></div>
</div>
</li>
<li>
<span>2</span>
<div class="pmnav">
<p>标题名称</p>
<div class="pmbar"><span style="width:92%"></span><i>400</i></div>
</div>
</li>
<li>
<span>3</span>
<div class="pmnav">
<p>标题名称</p>
<div class="pmbar"><span style="width:90%"></span><i>180</i></div>
</div>
</li>
<li>
<span>4</span>
<div class="pmnav">
<p>标题名称</p>
<div class="pmbar"><span style="width:88%"></span><i>160</i></div>
</div>
</li>
<li>
<span>5</span>
<div class="pmnav">
<p>标题名称</p>
<div class="pmbar"><span style="width:86%"></span><i>140</i></div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script>
$(document).ready(function () {
var arr = [];
var max;
$(".paim li i").each(function () {
arr.push($(this).text());
})
//alert(arr)
max = Math.max.apply(null, arr);
$(".paim .pmbar span").each(function () {
var i = $(this).parents("li").index()
w = arr[i] / max * 100;
sw = w.toFixed(0) + '%'
$(this).css({ width: sw })
})
})
</script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script language="JavaScript" src="js/js.js"></script>
</body>
</html>
计算机设计大赛-数据可视化赛道-大数据可视化数据大屏可视化项目.zip （26个子文件） 
计算机设计大赛-数据可视化赛道-大数据可视化数据大屏可视化项目 js 
js.js 20KB dark.js 1KB charts.js 141KB echarts.min.js 2.3MB core.js 924KB animated.js 2KB jquery.js 82KB css comon0.css 5KB
index.html 7KB images 
icon8.png 729B down.png 271B icon6.png 2KB
更多内容关注公众号.jpg 27KB icon1.png 1KB icon4.png 2KB
loading.gif 701B bg02.png 697B bg01.png 3KB icon5.png 2KB bg.jpg 262KB up.png 276B icon7.png 1KB icon3.png 942B head_bg.png 8KB icon9.png 3KB icon2.png 679B
一键难忘
- 粉丝: 10w+
- 资源: 182
最新资源
- 75-0604问题描述明确符号-1080P 高清-AVC.mp4
- 77-0606间隔的衡量-1080P 高清-AVC.mp4
- COMSOL变压器三维仿真：振动、噪声、温度计算及磁致伸缩分析.pdf
- COMSOL变压器模型：时域与频域分析，考虑磁致伸缩、噪声与洛伦兹力.pdf
- COMSOL变压器三维仿真：振动噪声、温度及电流电压负载计算.pdf
- 76-0605超平面线性方程点到超平面距离含义-1080P 高清-AVC.mp4
- COMSOL变压器三维仿真模型：声-固耦合振动声场运行有效.pdf
- Comsol变压器振动仿真：不同预压应力铁心磁致伸缩振动及磁场位移变形仿真.pdf
- COMSOL变压器匝间短路时的温度场及电磁场、损耗、温度等结果的有限元仿真.pdf
- COMSOL冰与水的相变数值模拟：流固相变过程的探索.pdf
- Comsol参数化曲面生成裂缝模型.pdf
- COMSOL单层焊缝数值模拟计算：温度场与固体力学耦合模型下的温度和应力分布.pdf
- COMSOL单相变压器绕组及铁芯振动形变仿真模型.pdf
- COMSOL单相变压器电磁场和温度场计算模型.pdf
- COMSOL单孔激光烧蚀.pdf
- Comsol单向手性光学腔.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页