<!DOCTYPE html>
<!-- saved from url=(0046)http://yuanbaoshuju.com/bigscreen/8/index.html -->
<html style="font-size: 64px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<script type="text/javascript" src="./index_files/jquery.js"></script><style type="text/css"></style>
<link rel="stylesheet" href="./index_files/comon0.css">
<script type="text/javascript">
$(document).ready(function(){
var html=$(".wrap ul").html()
$(".wrap ul").append(html)
var ls=$(".wrap li").length/2+1
i=0
ref = setInterval(function(){
i++
if(i==ls){
i=1
$(".wrap ul").css({marginTop:0})
$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
}
$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
},2400);
var html2=$(".adduser ul").html()
$(".adduser ul").append(html2)
var ls2=$(".adduser li").length/2+1
a=0
ref = setInterval(function(){
a++
if(a==ls2){
a=1
$(".adduser ul").css({marginTop:0})
$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
}
$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
},4300);
})
</script></head>
<body>
<div class="loading" style="display: none;">
<div class="loadbox"> <img src="./index_files/loading.gif"> 页面加载中... </div>
</div>
<div class="head">
<h1><img src="./index_files/logo.png">公司名称大数据可视化平台</h1>
<div class="weather"><img src="./index_files/weather.png"><span>多云转小雨</span><span>2017-12-30</span></div>
</div>
<div class="mainbox">
<ul class="clearfix">
<li>
<div class="boxall" style="height: 2.7rem">
<div class="alltitle">生意参谋</div>
<div class="sycm">
<ul class="clearfix">
<li><h2>1824</h2><span>今日销售额</span></li>
<li><h2>1920</h2><span>昨日销售额</span></li>
<li><h2>19%</h2><span>环比增长</span></li>
</ul>
<div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
<ul class="clearfix">
<li><h2>1824</h2><span>今日销售额</span></li>
<li><h2>1920</h2><span>昨日销售额</span></li>
<li><h2>19%</h2><span>环比增长</span></li>
</ul>
</div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 2.65rem">
<div class="alltitle">消费占比</div>
<div class="sy" id="echarts1" _echarts_instance_="ec_1648166661136" style="-webkit-tap-highlight-color: transparent; user-select: none;"><div style="position: relative; overflow: hidden; width: 96px; height: 141px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="144" height="211" style="position: absolute; left: 0px; top: 0px; width: 96px; height: 141px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div>
<div class="sy" id="echarts2" _echarts_instance_="ec_1648166661138" style="-webkit-tap-highlight-color: transparent; user-select: none;"><div style="position: relative; overflow: hidden; width: 96px; height: 141px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="144" height="211" style="position: absolute; left: 0px; top: 0px; width: 96px; height: 141px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div>
<div class="sy" id="echarts3" _echarts_instance_="ec_1648166661137" style="-webkit-tap-highlight-color: transparent; user-select: none;"><div style="position: relative; overflow: hidden; width: 96px; height: 141px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="144" height="211" style="position: absolute; left: 0px; top: 0px; width: 96px; height: 141px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 2.95rem">
<div class="alltitle">行业区分比例</div>
<div id="echarts4" style="height: 2.2rem; width: 100%; -webkit-tap-highlight-color: transparent; user-select: none;" _echarts_instance_="ec_1648166661139"><div style="position: relative; overflow: hidden; width: 291px; height: 141px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="436" height="211" style="position: absolute; left: 0px; top: 0px; width: 291px; height: 141px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div>
<div class="boxfoot"></div>
</div>
</li>
<li>
<div class="bar">
<div class="barbox">
<ul class="clearfix">
<li class="pulll_left counter">12581189</li>
<li class="pulll_left counter">3912410</li>
</ul>
</div>
<div class="barbox2">
<ul class="clearfix">
<li class="pulll_left">消费总金额</li>
<li class="pulll_left">消费总笔数</li>
</ul>
</div>
</div>
<div class="map">
<div class="map1"><img src="./index_files/lbx.png"></div>
<div class="map2"><img src="./index_files/jt.png"></div>
<div class="map3"><img src="./index_files/map.png"></div>
<div class="map4" id="map_1" _echarts_instance_="ec_1648166661132" style="-webkit-tap-highlight-color: transparent; user-select: none;"><div style="position: relative; overflow: hidden; width: 918px; height: 448px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"></div></div>
</div>
</li>
<li>
<div class="boxall" style="height:5.2rem">
<div class="alltitle">新增会员信息</div>
<div class="tabs">
<ul class="clearfix">
<li><a class="active" href="http://yuanbaoshuju.com/bigscreen/8/index.html#">7天</a></li>
<li><a href="http://yuanbaoshuju.com/bigscreen/8/index.html#">15天</a></li>
<li><a href="http://yuanbaoshuju.com/bigscreen/8/index.html#">30天</a></li>
</ul>
</div>
<div class="clearfix">
<div class="sy" id="echarts6" _echarts_instance_="ec_1648166661133" style="-webkit-tap-highlight-color: transparent; user-select: none;"><div style="position: relative; overflow: hidden; width: 96px; height: 141px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="144" height="211" style="position: absolute; left: 0px; top: 0px; width: 96px; height: 141px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div>
<div class="sy" id="echarts7" _echarts_instance_="ec_1648166661134" style="-webkit-tap-highlight-color: transparent; user-select: none;"><div style="position: relative; overflow: hidden; width: 96px; height: 141px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="144" height="211" style="position: absolute; left: 0px; top: 0px; width: 96px; height: 141px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div>
<div class="sy" id="echarts8" _echarts_instance_="ec_1648166661135" style="-webkit-tap-highlight-color: transparent; user-select: none;"><div style="position: relative; overflow: hidden; width: 96px; height: 141px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="144" height="211" style="position: absolute; left: 0px; top: 0px; width: 96px; height: 141px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div>
HTML+CSS+JS数据可视化大屏平台模板实例1
版权申诉
5星 · 超过95%的资源 104 浏览量
2022-03-25
08:25:33
上传
评论 1
收藏 1.18MB RAR 举报 
HTML+CSS+JS数据可视化大屏平台模板实例1.rar （17个子文件） 
HTML+CSS+JS数据可视化大屏平台模板实例1 index_files 
weather.png 2KB
echarts.min.js 2.3MB map.png 302KB jquery.countup.min.js 1KB logo.png 6KB js.js 308B comon0.css 7KB
head.jpg 3KB
loading.gif 701B jquery.js 82KB lbx.png 81KB china.js 117KB jt.png 72KB jquery.waypoints.min.js 9KB area_echarts.js 11KB
index.html 22KB HTML+CSS+JS数据可视化大屏平台模板实例1.JPG 236KB
- 1
- 2
- 3
前往页