1137 lines
32 KiB
Plaintext
1137 lines
32 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8"%>
|
||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>NTC-DYNAMICINDEX</title>
|
||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/common.css">
|
||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/data_text.css">
|
||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
||
<script src="${pageContext.request.contextPath}/static/pages/scripts/dashboard.js"></script>
|
||
|
||
<!--[if lt IE 9]>
|
||
<script src="js/html5shiv.min.js"></script>
|
||
<script src="js/respond.min.js"></script>
|
||
<![endif]-->
|
||
<!-- 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">
|
||
/*滚动条样式*/
|
||
body::-webkit-scrollbar {/*滚动条整体样式*/
|
||
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
|
||
height: 10px;
|
||
}
|
||
body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
|
||
border-radius: 5px;
|
||
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||
background: rgba(228,230,233,0.2);
|
||
}
|
||
body::-webkit-scrollbar-track {/*滚动条里面轨道*/
|
||
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||
border-radius: 0;
|
||
background: rgba(0,0,0,0.1);
|
||
}
|
||
body::-webkit-scrollbar-corner{
|
||
width: 0px;
|
||
height: 0px;
|
||
background: rgba(255,255,255,0);
|
||
}
|
||
|
||
.row{
|
||
margin-left: 0px;
|
||
margin-right: 0px;
|
||
}
|
||
.col-sm-1 ,.col-sm-2 ,.col-sm-3 ,.col-sm-4 ,.col-sm-5 ,.col-sm-6 ,.col-sm-7 ,.col-sm-8,.col-sm-12{
|
||
margin: 0px;
|
||
padding: 0px;
|
||
}
|
||
body{
|
||
/* height:864px; */
|
||
height:582px;
|
||
width:1490px;
|
||
background-color:#181818;
|
||
|
||
}
|
||
.main-container:after{
|
||
background-color:rgba(255,255,255,0);
|
||
}
|
||
.main-container{
|
||
height:100%;
|
||
width:100%;
|
||
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/main/two/main_back.png");
|
||
background-repeat:no-repeat;
|
||
background-size:100% 100%;
|
||
}
|
||
.main-container-inner{
|
||
height: 100%;
|
||
|
||
}
|
||
|
||
/*底图全 */
|
||
.main_dcqt{
|
||
width: 100%;
|
||
position: absolute;
|
||
top:0%;
|
||
left: 0%;
|
||
z-index: 0;
|
||
}
|
||
|
||
|
||
/*齿轮速率*/
|
||
.ring {
|
||
animation: spin 10s linear infinite;
|
||
transfrom-origin: center center;
|
||
}
|
||
.ring2 {
|
||
animation: spin 8s linear infinite;
|
||
transfrom-origin: center center;
|
||
}
|
||
.ring3 {
|
||
animation: spin 6s linear infinite;
|
||
transfrom-origin: center center;
|
||
}
|
||
.ring4 {
|
||
animation: spin 4s linear infinite;
|
||
transfrom-origin: center center;
|
||
}
|
||
|
||
|
||
@-webkit-keyframes spin {
|
||
0% {
|
||
-webkit-transform: rotateZ(0);
|
||
transform: rotateZ(0)
|
||
}
|
||
100% {
|
||
-webkit-transform: rotateZ(360deg);
|
||
transform: rotateZ(360deg)
|
||
}
|
||
}
|
||
|
||
.clbox{
|
||
position: absolute;
|
||
top: 12%;
|
||
left: 4%;
|
||
width: 99%;
|
||
|
||
}
|
||
|
||
/* 齿轮1 */
|
||
.cl_protocol{
|
||
position: absolute;
|
||
/*border:1px solid red;*/
|
||
width:260px;
|
||
height:260px;
|
||
transform-style: preserve-3d;
|
||
-webkit-transform:rotateX(30deg) rotateY(50deg) rotateZ(50deg);
|
||
margin-top: 19%;
|
||
left: 1%;
|
||
z-index: 20;
|
||
}
|
||
|
||
.cl_protocol_back{
|
||
position: absolute;
|
||
/*border:1px solid red;*/
|
||
width:260px;
|
||
height:260px;
|
||
transform-style: preserve-3d;
|
||
-webkit-transform:rotateX(32deg) rotateY(50deg) rotateZ(6deg);
|
||
margin-top: 13%;
|
||
left: 0%;
|
||
z-index: 19;
|
||
}
|
||
/* 齿轮2 */
|
||
.cl_app{
|
||
position: absolute;
|
||
/*border:1px solid red;*/
|
||
width:260px;
|
||
height:260px;
|
||
transform-style: preserve-3d;
|
||
-webkit-transform:rotateX(30deg) rotateY(50deg) rotateZ(20deg);
|
||
margin-top: 10%;
|
||
left: 7%;
|
||
z-index: 18;
|
||
}
|
||
|
||
.cl_app_back{
|
||
position: absolute;
|
||
/*border:1px solid red;*/
|
||
width:260px;
|
||
height:260px;
|
||
transform-style: preserve-3d;
|
||
-webkit-transform:rotateX(23deg) rotateY(50deg) rotateZ(20deg);
|
||
margin-top: 7%;
|
||
left: 8%;
|
||
z-index: 17;
|
||
}
|
||
/* 齿轮3 */
|
||
.cl_document{
|
||
position: absolute;
|
||
/*border:1px solid red;*/
|
||
width:260px;
|
||
height:260px;
|
||
transform-style: preserve-3d;
|
||
-webkit-transform:rotateX(30deg) rotateY(50deg) rotateZ(20deg);
|
||
margin-top: 7%;
|
||
left: 18%;
|
||
z-index: 16;
|
||
}
|
||
|
||
.cl_document_back{
|
||
position: absolute;
|
||
/*border:1px solid red;*/
|
||
width:260px;
|
||
height:260px;
|
||
transform-style: preserve-3d;
|
||
-webkit-transform:rotateX(23deg) rotateY(50deg) rotateZ(20deg);
|
||
margin-top: 3%;
|
||
left: 18%;
|
||
z-index: 15;
|
||
}
|
||
/* 齿轮4 */
|
||
.cl_medal{
|
||
position: absolute;
|
||
/*border:1px solid red;*/
|
||
width:260px;
|
||
height:260px;
|
||
transform-style: preserve-3d;
|
||
-webkit-transform:rotateX(30deg) rotateY(50deg) rotateZ(20deg);
|
||
margin-top: 0%;
|
||
left: 24%;
|
||
z-index: 14;
|
||
}
|
||
|
||
.cl_medal_back{
|
||
position: absolute;
|
||
width:260px;
|
||
height:260px;
|
||
transform-style: preserve-3d;
|
||
-webkit-transform:rotateX(23deg) rotateY(50deg) rotateZ(20deg);
|
||
margin-top: -3%;
|
||
left: 25%;
|
||
z-index: 13;
|
||
}
|
||
/* 罩子 */
|
||
.main_zz{
|
||
position: absolute;
|
||
z-index: 21;
|
||
left: 0%;
|
||
top: 0%;
|
||
}
|
||
/* 流量折线 */
|
||
.box_chart_flow{
|
||
position:relative;
|
||
width: 240px;
|
||
left: 40%;
|
||
top: 420px;
|
||
}
|
||
|
||
#ntc_flow{
|
||
height: 200px;
|
||
-webkit-transform: rotate(30deg) skewX(29deg);
|
||
}
|
||
/* 日志 */
|
||
.box_log_bar{
|
||
position:absolute;
|
||
width: 260px;
|
||
top: 188px;
|
||
left: 12%;
|
||
z-index: 22;
|
||
}
|
||
#ntc_log_bar{
|
||
height: 160px;
|
||
-webkit-transform: rotate(30deg) skewX(28deg);
|
||
}
|
||
/* 入流 */
|
||
.linesFlow_css{
|
||
position: relative;
|
||
top: -71%;
|
||
width: 100%;
|
||
}
|
||
/* 数字 */
|
||
.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(static/numbergd/images/num-bg1.png) no-repeat;}
|
||
#dataNums{
|
||
position: relative;
|
||
top: 5%;
|
||
left: -41%;
|
||
}
|
||
/* 杂质动态 */
|
||
.zzdt{
|
||
position: absolute;
|
||
top: 297px;
|
||
left: 54.2%;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!--content开始-->
|
||
<!-- <div class="data_content"> -->
|
||
<!--header开始-->
|
||
<!--<div class="header">-->
|
||
|
||
<!-- </div> -->
|
||
<!-- </div> -->
|
||
<!-- container-fiuled bootstrap全屏 -->
|
||
<div class="main-container" id="main-container">
|
||
<div class="main-container-inner">
|
||
<!-- <div class="main_qftd">
|
||
<img alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/two/main_qtd.png" >
|
||
</div> -->
|
||
<!-- 底图 -->
|
||
<div class="main_dcqt">
|
||
<img alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/two/dizuo.png" style="width: 100%">
|
||
</div>
|
||
<!-- 罩子 -->
|
||
<div class="main_zz">
|
||
<img alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/two/gaizi.png" style="width: 100%">
|
||
</div>
|
||
<!-- 杂质动态 -->
|
||
<div class="zzdt">
|
||
<img alt="" src="${pageContext.request.contextPath}/static/login/assets/gif/zzdt.gif">
|
||
</div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-5" style="height: 100%">
|
||
<div class="clbox">
|
||
<!-- 齿轮1 -->
|
||
<div class="cl_protocol">
|
||
<img class="ring" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/protocol.png">
|
||
</div>
|
||
<div class="cl_protocol_back">
|
||
<img class="ring" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/cl_b.png" >
|
||
</div>
|
||
<!-- 齿轮2 -->
|
||
<div class="cl_app">
|
||
<img class="ring2" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/app.png">
|
||
</div>
|
||
<div class="cl_app_back">
|
||
<img class="ring2" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/cl_b.png" >
|
||
</div>
|
||
<!-- 齿轮3 -->
|
||
<div class="cl_document">
|
||
<img class="ring3" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/docunment.png">
|
||
</div>
|
||
<div class="cl_document_back">
|
||
<img class="ring3" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/cl_b.png" >
|
||
</div>
|
||
<!-- 齿轮4 -->
|
||
<div class="cl_medal">
|
||
<img class="ring4" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/multmedia.png">
|
||
</div>
|
||
<div class="cl_medal_back">
|
||
<img class="ring4" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/cl_b.png" >
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-1" style="height: 100%">
|
||
<!-- 数据流出 -->
|
||
<div style="margin-left: -187px;margin-top: 11%;">
|
||
<div id="linesFlow_chu" style="height: 260px;"></div>
|
||
</div>
|
||
<div id="dataNums" ></div>
|
||
</div>
|
||
<div class="col-sm-3" style="height: 100%">
|
||
<div class="box_log_bar">
|
||
<div id="ntc_log_bar">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 数据流 -->
|
||
<div class="linesFlow_css">
|
||
<div id="linesFlow" style="height: 490px;"></div>
|
||
</div>
|
||
</div><!-- /.main-container-inner -->
|
||
</div><!-- /.main-container -->
|
||
<!-- basic scripts -->
|
||
<script type="text/javascript">
|
||
window.jQuery || document.write("<script src='static/assets/js/jquery-2.0.3.min.js'>"+"<"+"script>");
|
||
</script>
|
||
<script type="text/javascript">
|
||
if("ontouchend" in document) document.write("<script src='static/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">
|
||
var bodyHeight = window.screen.height;
|
||
|
||
/* 流量折线图 */
|
||
var myChart = echarts.init(document.getElementById('ntc_flow'));
|
||
var log_bar_Chart = echarts.init(document.getElementById('ntc_log_bar'));
|
||
var lines_Chart = echarts.init(document.getElementById('linesFlow'));
|
||
var lines_Chart_chu = echarts.init(document.getElementById('linesFlow_chu'));
|
||
|
||
// 颜色
|
||
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() * 100;
|
||
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
|
||
},
|
||
grid:{
|
||
left: 50,
|
||
},
|
||
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);
|
||
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 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'
|
||
}
|
||
},
|
||
}],
|
||
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',
|
||
barWidth:15,
|
||
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%',
|
||
zlevel: 11
|
||
}]
|
||
};
|
||
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);
|
||
|
||
/* 数据流 */
|
||
var lines = [
|
||
{
|
||
coords: [
|
||
[46, 600],
|
||
[830, 864]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[30, 600],
|
||
[830, 864]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[100, 500],
|
||
[800, 814]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[100, 500],
|
||
[800, 814]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[150, 500],
|
||
[830, 864]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#d29781'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[111, 566],
|
||
[830, 864]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#d29781'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[247, 193],
|
||
[830, 804]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#ebf546'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[10, 300],
|
||
[830, 804]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#ebf546'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[10, 400],
|
||
[830, 804]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#d29781'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[60, 400],
|
||
[830, 804]
|
||
],
|
||
effect: {
|
||
period: 2,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[160, 200],
|
||
[830, 804]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[160, 300],
|
||
[830, 804]
|
||
],
|
||
effect: {
|
||
period: 2,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
|
||
]
|
||
|
||
var line_option = {
|
||
backgroundColor: 'rgba(255,255,255,0)',
|
||
grid:{
|
||
top: 10,
|
||
bottom: 10,
|
||
left: 10,
|
||
right: 10,
|
||
width: 682,
|
||
height: 595,
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
min: 0,
|
||
max: 1000,
|
||
position: 'top',
|
||
axisPointer: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: {
|
||
show: false,
|
||
min: 0,
|
||
max: 1000,
|
||
axisPointer: {
|
||
show: false
|
||
}
|
||
},
|
||
|
||
// 线条动画
|
||
series: [
|
||
{
|
||
type: 'lines',
|
||
coordinateSystem: 'cartesian2d',
|
||
zlevel: 1,
|
||
|
||
// 动画效果
|
||
effect: {
|
||
show: true,
|
||
period: 4, //特效动画的时间，单位为 s
|
||
trailLength: 0.5, //特效尾迹的长度。0~1数值越大尾迹越长
|
||
//color: '#d29781',
|
||
symbolSize: 6
|
||
},
|
||
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#BF3EFF',
|
||
width: 0,
|
||
curveness: 0
|
||
}
|
||
},
|
||
data: lines
|
||
}
|
||
],
|
||
};
|
||
lines_Chart.setOption(line_option);
|
||
/* 数据流出 */
|
||
var lines_chu = [
|
||
|
||
/* 出端 */
|
||
{
|
||
coords: [
|
||
[1, 801],
|
||
[243,968]
|
||
],
|
||
effect: {
|
||
period: 1,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[23,756],
|
||
[215, 878]
|
||
],
|
||
effect: {
|
||
period: 0.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[0, 764],
|
||
[343,968]
|
||
],
|
||
effect: {
|
||
period: 1,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[2, 701],
|
||
[363,968]
|
||
],
|
||
effect: {
|
||
period: 1,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[24, 653],
|
||
[332, 912]
|
||
],
|
||
effect: {
|
||
period: 1,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[24, 603],
|
||
[384, 873]
|
||
],
|
||
effect: {
|
||
period: 1,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[24, 553],
|
||
[368, 781]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[24, 553],
|
||
[337, 779]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
coords: [
|
||
[24, 453],
|
||
[338, 727]
|
||
],
|
||
effect: {
|
||
period: 1.5,
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#119dd8'
|
||
}
|
||
}
|
||
},
|
||
|
||
]
|
||
|
||
var line_chu_option = {
|
||
backgroundColor: 'rgba(255,255,255,0)',
|
||
grid:{
|
||
top: 10,
|
||
bottom: 10,
|
||
left: 10,
|
||
right: 10,
|
||
width: 682,
|
||
height: 595,
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
min: 0,
|
||
max: 1000,
|
||
position: 'top',
|
||
axisPointer: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: {
|
||
show: false,
|
||
min: 0,
|
||
max: 1000,
|
||
axisPointer: {
|
||
show: false
|
||
}
|
||
},
|
||
|
||
// 线条动画
|
||
series: [
|
||
{
|
||
type: 'lines',
|
||
coordinateSystem: 'cartesian2d',
|
||
zlevel: 1,
|
||
|
||
// 动画效果
|
||
effect: {
|
||
show: true,
|
||
period: 4, //特效动画的时间，单位为 s
|
||
trailLength: 0.5, //特效尾迹的长度。0~1数值越大尾迹越长
|
||
//color: '#d29781',
|
||
symbolSize: 6
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#BF3EFF',
|
||
width: 0,
|
||
curveness: 0
|
||
}
|
||
},
|
||
data: lines_chu
|
||
}
|
||
],
|
||
};
|
||
lines_Chart_chu.setOption(line_chu_option);
|
||
</script>
|
||
</body>
|
||
</html> |