<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>系統(tǒng)監(jiān)控走勢圖</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://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>
// 第二個參數(shù)可以指定前面引入的主題
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:'系統(tǒng)監(jiān)控走勢圖'
? ? ? ? },
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 = []
//準備好統(tǒng)一的 callback 函數(shù)
? ? var update_mychart =function (res) {
//res是json格式的response對象
// 隱藏加載動畫
? ? ? ? myChart.hideLoading();
// 準備數(shù)據(jù)
? ? ? ? time.push(res.data[0]);
cpu.push(parseFloat(res.data[1]));
if (time.length >=20){
time.shift();
cpu.shift();
}
// 填入數(shù)據(jù)
? ? ? ? myChart.setOption({
xAxis: {
data:time
? ? ? ? ? ? },
series: [{
name:'訂單',// 根據(jù)名字對應(yīng)到相應(yīng)的系列
? ? ? ? ? ? ? ? data:cpu
? ? ? ? ? ? }]
});
};
// 首次顯示加載動畫
? ? myChart.showLoading();
//準備好統(tǒng)一的 callback 函數(shù)
? ? var update_mychart2 =function (res) {
//res是json格式的response對象
? var myChart2 =echarts.init(document.getElementById('total1'));
myChart2.setOption({
title : {
text:'某站點用戶訪問來源',
subtext:'純屬虛構(gòu)',
x:'center'
? ? },
tooltip : {
trigger:'item',
formatter:"{a}
建峭 : {c} (cwu0gii%)"
? ? },
legend: {
orient :'vertical',
x :'left',
data:['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
},
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:'聯(lián)盟廣告'},
{value:13,name:'視頻廣告'},
{value:5,name:'搜索引擎'}
]
}
]}
);
// 隱藏加載動畫
? ? ? ? myChart2.hideLoading();
// 準備數(shù)據(jù)
? ? };
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連接玻侥，等待服務(wù)器“推送”數(shù)據(jù)，用回調(diào)函數(shù)更新圖表
? ? $(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>
