前端数据展示 #33

Merged
ps249eph7 merged 1 commits from xumingyang_branch into master 5 months ago

File diff suppressed because one or more lines are too long

@ -0,0 +1,363 @@
@charset "UTF-8";
/* CSS Document */
.bg{
margin:0 auto;
width:100%;
min-height:100vh;
background:url(../images/bg2.jpg) no-repeat;
background-size: cover;
padding-top:0rem;
padding:0rem 0.2rem;
}
/*.conIn{
display:flex;
display: -webkit-flex;}*/
.title{
width:100%;
font-size:0.12rem;
line-height:0.3rem;
color:rgba(14,253,255,1);
text-align:center;
font-weight:bold;
}
.border_bg_leftTop{
position:absolute;
left:-0.008rem;
top:-0.04rem;
width:0.37rem;
height:0.05rem;
display:block;
background: url(../images/title_left_bg.png) no-repeat;
background-size:cover;}
.border_bg_rightTop{
position:absolute;
right:-0.01rem;
top:-0.01rem;
width:0.1rem;
height:0.1rem;
display:block;
background:url(../images/border_bg.jpg) no-repeat;
background-size:cover;}
.border_bg_leftBottom{
position:absolute;
left:-0.008rem;
bottom:-0.008rem;
width:0.1rem;
height:0.1rem;
display:block;
background:url(../images/border_bg.jpg) no-repeat;
background-size:cover;}
.border_bg_rightBottom{
position:absolute;
right:-0.01rem;
bottom:-0.01rem;
width:0.08rem;
height:0.08rem;
display:block;
background:url(../images/title_right_bg.png) no-repeat;
background-size:cover;}
.leftMain{
width:75%;
float:left;
padding-right:0.1rem;
padding-top:0.1rem;
}
.rightMain{
width:25%;
float:left;
padding-top:0.1rem;}
.leftMain_top{
width:100%;
padding-bottom:0.1rem;}
.leftMain_top ul{
display:flex;
display: -webkit-flex;
}
.leftMain_top ul li{
float:left;
width:25%;
padding-right:0.1rem;}
.leftMain_top ul li:last-child{
padding:0;}
.leftMain_top ul li .liIn{
border:0.008rem solid rgba(14,253,255,0.5);
width:100%;
min-height:60px;
position:relative;
padding:0.08rem 0.05rem;
}
.leftMain_top ul li .liIn h3{
font-size:0.08rem;
color:#fff;
margin-bottom:0.05rem;
}
.leftMain_top ul li .liIn .shu{
font-size:0.12rem;
color:rgba(14,253,255,1);
font-family:dig;
margin-bottom:0.02rem;}
.leftMain_top ul li .liIn .shu i{
font-size:0.04rem;
margin-left:0.06rem;
font-style:normal;}
.leftMain_top ul li .liIn .zi{
font-size:0.04rem;
color:#fff;
position:relative;
z-index:10;}
.leftMain_top ul li .liIn .zi .span1{
margin-right:0.1rem;}
.leftMain_middle{
width:100%;
padding-bottom:0.1rem;
display:flex;
display: -webkit-flex;}
.leftMain_middle .leftMain_middle_left{
width:60%;
padding-right:0.1rem;}
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn{
border:0.008rem solid rgba(14,253,255,0.5);
width:100%;
min-height:60px;
position:relative;
padding:0.08rem 0.05rem;
}
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn h3{
font-size:0.08rem;
color:#fff;
margin-bottom:0.05rem;
}
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn .biaoge{
min-height:200px;}
.leftMain_middle .leftMain_middle_right{
width:40%;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn{
border:0.008rem solid rgba(14,253,255,0.5);
width:100%;
min-height:60px;
position:relative;
padding:0.08rem 0.05rem;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn h3{
font-size:0.08rem;
color:#fff;
margin-bottom:0.05rem;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge{
min-height:200px;}
/*左边中间部分排行榜*/
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai{
width:100%;
overflow:hidden;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn{
display:flex;
display: -webkit-flex;
align-items:center;
color:#fff;
font-size:0.06rem;
height:0.18rem;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left{
width:25%;
position:relative;
padding-left:0.14rem;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .bot{
width:0.08rem;
height:0.08rem;
background:#f78cf3;
border-radius:1000px;
display:block;
position:absolute;
left:0.02rem;
top:0;
bottom:0;
margin:auto 0;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_left .bot{
background:#e7feb8;}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn3 .liIn_left .bot{
background:#fdea8a;}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn4 .liIn_left .bot{
background:#8ff9f8;}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn5 .liIn_left .bot{
background:#d890fa;}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn6 .liIn_left .bot{
background:#05d1fc;}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi{
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line{
width:58%;
height:0.08rem;
background:rgba(255,255,255,0.5);
border-radius:2000px;}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn{
width:100%;
height:0.08rem;
background:#f78cf3;
border-radius:100px;
-webkit-animation: widthMove1 2s ease-in-out ;}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_line .line_lineIn{
background:#e7feb8;
-webkit-animation: widthMove2 2s ease-in-out ;}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn3 .liIn_line .line_lineIn{
background:#fdea8a;
-webkit-animation: widthMove3 2s ease-in-out ;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn4 .liIn_line .line_lineIn{
background:#8ff9f8;
-webkit-animation: widthMove4 2s ease-in-out ;}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn5 .liIn_line .line_lineIn{
background:#d890fa;
-webkit-animation: widthMove5 2s ease-in-out ;}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn6 .liIn_line .line_lineIn{
background:#05d1fc;
-webkit-animation: widthMove6 2s ease-in-out ;}
@-webkit-keyframes widthMove1 {
0% {width:0%; }
100% { width:98.5%; }
}
@-webkit-keyframes widthMove2 {
0% {width:0%; }
100% { width:88.5%; }
}
@-webkit-keyframes widthMove3 {
0% {width:0%; }
100% { width:68.5%; }
}
@-webkit-keyframes widthMove4 {
0% {width:0%; }
100% { width:40.5%; }
}
@-webkit-keyframes widthMove5 {
0% {width:0%; }
100% { width:22.5%; }
}
@-webkit-keyframes widthMove6 {
0% {width:0%; }
100% { width:10.5%; }
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .num{
width:17%;
font-family:dig;
padding-left:0.02rem;}
/*左边底部*/
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul{
display:flex;
display: -webkit-flex;
flex-wrap:wrap;
width:100%;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li{
width:33.3%;
text-align:center;
margin-bottom:0.05rem;}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .shu{
font-size:0.14rem;
color:rgba(14,253,255,1);
font-family:dig;
padding:0.12rem 0 0.02rem;
font-weight:normal;}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .zi{
font-size:0.06rem;
color:#fff;}
/*右边部分*/
.rightMain .rightMain_top{
width:100%;
padding-bottom:0.1rem;
}
.rightMain .rightMain_topIn{
border:0.008rem solid rgba(14,253,255,0.5);
width:100%;
min-height:60px;
position:relative;
padding:0.08rem 0.05rem;
}
.rightMain .rightMain_topIn h3{
font-size:0.08rem;
color:#fff;
margin-bottom:0.05rem;
}
.rightMain .rightMain_topIn .biaoge{
min-height:200px;}
.rightMain .rightMain_bottom{
width:100%;
}
.rightMain .rightMain_bottomIn{
border:0.008rem solid rgba(14,253,255,0.5);
width:100%;
min-height:60px;
position:relative;
padding:0.08rem 0.05rem;
}
.rightMain .rightMain_bottomIn h3{
font-size:0.08rem;
color:#fff;
margin-bottom:0.05rem;
}
/*右下角表格*/
.rightMain .rightMain_bottomIn .biaoge{
min-height:200px;}
.rightMain .rightMain_bottomIn .biaoge_list{
overflow:hidden;
position: relative;}
.rightMain .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_list{
overflow:hidden;
position: relative;}
.rightMain .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_listIn{
-webkit-animation: 14s gundong linear infinite normal;
animation: 14s gundong linear infinite normal;
position: relative;}
@keyframes gundong {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -30vh, 0);
transform: translate3d(0, -30vh, 0);
}
}
.rightMain .rightMain_bottomIn .biaoge_list ul{
display:flex;
display: -webkit-flex;
width:100%;
}
.rightMain .rightMain_bottomIn .biaoge_list .ul_title{
background: linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
background: -ms-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
background: -webkit-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
background: -moz-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
}
.rightMain .rightMain_bottomIn .biaoge_list .ul_con{
border-bottom:0.008rem solid rgba(14,253,255,0.5);}
.rightMain .rightMain_bottomIn .biaoge_list ul li{
width:20%;
text-align:center;
color:#fff;
font-size:0.06rem;
height:0.2rem;
line-height:0.2rem;}
.rightMain .rightMain_bottomIn .biaoge_list ul li:frist-child{
text-align:left;}

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 255 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1006 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

@ -0,0 +1,669 @@
<!doctype html>
<html>
<head>
<!--更多资源https://gitee.com/iGaoWei/big-data-view -->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>酷炫智能大屏数据中心</title>
<!--大屏-->
<link type="text/css" href="css/public.css" rel="stylesheet">
<link type="text/css" href="css/icon.css" rel="stylesheet">
<link type="text/css" href="css/index.css" rel="stylesheet">
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth /768*100 + 'px';
</script>
<script src="js/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="bg">
<div class="title">HADG数据分析中心<button type="button" class="refresh-button" onclick="location.reload();"></button></div>
<div class="leftMain">
<div class="leftMain_top">
<div id="mytitle"></div>
</div>
<div class="leftMain_middle">
<div class="leftMain_middle_left">
<div class="leftMain_middle_leftIn">
<h3>系统处理信息数量统计图</h3>
<!-- 为ECharts准备一个具备大小宽高的Dom -->
<div class="biaoge" style="width:100%; height:25vh" id="chartmain"></div>
<script type="text/javascript">
//window.onload = function () {
//指定图表的配置项和数据
//};
</script>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
<div class="leftMain_middle_right">
<div class="leftMain_middle_rightIn">
<h3>服务器错误率情况</h3>
<div class="biaoge biaoge_pai" style="width:100%; height:25vh">
<div class="biaoge_paiIn">
<ul>
<div id="mylist"></div>
</ul>
</div>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
</div>
<div class="leftMain_middle">
<div class="leftMain_middle_left">
<div class="leftMain_middle_leftIn">
<h3>服务器响应时间波动情况</h3>
<div class="biaoge" style="width:100%; height:25vh">
<canvas id="chartmain_zhe"></canvas>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
<div class="leftMain_middle_right">
<div class="leftMain_middle_rightIn">
<h3>服务器存活情况</h3>
<div class="biaoge biaoge_bi" style="width:100%; height:25vh">
<div class="biaoge" style="width:100%; height:30vh" id="chartmain_bing2"></div>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
</div>
</div>
<di class="rightMain">
<div class="rightMain_top">
<div class="rightMain_topIn">
<h3></h3>
<div class="biaoge" style="width:100%; height:30vh" id="chartmain_bing"></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
<div class="rightMain_bottom">
<div class="rightMain_bottomIn">
<h3>最近处理消息简报</h3>
<div class="biaoge biaoge_list" style="width:100%; height:36vh">
<div class="biaoge_listIn">
<ul class="ul_title">
<li>服务器名</li>
<li>地区</li>
<li>报文格式</li>
<li>响应时间</li>
</ul>
<div class="ul_list">
<div class="ul_listIn">
<ul class="ul_con">
<li>127.0.0.1</li>
<li>北京</li>
<li>TCP</li>
<li>110ms</li>
</ul>
<ul class="ul_con">
<li>127.0.0.2</li>
<li>广州</li>
<li>TCP</li>
<li>150ms</li>
</ul>
<ul class="ul_con">
<li>127.0.0.2</li>
<li>广州</li>
<li>TCP</li>
<li>144ms</li>
</ul>
<ul class="ul_con">
<li>127.0.0.3</li>
<li>上海</li>
<li>TCP</li>
<li>220ms</li>
</ul>
<ul class="ul_con">
<li>127.0.0.1</li>
<li>北京</li>
<li>TCP</li>
<li>70ms</li>
</ul>
<ul class="ul_con">
<li>127.0.0.3</li>
<li>上海</li>
<li>TCP</li>
<li>170ms</li>
</ul>
<ul class="ul_con">
<li>127.0.0.2</li>
<li>广州</li>
<li>TCP</li>
<li>110ms</li>
</ul>
<ul class="ul_con">
<li>127.0.0.3</li>
<li>上海</li>
<li>TCP</li>
<li>310ms</li>
</ul>
<ul class="ul_con">
<li>127.0.0.1</li>
<li>北京</li>
<li>TCP</li>
<li>120ms</li>
</ul>
<ul class="ul_con">
<li>127.0.0.3</li>
<li>上海</li>
<li>TCP</li>
<li>580ms</li>
</ul>
<ul class="ul_con">
<li>127.0.0.2</li>
<li>广州</li>
<li>TCP</li>
<li>110ms</li>
</ul>
<ul class="ul_con">
<li>127.0.0.2</li>
<li>广州</li>
<li>TCP</li>
<li>70ms</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
<!--大屏-->
<!--数字增长累加动画-->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// var jsonData;
// function a(){
// jsonData='aaaa';
// }
// setInterval(a,1000);
// console.log(jsonData);
//document.addEventListener('DOMContentLoaded', function() {
// 获取表单元素
// window.setInterval(myFunction,5000);
//     function myFunction(){
//         fetch('http://localhost:8080/aaa', {
//             method: 'POST', // 或者 'PUT'
//             headers: {
//                 'Content-Type': 'application/json',
//                 // 如果需要认证添加Authorization头部
//                 // 'Authorization': 'Bearer your_token_here'
//             },
//             body: 'abc' // 将表单数据转换为JSON字符串
//         })
//         .then(response => {return response.json()}) // 转换响应为JSON
//         .then(data => {
//             var jsonData=data;
// console.log(jsonData)
//         })
//     }
// })
var jsonData1={ AveSurRate:0.71,messageCount:2980,//平均存活度
TimeArray:['6.17', '6.18', '6.19', '6.20', '6.21', '6.22', '6.23', '6.24', '6.25', '6.26', '6.27', '6.28', '6.29', '6.30', '7.1'],//系统处理信息数量统计图横轴
DataArray:[220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 150],//系统处理信息数量统计图数据
data1:[//错误率
{value: 0.1, name: '北京'},
{value: 0.6, name: '广州'},
{value: 0.1, name: '长沙'},
{value: 0.2, name: '上海'},
],
data2:[//存活情况
{value: 0.2, name: '良好'},
{value: 0.2, name: '一般'},
{value: 0.3, name: '差'},
{value: 0.3, name: '极差'},
],
data:{
labels: ['16:00', '16:10', '16:20', '16:30', '16:40', '16:50'], // 服务器响应时间波动情况X轴标签
datasets: [//服务器响应时间波动情况数据信息
{
label: '127.0.0.1', // 数据集名称
data: [100, 70, 70, 60, 77, 79], // 数据集数据
},
{
label: '127.0.0.2',
data: [1300, 1300, 1500, 100, 70, 150],
},
{
label: '127.0.0.3',
data: [70, 80, 80, 100, 110, 70],
}]
}
};
var jsonData2={ AveSurRate:0.75,messageCount:3010,//平均存活度
TimeArray:['6.17', '6.18', '6.19', '6.20', '6.21', '6.22', '6.23', '6.24', '6.25', '6.26', '6.27', '6.28', '6.29', '6.30', '7.1'],//系统处理信息数量统计图横轴
DataArray:[220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 350],//系统处理信息数量统计图数据
data1:[//错误率
{value: 0.3, name: '北京'},
{value: 0.4, name: '广州'},
{value: 0.1, name: '长沙'},
{value: 0.2, name: '上海'},
],
data2:[//存活情况
{value: 0.3, name: '良好'},
{value: 0.2, name: '一般'},
{value: 0.1, name: '差'},
{value: 0.2, name: '极差'},
],
data:{
labels: ['16:10', '16:20', '16:30', '16:40', '16:50','17:00'], // 服务器响应时间波动情况X轴标签
datasets: [//服务器响应时间波动情况数据信息
{
label: '127.0.0.1', // 数据集名称
data: [70, 70, 60, 77, 79,80], // 数据集数据
},
{
label: '127.0.0.2',
data: [1300, 1500, 100, 70, 150,170],
},
{
label: '127.0.0.3',
data: [80, 80, 100, 110, 70,100],
}]
}
};
function paintchartmain(jsonData){
console.log('paintchartmain')
var dataAxis = jsonData.TimeArray;
var data = jsonData.DataArray;
var yMax = 500;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
option = {
title: {
text: '',
subtext: ''
},
grid:{
x:40,
y:40,
x2:20,
y2:20,
},
xAxis: {
data: dataAxis,
axisLabel: {
/*inside: true,*/
interval:0,
textStyle: {
color: '#fff',
fontSize: 12
}
},
axisTick: {
show: false,
},
axisLine: {
show: true,
symbol:['none', 'arrow'],
symbolOffset: 12,
lineStyle:{
color: '#fff',
}
},
z: 10
},
yAxis: {
type: 'value',
name: '条数:条',
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle:{
color: '#fff',
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
type: 'bar',
itemStyle: {
color: 'rgba(0,0,0,0.05)'
},
barGap: '-100%',
barCategoryGap: '40%',
data: dataShadow,
animation: false
},
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#0efdff'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#0efdff'}
]
)
}
},
data: data
}
]
};
// Enable data zoom when user click bar.
/*var zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});*/
//获取dom容器
var myChart = echarts.init(document.getElementById('chartmain'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
//console.log(jsonData.data);
function paintchartmainbing(jsonData){
var ctx = document.getElementById('chartmain_zhe').getContext('2d');
myChart = new Chart(ctx, {
type: 'line', // 图表类型
data: jsonData.data, // 传递数据
options: {
scales: {
y: {
beginAtZero: false // Y轴是否从0开始
}
},
responsive: true, // 响应式图表
maintainAspectRatio: false // 保持宽高比
}
});
//获取dom容器
option = {
title: {
text: '数据情况统计',
subtext: '',
left: 'right',
textStyle: {
color: '#fff',
fontSize: 12
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
// orient: 'vertical',
// top: 'middle',
type: 'scroll',
orient: 'vertical',
right: 10,
top: 40,
bottom: 20,
left: 'right',
data: ['西凉', '益州', '兖州', '荆州', '幽州'],
textStyle: {
color: '#fff',
fontSize: 12
}
},
grid:{
x:'-10%',
y:40,
x2:20,
y2:20,
},
color : [ '#09d0fb', '#f88cfb', '#95f8fe', '#f9f390', '#ecfeb7' ],
series: [
{
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: jsonData.data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//获取dom容器
myChart1 = echarts.init(document.getElementById('chartmain_bing'));
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option);
setTimeout(function(){
myChart.destroy();
},8000);
}
function paintchartmainbing2(jsonData){
option2 = {
title: {
text: '',
subtext: '',
left: 'right',
textStyle: {
color: '#fff',
fontSize: 12
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
// orient: 'vertical',
// top: 'middle',
type: 'scroll',
orient: 'vertical',
right: 10,
top: 40,
bottom: 20,
left: 'right',
data: ['西凉', '益州', '兖州', '荆州', '幽州'],
textStyle: {
color: '#fff',
fontSize: 12
}
},
grid:{
x:'-10%',
y:40,
x2:20,
y2:20,
},
color : [ '#09d0fb', '#f88cfb', '#95f8fe', '#f9f390', '#ecfeb7' ],
series: [
{
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: jsonData.data2,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//获取dom容器
myChart2 = echarts.init(document.getElementById('chartmain_bing2'));
// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option2);
}
$(".shu1").numScroll();
$(".shu2").numScroll();
$(".shu3").numScroll();
$(".shu4").numScroll();
$(".shu5").numScroll();
$(".shu6").numScroll();
function updateMessageList(data) {
var msgListContainer = document.getElementById('mylist');
msgListContainer.innerHTML = ''; // 清空现有内容
data.forEach(function(item) {
var msgItem = document.createElement('div');
msgItem.className = 'msg_item';
msgItem.innerHTML = `
<li>
<div class="liIn">
<div class="liIn_left"><span class="bot"></span><span class="zi">${item.name}</span></div>
<div class="liIn_line"><div class="line_lineIn" style="width:98.5%;"></div></div>
<p class="num">${item.value}</p>
</div>
</li>
`;
msgListContainer.appendChild(msgItem);
});
}
function updatetitle(jsonData){
let str='';
str+=`
<div class="leftMain_topIn">
<ul>
<li>
<div class="liIn">
<h3>当前系统版本</h3>
<p class="shu"><span class="shu1">1.15</span><i>version</i></p>
<div class="zi"><span class="span1"></span><span></span></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
<li>
<div class="liIn">
<h3>已连接服务器数量</h3>
<p class="shu"><span class="shu2">5</span><i></i></p>
<div class="zi"><span class="span1"></span><span></span></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
<li>
<div class="liIn">
<h3>已处理消息总条数</h3>
<p class="shu"><span class="shu3">${jsonData.messageCount}</span><i></i></p>
<div class="zi"><span class="span1"></span><span></span></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
<li>
<div class="liIn">
<h3>系统活跃度</h3>
<p class="shu"><span class="shu4">${jsonData.AveSurRate}</span><i></i></p>
<div class="zi"><span class="span1"></span><span></span></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
</ul>
</div>
`;
const el = document.getElementById('mytitle');
        el.innerHTML = str;
}
function paintall()
{
console.log("test");
paintchartmain(jsonData1);
paintchartmainbing(jsonData1);
paintchartmainbing2(jsonData1);
updateMessageList(jsonData1.data1);
updatetitle(jsonData1);
setTimeout(function(){
paintall2();
},8000)
}
function paintall2()
{
console.log("test");
paintchartmain(jsonData2);
paintchartmainbing(jsonData2);
paintchartmainbing2(jsonData2);
updateMessageList(jsonData2.data1);
updatetitle(jsonData2);
}
paintall();
// setInterval(paintall,3000);
/*$(".num2").numScroll({
time:5000
});*/
</script>
<!--大屏-->
</body>
</html>

@ -0,0 +1,275 @@
/*
*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export * from './src/echarts';
export * from './src/export';
import './src/component/dataset';
// ----------------------------------------------
// All of the modules that are allowed to be
// imported are listed below.
//
// Users MUST NOT import other modules that are
// not included in this list.
// ----------------------------------------------
// ----------------
// Charts (series)
// ----------------
// All of the series types, for example:
// chart.setOption({
// series: [{
// type: 'line' // or 'bar', 'pie', ...
// }]
// });
import './src/chart/bar';
import './src/chart/boxplot';
import './src/chart/candlestick';
import './src/chart/custom';
import './src/chart/effectScatter';
import './src/chart/funnel';
import './src/chart/gauge';
import './src/chart/graph';
import './src/chart/heatmap';
import './src/chart/line';
import './src/chart/lines';
import './src/chart/map';
import './src/chart/parallel';
import './src/chart/pictorialBar';
import './src/chart/pie';
import './src/chart/radar';
import './src/chart/sankey';
import './src/chart/scatter';
import './src/chart/sunburst';
import './src/chart/themeRiver';
import './src/chart/tree';
import './src/chart/treemap';
// -------------------
// Coordinate systems
// -------------------
// All of the axis modules have been included in the
// coordinate system module below, do not need to
// make extra import.
// `cartesian` coordinate system. For some historical
// reasons, it is named as grid, for example:
// chart.setOption({
// grid: {...},
// xAxis: {...},
// yAxis: {...},
// series: [{...}]
// });
import './src/component/grid';
// `polar` coordinate system, for example:
// chart.setOption({
// polar: {...},
// radiusAxis: {...},
// angleAxis: {...},
// series: [{
// coordinateSystem: 'polar'
// }]
// });
import './src/component/polar';
// `geo` coordinate system, for example:
// chart.setOption({
// geo: {...},
// series: [{
// coordinateSystem: 'geo'
// }]
// });
import './src/component/geo';
// `singleAxis` coordinate system (notice, it is a coordinate system
// with only one axis, work for chart like theme river), for example:
// chart.setOption({
// singleAxis: {...}
// series: [{type: 'themeRiver', ...}]
// });
import './src/component/singleAxis';
// `parallel` coordinate system, only work for parallel series, for example:
// chart.setOption({
// parallel: {...},
// parallelAxis: [{...}, ...],
// series: [{
// type: 'parallel'
// }]
// });
import './src/component/parallel';
// `calendar` coordinate system. for example,
// chart.setOptionp({
// calendar: {...},
// series: [{
// coordinateSystem: 'calendar'
// }]
// );
import './src/component/calendar';
// ------------------
// Other components
// ------------------
// `graphic` component, for example:
// chart.setOption({
// graphic: {...}
// });
import './src/component/graphic';
// `toolbox` component, for example:
// chart.setOption({
// toolbox: {...}
// });
import './src/component/toolbox';
// `tooltip` component, for example:
// chart.setOption({
// tooltip: {...}
// });
import './src/component/tooltip';
// `axisPointer` component, for example:
// chart.setOption({
// tooltip: {axisPointer: {...}, ...}
// });
// Or
// chart.setOption({
// axisPointer: {...}
// });
import './src/component/axisPointer';
// `brush` component, for example:
// chart.setOption({
// brush: {...}
// });
// Or
// chart.setOption({
// tooltip: {feature: {brush: {...}}
// })
import './src/component/brush';
// `title` component, for example:
// chart.setOption({
// title: {...}
// });
import './src/component/title';
// `timeline` component, for example:
// chart.setOption({
// timeline: {...}
// });
import './src/component/timeline';
// `markPoint` component, for example:
// chart.setOption({
// series: [{markPoint: {...}}]
// });
import './src/component/markPoint';
// `markLine` component, for example:
// chart.setOption({
// series: [{markLine: {...}}]
// });
import './src/component/markLine';
// `markArea` component, for example:
// chart.setOption({
// series: [{markArea: {...}}]
// });
import './src/component/markArea';
// `legend` component scrollable, for example:
// chart.setOption({
// legend: {type: 'scroll'}
// });
import './src/component/legendScroll';
// `legend` component not scrollable. for example:
// chart.setOption({
// legend: {...}
// });
import './src/component/legend';
// `dataZoom` component including both `dataZoomInside` and `dataZoomSlider`.
import './src/component/dataZoom';
// `dataZoom` component providing drag, pinch, wheel behaviors
// inside coodinate system, for example:
// chart.setOption({
// dataZoom: {type: 'inside'}
// });
import './src/component/dataZoomInside';
// `dataZoom` component providing a slider bar, for example:
// chart.setOption({
// dataZoom: {type: 'slider'}
// });
import './src/component/dataZoomSlider';
// `dataZoom` component including both `visualMapContinuous` and `visualMapPiecewise`.
import './src/component/visualMap';
// `visualMap` component providing continuous bar, for example:
// chart.setOption({
// visualMap: {type: 'continuous'}
// });
import './src/component/visualMapContinuous';
// `visualMap` component providing pieces bar, for example:
// chart.setOption({
// visualMap: {type: 'piecewise'}
// });
import './src/component/visualMapPiecewise';
// -----------------
// Render engines
// -----------------
// Provide IE 6,7,8 compatibility.
import 'zrender/src/vml/vml';
// Render via SVG rather than canvas.
import 'zrender/src/svg/svg';

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,84 @@
/*!
* jquery.numscroll.js -- 数字滚动累加动画插件 (Digital rolling cumulative animation)
* version 1.0.0
* 2018-09-22
* author: KevinTseng < 921435247@qq.com@qq.com >
* 文档: https://github.com/chaorenzeng/jquery.numscroll.js.git
* QQ交流群: 739574382
*/
(function($) {
function isInt(num) {
//作用:是否为整数
//返回:true是 false否
var res = false;
try {
if(String(num).indexOf(".") == -1 && String(num).indexOf(",") == -1) {
res = parseInt(num) % 1 === 0 ? true : false;
}
} catch(e) {
res = false;
}
return res;
}
function isFloat(num) {
//作用:是否为小数
//返回:小数位数(-1不是小数)
var res = -1;
try {
if(String(num).indexOf(".") != -1) {
var index = String(num).indexOf(".") + 1; //获取小数点的位置
var count = String(num).length - index; //获取小数点后的个数
if(index > 0) {
res = count;
}
}
} catch(e) {
res = -1;
}
return res;
}
$.fn.numScroll = function(options) {
var settings = $.extend({
'time': 1500,
'delay': 0
}, options);
return this.each(function() {
var $this = $(this);
var $settings = settings;
var num = $this.attr("data-num") || $this.text(); //实际值
var temp = 0; //初始值
$this.text(temp);
var numIsInt = isInt(num);
var numIsFloat = isFloat(num);
var step = (num / $settings.time) * 10; //步长
setTimeout(function() {
var numScroll = setInterval(function() {
if(numIsInt) {
$this.text(Math.floor(temp));
} else if(numIsFloat != -1) {
$this.text(temp.toFixed(numIsFloat));
} else {
$this.text(num);
clearInterval(numScroll);
return;
}
temp += step;
if(temp > num) {
$this.text(num);
clearInterval(numScroll);
}
}, 1);
}, $settings.delay);
});
};
})(jQuery);
Loading…
Cancel
Save