<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/comon0.css">
</head>
<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>
<body>
<div class="loading">
<div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
</div>
<div class="head">
<h1><img src="picture/logo.png">公司名称大数据可视化平台</h1>
<div class="weather"><img src="picture/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"></div>
<div class="sy" id="echarts2"></div>
<div class="sy" id="echarts3"></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%;"></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="picture/lbx.png"></div>
<div class="map2"><img src="picture/jt.png"></div>
<div class="map3"><img src="picture/map.png"></div>
<div class="map4" id="map_1"></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="#">7天</a></li>
<li><a href="#">15天</a></li>
<li><a href="#">30天</a></li>
</ul>
</div>
<div class="clearfix">
<div class="sy" id="echarts6"></div>
<div class="sy" id="echarts7"></div>
<div class="sy" id="echarts8"></div>
</div>
<div class="addnew">
<div class="tit02"><span>今日新增会员列表</span></div>
<div class="adduser">
<ul class="clearfix">
<li class="clearfix"> <span class="pulll_left"><img src="picture/head.jpg">1今日新增会员列表</span> <span class="pulll_right">24岁 - 女 - 广州 </span> </li>
<li class="clearfix"> <span class="pulll_left"><img src="picture/head.jpg">2今日新增会员列表</span> <span class="pulll_right">24岁 - 女 - 广州 </span> </li>
<li class="clearfix"> <span class="pulll_left"><img src="picture/head.jpg">3今日新增会员列表</span> <span class="pulll_right">24岁 - 女 - 广州 </span> </li>
<li class="clearfix"> <span class="pulll_left"><img src="picture/head.jpg">4今日新增会员列表</span> <span class="pulll_right">24岁 - 女 - 广州 </span> </li>
</ul>
</div>
</div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.4rem">
<div class="alltitle">实时消费记录</div>
<div class="wrap">
<ul>
<li>
<p>1李东梁-支付宝支付-120元-XXX门店</p>
</li>
<li>
<p>2李东梁-支付宝支付-120元-XXX门店</p>
</li>
<li>
<p>3李东梁-支付宝支付-120元-XXX门店</p>
</li>
<li>
<p>4李东梁-支付宝支付-120元-XXX门店</p>
</li>
<li>
<p>5李东梁-支付宝支付-120元-XXX门店</p>
</li>
<li>
<p>6李东梁-支付宝支付-120元-XXX门店</p>
</li>
</ul>
</div>
<div class="boxfoot"></div>
</div>
</li>
</ul>
</div>
<div class="back"></div>
<script language="JavaScript" src="js/js.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/area_echarts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart6.resize();
myChart7.resize();
myChart8.resize();
})
window.addEventListener("resize", function () {
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart6.resize();
myChart7.resize();
myChart8.resize();
});
</script>
<script type="text/javascript">
var v0=1000//总
var v1=353//
var v2=178//
var v3=68//新增
var myChart6 = echarts.init(document.getElementById('echarts6'));
option6 = {
series: [{
type: 'pie',
radius: ['70%', '80%'],
color:'#0088cc',
label: {
normal: {
position: 'center'
}
},
data: [{
value: v1,
name: '新增会员',
label: {
normal: {
formatter: v1 +'',
textStyle: {
fontSize:20,
color:'#fff',
}
}
}
},
{
value: v0,
name: '老会员',
label: {
normal: {
formatter : function (params){
return '占比'+Math.round( v1/v0*100)+ '%'
},
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
};
var myChart7 = echarts.init(document.getElementById('echarts7'));
option7 = {
s
基于ECharts大数据可视化平台大屏源码.rar
版权申诉
116 浏览量
2023-08-15
15:33:41
上传
评论
收藏 1.11MB RAR 举报
基于ECharts大数据可视化平台大屏源码.rar （19个子文件） 
基于ECharts大数据可视化平台大屏源码 picture 
weather.png 2KB jt.png 72KB lbx.png 81KB
loading.gif 701B logo.png 6KB
head.jpg 3KB map.png 302KB js 
jquery.countup.min.js 1KB jquery.waypoints.min.js 9KB js.js 322B china.js 117KB echarts.min.js 2.3MB area_echarts.js 11KB jquery.js 82KB css comon0.css 7KB
index.html 16KB images line.png 4KB bg.jpg 252KB head_bg.png 8KB资源评论
五星资源
- 粉丝: 5526
- 资源: 1533
