<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>系统监控走势图</title>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/socket.io/1.5.1/socket.io.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/animateBackground-plugin.js"></script>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
<script src="theme/vintage.js"></script>
<script>
// 第二个参数可以指定前面引入的主题
var chart =echarts.init(document.getElementById('main'),'vintage');
chart.setOption({
...
});
</script>
<style>
.turnBox {
display:inline-block;
position:relative;
background:#999999;
}
.turnBox .title {
margin:0;
margin-bottom:5px;
font-size:16px;
color:#fff;
}
.turnBox .prefix {
font-size:16px;
color:gold;
}
.turnBox .suffix {
font-size:14px;
color:gold;
}
.turnBox .number{
padding:0 5px;
font-size:32px;
font-weight:600;
color:gold;
}
</style>
</head>
<body>
<div id="total" style="font-size:30px;">
<div style="float:left;">金额：</div><div id="box" style="float:left;"></div><div style="float:left;">元</div>
</div>
<div id="total1" style="height:400px;border:1px solid #ccc;padding:10px;"></div>
<div id="main" style="height:400px;border:1px solid #ccc;padding:10px;"></div>
<script type="text/javascript">
var myChart =echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text:'系统监控走势图'
},
tooltip: {},
legend: {
data:['订单']
},
xAxis: {
data: [],
axisLabel:{interval:10,
}
},
yAxis: {},
series: [{
name:'订单',
type:'line',
smooth:0.5,
data: [],
itemStyle: {normal: {areaStyle: {type:'default'}}},
}]
});
//
var time = ["","","","","","","","","",""],
cpu = [0,0,0,0,0,0,0,0,0,0]
// var time = [],
// cpu = []
//准备好统一的 callback 函数
var update_mychart =function (res) {
//res是json格式的response对象
// 隐藏加载动画
myChart.hideLoading();
// 准备数据
time.push(res.data[0]);
cpu.push(parseFloat(res.data[1]));
if (time.length >=20){
time.shift();
cpu.shift();
}
// 填入数据
myChart.setOption({
xAxis: {
data:time
},
series: [{
name:'订单',// 根据名字对应到相应的系列
data:cpu
}]
});
};
// 首次显示加载动画
myChart.showLoading();
//准备好统一的 callback 函数
var update_mychart2 =function (res) {
//res是json格式的response对象
var myChart2 =echarts.init(document.getElementById('total1'));
myChart2.setOption({
title : {
text:'某站点用户访问来源',
subtext:'纯属虚构',
x:'center'
},
tooltip : {
trigger:'item',
formatter:"{a}
{b} : {c} ({d}%)"
},
legend: {
orient :'vertical',
x :'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show :true,
feature : {
mark : {show:true},
dataView : {show:true,readOnly:false},
magicType : {
show:true,
type: ['pie','funnel'],
option: {
funnel: {
x:'25%',
width:'50%',
funnelAlign:'left',
max:1548
}
}
},
restore : {show:true},
saveAsImage : {show:true}
}
},
calculable :true,
series : [
{
name:'访问来源',
type:'pie',
radius :'55%',
center: ['50%','60%'],
data:[
{value: res.data[1],name:'直接访问'},
{value:22,name:'邮件营销'},
{value:3,name:'联盟广告'},
{value:13,name:'视频广告'},
{value:5,name:'搜索引擎'}
]
}
]}
);
// 隐藏加载动画
myChart2.hideLoading();
// 准备数据
};
function show_num(res){
var options = {
useEasing:true,
useGrouping:true,
separator:',',
decimal:'.',
};
var demo =new CountUp('box', res.data[3], res.data[2],0,1,options);
if (!demo.error) {
demo.start();
}else {
console.error(demo.error);
} };
// 建立socket连接，等待服务器“推送”数据，用回调函数更新图表
$(document).ready(function() {
namespace ='/test';
var socket = io.connect(location.protocol +'//' +document.domain +':' +location.port +namespace);
var lastval
socket.on('server_response',function(res) {
update_mychart(res);
show_num(res);
// update_mychart2(res);
});
socket.on('server_response2',function(res) {
update_mychart2(res);
});
});
</script>
</body>
</html>
