562 lines
16 KiB
Plaintext
562 lines
16 KiB
Plaintext
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|||
|
|
pageEncoding="UTF-8"%>
|
|||
|
|
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<title>NTC</title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<!-- basic styles -->
|
|||
|
|
<link href="${pageContext.request.contextPath}/static/login/assets/css/bootstrap.min.css" rel="stylesheet" />
|
|||
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/login/assets/css/font-awesome.min.css" />
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/login/assets/css/ace.min.css" />
|
|||
|
|
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/login/assets/css/ace-rtl.min.css" />
|
|||
|
|
<!-- 数字特效 -->
|
|||
|
|
<link href="${pageContext.request.contextPath}/static/login/numbergd/css/globle.css" rel="stylesheet">
|
|||
|
|
<!-- 数字特效 -->
|
|||
|
|
|
|||
|
|
<style type="text/css">
|
|||
|
|
|
|||
|
|
.row{
|
|||
|
|
margin-left: 0px;
|
|||
|
|
margin-right: 0px;
|
|||
|
|
}
|
|||
|
|
body{
|
|||
|
|
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/main/back.png");
|
|||
|
|
background-repeat:no-repeat;
|
|||
|
|
background-color:#181818;
|
|||
|
|
-moz-background-size:100% 100%;
|
|||
|
|
/* min-width: 1920px;
|
|||
|
|
min-height: 1000px; */
|
|||
|
|
}
|
|||
|
|
.page-sidebar-closed{
|
|||
|
|
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/main/back.png");
|
|||
|
|
background-repeat:no-repeat;
|
|||
|
|
background-color:#181818;
|
|||
|
|
-moz-background-size:100% 100%;
|
|||
|
|
/* min-width: 1920px;
|
|||
|
|
min-height: 1000px; */
|
|||
|
|
}
|
|||
|
|
.main-container:after{
|
|||
|
|
background-color:rgba(255,255,255,0);
|
|||
|
|
}
|
|||
|
|
.main-container{
|
|||
|
|
padding: 40px 0px;
|
|||
|
|
}
|
|||
|
|
.main-container-inner{
|
|||
|
|
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/main/main_03.png");
|
|||
|
|
background-repeat:no-repeat;
|
|||
|
|
background-size:100% 100%;
|
|||
|
|
-moz-background-size:100% 100%;
|
|||
|
|
width: 1890px;
|
|||
|
|
height: 976px;
|
|||
|
|
}
|
|||
|
|
.box_chart_flow{
|
|||
|
|
position:relative;
|
|||
|
|
width: 290px;
|
|||
|
|
left: 17%;
|
|||
|
|
top: 57%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#ntc_flow{
|
|||
|
|
height: 250px;
|
|||
|
|
-webkit-transform: rotate(28deg) skewX(28deg);
|
|||
|
|
}
|
|||
|
|
.flow_gif{
|
|||
|
|
position:absolute;
|
|||
|
|
z-index: 12;
|
|||
|
|
top: -238%;
|
|||
|
|
left: -57%;
|
|||
|
|
width: 1900px;
|
|||
|
|
height: 1000px;
|
|||
|
|
}
|
|||
|
|
.rubbish_gif{
|
|||
|
|
position:absolute;
|
|||
|
|
z-index: 12;
|
|||
|
|
top: -237%;
|
|||
|
|
left: -51%;
|
|||
|
|
width: 1900px;
|
|||
|
|
height: 1000px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dataNums .tt span{width:100%;height:100%; font:bold 24px/75px "Arial";color:#ddf0ff;}
|
|||
|
|
.dataNums .dataOne{ width:24px; height:54px; margin: 0px -4px; text-align: center; background: url(${pageContext.request.contextPath}/static/login/numbergd/images/num-bg1.png) no-repeat;}
|
|||
|
|
|
|||
|
|
.box_log_bar{
|
|||
|
|
position:relative;
|
|||
|
|
width: 260px;
|
|||
|
|
top: 24%;
|
|||
|
|
left: 30%;
|
|||
|
|
}
|
|||
|
|
#ntc_log_bar{
|
|||
|
|
height: 160px;
|
|||
|
|
-webkit-transform: rotate(28deg) skewX(28deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body id="body_back">
|
|||
|
|
<div class="main-container" id="main-container">
|
|||
|
|
<div class="main-container-inner">
|
|||
|
|
<div class="row" style="height: 100%;">
|
|||
|
|
<div class="col-sm-12" style="height: 100%;">
|
|||
|
|
<div class="col-sm-3" style="height: 100%;">
|
|||
|
|
<div class="box_chart_flow">
|
|||
|
|
<div id="ntc_flow">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<%-- <img alt="流量" class="flow_gif" src="${pageContext.request.contextPath}/static/login/assets/gif/flow.gif">
|
|||
|
|
<img alt="rubbish" class="rubbish_gif" src="${pageContext.request.contextPath}/static/login/assets/gif/rubbish.gif">
|
|||
|
|
--%>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-4"></div>
|
|||
|
|
<div class="col-sm-2">
|
|||
|
|
<div style="font-size: 14px;color:#fff; position: absolute;top: 48.8%;left: 70%;display: none;">条</div>
|
|||
|
|
<div id="dataNums" style="margin-top: 285%; margin-left: 17px;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-3" style="height: 100%;">
|
|||
|
|
<div class="row" style="height: 100%;">
|
|||
|
|
<div class="col-sm-12" style="height: 100%;">
|
|||
|
|
<div class="box_log_bar">
|
|||
|
|
<div id="ntc_log_bar">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="col-sm-6">
|
|||
|
|
<div class="box_log_pie">
|
|||
|
|
<div id="ntc_log_pie">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div><!-- /.main-container-inner -->
|
|||
|
|
</div><!-- /.main-container -->
|
|||
|
|
<!-- basic scripts -->
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
window.jQuery || document.write("<script src='${pageContext.request.contextPath}/static/login/assets/js/jquery-2.0.3.min.js'>"+"<"+"script>");
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
if("ontouchend" in document) document.write("<script src='${pageContext.request.contextPath}/static/login/assets/js/jquery.mobile.custom.min.js'>"+"<"+"script>");
|
|||
|
|
</script>
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/assets/js/bootstrap.min.js"></script>
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/assets/js/typeahead-bs2.min.js"></script>
|
|||
|
|
<!-- page specific plugin scripts -->
|
|||
|
|
<!--[if lte IE 8]>
|
|||
|
|
<script src="assets/js/excanvas.min.js"></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/assets/js/jquery.ui.touch-punch.min.js"></script>
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/assets/js/jquery.slimscroll.min.js"></script>
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/assets/js/jquery.easy-pie-chart.min.js"></script>
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/assets/js/jquery.sparkline.min.js"></script>
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/assets/js/flot/jquery.flot.min.js"></script>
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/assets/js/flot/jquery.flot.pie.min.js"></script>
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/assets/js/flot/jquery.flot.resize.min.js"></script>
|
|||
|
|
<!-- ace scripts -->
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/assets/js/ace-elements.min.js"></script>
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/assets/js/ace.min.js"></script>
|
|||
|
|
<!-- inline scripts related to this page -->
|
|||
|
|
<script src="${pageContext.request.contextPath}/static/login/echarts/echarts.min.js"></script>
|
|||
|
|
<!-- 数字特效 -->
|
|||
|
|
<script type="text/javascript" src="${pageContext.request.contextPath}/static/login/numbergd/js/index.js"></script>
|
|||
|
|
<!-- 数字特效 -->
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
$.ajax({
|
|||
|
|
url: '${ctx}/newIndex/ntcEntranceReport',
|
|||
|
|
type : "get" ,
|
|||
|
|
dataType:"json",
|
|||
|
|
cache:false,
|
|||
|
|
async:true,
|
|||
|
|
timeout:10000,//超时时间设置，查询接口时间过长超时
|
|||
|
|
success:function (rs) {
|
|||
|
|
$(rs).each(function(i, d) {
|
|||
|
|
var time=[];
|
|||
|
|
var resultData=[];
|
|||
|
|
time.push({
|
|||
|
|
x: d.reportTime,
|
|||
|
|
});
|
|||
|
|
resultData.push({
|
|||
|
|
name: "",
|
|||
|
|
y: d.sum,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
line();
|
|||
|
|
},
|
|||
|
|
complete:function(XMLHttpRequest,status){//超时设置
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
function line(time,resultData){
|
|||
|
|
setInterval(function() {
|
|||
|
|
|
|||
|
|
timeData.shift();
|
|||
|
|
timeData.push(timeSet(-1));
|
|||
|
|
|
|||
|
|
data.shift();
|
|||
|
|
data.push(randomData());
|
|||
|
|
|
|||
|
|
myChart.setOption({
|
|||
|
|
backgroundColor: "rgba(255,255,255,0)",
|
|||
|
|
xAxis: {
|
|||
|
|
data: timeData
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
|
|||
|
|
data: data
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
}, 5000);
|
|||
|
|
}
|
|||
|
|
/* 流量折线图 */
|
|||
|
|
var myChart = echarts.init(document.getElementById('ntc_flow'));
|
|||
|
|
var log_bar_Chart = echarts.init(document.getElementById('ntc_log_bar'));
|
|||
|
|
|
|||
|
|
// 颜色
|
|||
|
|
var lightBlue = {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(0, 192, 255, 1)' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(0, 192, 255, 0.1)' // 100% 处的颜色
|
|||
|
|
}],
|
|||
|
|
globalCoord: false // 缺省为 false
|
|||
|
|
}
|
|||
|
|
var darkBlue = {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(41, 121, 255, 1)' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(41, 121, 255, 0.1)' // 100% 处的颜色
|
|||
|
|
}],
|
|||
|
|
globalCoord: false // 缺省为 false
|
|||
|
|
}
|
|||
|
|
function randomData() {
|
|||
|
|
value = Math.random() * 1000;
|
|||
|
|
return {
|
|||
|
|
value: Math.round(value)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 时间设置
|
|||
|
|
function checkTime(i) {
|
|||
|
|
if (i < 10) {
|
|||
|
|
i = "0" + i;
|
|||
|
|
}
|
|||
|
|
return i;
|
|||
|
|
}
|
|||
|
|
function timeSet(i) {
|
|||
|
|
var newTime = new Date();
|
|||
|
|
var h = newTime.getHours(); ;
|
|||
|
|
var m = newTime.getMinutes();
|
|||
|
|
var s = newTime.getSeconds();
|
|||
|
|
if(i != -1){
|
|||
|
|
i = i +1;
|
|||
|
|
s = s - i*5;
|
|||
|
|
if(s<0){
|
|||
|
|
m = m - 1;
|
|||
|
|
s = 60 - Math.abs(s);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
h = checkTime(h);
|
|||
|
|
m = checkTime(m);
|
|||
|
|
s = checkTime(s);
|
|||
|
|
return [h, m].join(':')+"'"+s+"''";
|
|||
|
|
}
|
|||
|
|
var data = [];
|
|||
|
|
var timeData = [];
|
|||
|
|
|
|||
|
|
for (var i = 0; i < 5; i++) {
|
|||
|
|
timeData.unshift(timeSet(i));
|
|||
|
|
data.unshift(randomData());
|
|||
|
|
}
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
backgroundColor: "rgba(255,255,255,0)",
|
|||
|
|
tooltip: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: false,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#4bbbf8',
|
|||
|
|
shadowColor: 'rgba(75, 211, 255, 0.5)',
|
|||
|
|
shadowBlur: 5
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
axisLabel: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 12
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: timeData,
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
yAxis: [{
|
|||
|
|
|
|||
|
|
min: 0,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#4bbbf8',
|
|||
|
|
shadowColor: 'rgba(75, 211, 255, 0.5)',
|
|||
|
|
shadowBlur: 5
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: 'white',
|
|||
|
|
fontSize: 12
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(75, 211, 255, 0.5)',
|
|||
|
|
type: 'dashed'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
series: [{
|
|||
|
|
name: '数量',
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
|
|||
|
|
color: function(params) {
|
|||
|
|
return params.dataIndex % 2 ? darkBlue : lightBlue;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
areaStyle: { //区域填充样式
|
|||
|
|
normal: {
|
|||
|
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{ offset: 0, color: 'rgba(61,234,255, 0.9)'},
|
|||
|
|
{ offset: 0.7, color: 'rgba(61,234,255, 0)'}
|
|||
|
|
], false),
|
|||
|
|
|
|||
|
|
shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
|
|||
|
|
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
}],
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 日志柱状图 */
|
|||
|
|
var bar_option = {
|
|||
|
|
//color: ['#3398DB'],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
backgroundColor:'rgba(255,255,255,0.8)',
|
|||
|
|
extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
|
|||
|
|
textStyle:{
|
|||
|
|
color:'#6a717b',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '15%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
top:'15%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show:false,
|
|||
|
|
textStyle:{
|
|||
|
|
color:'#fff',
|
|||
|
|
},
|
|||
|
|
data: ['日志']
|
|||
|
|
},
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
|
|||
|
|
data: ['12时','11时','10时','09时','08时'],
|
|||
|
|
inverse: true,
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true,
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
margin: 5,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
color:'#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}, {
|
|||
|
|
type: 'category',
|
|||
|
|
data: [],
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false,
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(255,255,255,0)',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
}],
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
name: '',
|
|||
|
|
position:'top',
|
|||
|
|
max:8000000,
|
|||
|
|
axisLabel: {
|
|||
|
|
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
color:'#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: (value, index) => {
|
|||
|
|
return value/10000
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show:false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
backgroundColor: 'rgba(255,255,255,0)',
|
|||
|
|
series: [{
|
|||
|
|
name: '日志',
|
|||
|
|
type: 'bar',
|
|||
|
|
|
|||
|
|
data: [7827896, 7472072, 7433391, 7137253, 6382192],
|
|||
|
|
label: {
|
|||
|
|
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
formatter: (param) => {
|
|||
|
|
return (param.value/10000).toFixed(2);
|
|||
|
|
},
|
|||
|
|
position: 'insideRight',
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'white' //color of value
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#fac28f' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#fc867a' // 100% 处的颜色
|
|||
|
|
}], false),
|
|||
|
|
//barBorderRadius: [0,10,10,0],
|
|||
|
|
borderWidth: 10,
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
shadowBlur: 15,
|
|||
|
|
shadowColor: 'rgba(105,123, 214, 0.7)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
barWidth: '50%',
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
|
|||
|
|
type: 'bar',
|
|||
|
|
yAxisIndex: 1,
|
|||
|
|
// barGap: '-100%',
|
|||
|
|
data: [8000000, 8000000, 8000000, 8000000, 8000000],
|
|||
|
|
barWidth: 15,
|
|||
|
|
|
|||
|
|
itemStyle: {
|
|||
|
|
|
|||
|
|
color: 'rgba(255,255,255,0.2)',
|
|||
|
|
},
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
log_bar_Chart.setOption(bar_option);
|
|||
|
|
setInterval(function() {
|
|||
|
|
log_bar_Chart.clear();
|
|||
|
|
log_bar_Chart.setOption(bar_option);
|
|||
|
|
}, 5000);
|
|||
|
|
|
|||
|
|
/* 数字特效 */
|
|||
|
|
function animalNum(){
|
|||
|
|
var value = rand(100,999);;
|
|||
|
|
|
|||
|
|
$("#dataNums").rollNum({
|
|||
|
|
deVal:value
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function rand(min,max) {
|
|||
|
|
return Math.floor(Math.random()*(max-min))+min;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
animalNum();
|
|||
|
|
setInterval('animalNum()',5000);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|