<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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="mainbox">
<ul class="clearfix">
<li>
<div class="logo1"><img src="images/logo1.png"><span>可视化大数据用户案例</span></div>
<div class="boxall" style="height: 2.2rem">
<div class="alltitle">今日实时充值总额<span>real-time</span></div>
<div class="boxnav">
<p> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>0</span> <i> 元</i> </p>
</div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.3rem">
<div class="alltitle">当日收入<span>income</span></div>
<div id="echarts1" class="chartbox"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.4rem">
<p class="pth"> <span>序号</span> <span>地区</span> <span>充值金额</span> <span>时间</span> </p>
<div class="wrap">
<ul>
<li>
<p> <span><i>1</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p>
</li>
<li>
<p> <span><i>2</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p>
</li>
<li>
<p> <span><i>3</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p>
</li>
<li>
<p> <span><i>4</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p>
</li>
<li>
<p> <span><i>5</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p>
</li>
<li>
<p> <span><i>6</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p>
</li>
<li>
<p> <span><i>7</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p>
</li>
<li>
<p> <span><i>8</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p>
</li>
<li>
<p> <span><i>9</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p>
</li>
<li>
<p> <span><i>10</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p>
</li>
</ul>
</div>
<div class="boxfoot"></div>
</div>
</li>
<li>
<div class="logo2"><img src="images/logo.png" style="opacity: "></div>
<!-- <div class="map" id="map_1"> </div> -->
</li>
<li>
<div class="logo3">
<div class="time pulll_left"><img src="images/clock.png"><span>2018-07-28 02:40:03</span></div>
</div>
<div class="boxall" style="height:2.2rem">
<div class="alltitle">转化率<span>real-time</span></div>
<div class="boxfoot"></div>
<div class="zhl clearfix">
<div class="zhlbg" style="width: 65%"></div>
<div class="zhltip">65%</div>
</div>
</div>
<div class="boxall" style="height:3.3rem">
<div class="alltitle">实时在线<span>real-time</span></div>
<div class="boxfoot"></div>
<div class="chartbox" id="echarts3"></div>
</div>
<div class="boxall" style="height:3.4rem">
<div class="alltitle">新增用户<span>new user</span></div>
<div class="boxfoot"></div>
<div class="chartbox" id="echarts2"></div>
</div>
</li>
</ul>
<div class="copyright">版权所有：xxxx网络科技有限公司 粤ICP备15039551-4</div>
</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 src="js/jquery.liMarquee.js"></script>
<script>
$(function(){
$('.wrap').liMarquee({
direction: 'up',//身上滚动
runshort: false,//内容不足时不滚动
scrollamount: 20//速度
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart.resize();
})
window.addEventListener("resize", function () {
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart.resize();
});
</script>
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('echarts1'));
option1 = {
// backgroundColor: '#00265f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['昨日', '今日'],
align: 'right',
right: '40%',
bottom:'3%',
textStyle: {
color: "#fff"
},
itemWidth: 10,
itemHeight: 10,
itemGap: 35
},
grid: {
left: '0%',
top: '0%',
right: '0%',
bottom: '15%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['00',
'01',
'02',
'03',
'04',
'05',
'06',
'07',
'08',
'09',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23'
],
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
// rotate:50,
show: true,
splitNumber: 15,
textStyle: {
fontFamily: "微软雅黑",
color: "rgba(255,255,255,.6)",
fontSize: '120%',
},
},
}],
yAxis: [{
type: 'value',
axisLabel: {
//formatter: '{value} %'
show:false,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1 )",
width: 1,
type: "solid"
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
}
}
}],
series: [{
name: '昨日',
type: 'bar',
data: [20, 22, 25, 36, 35, 21, 19, 26, 27, 26, 28, 30, 38, 44, 48, 59, 64, 69, 68, 72, 80, 70, 49, 32],
barWidth:'25%', //柱子宽度
// barGap: 1, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3ca1ff'
}, {
offset: 1,
color: '#0a73d5'
}]),
opacity: 1,
barBorderRadius: 50,
}
}
}, {
name: '今日',
type: 'bar',
data: [23, 26, 21, 32, 31, 26, 29, 20, 22, 29, 30, 34, 40, 48, 42, 53, 61, 62, 64, 71, 72, 73, 41, 30], barWidth:'25%',
// barGap: 1,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
co
基于ECharts可视化大数据用户案例可视化大屏源码.rar （17个子文件） 
基于ECharts可视化大数据用户案例可视化大屏源码 js 
jquery.countup.min.js 1KB jquery.waypoints.min.js 9KB js.js 303B china.js 117KB echarts.min.js 2.3MB jquery.js 82KB jquery.liMarquee.js 35KB css comon0.css 6KB
index.html 18KB images 
logo1.png 14KB
loading.gif 701B logo.png 507KB hm.gif 43B clock.png 551B linebg.png 708B
bg.jpg 93KB animate.gif 48KB资源评论
