|
|
@ -49,8 +49,9 @@ function dhtTrendData(callback){ |
|
|
|
function dhtTrendRender() { |
|
|
|
function dhtTrendRender() { |
|
|
|
var myChartNetwork = echarts.init(document.getElementById('dht_trend')); |
|
|
|
var myChartNetwork = echarts.init(document.getElementById('dht_trend')); |
|
|
|
var xData = []; |
|
|
|
var xData = []; |
|
|
|
var yData = []; |
|
|
|
var oneData = []; |
|
|
|
var zData = []; |
|
|
|
var twoData = []; |
|
|
|
|
|
|
|
var threeData = []; |
|
|
|
|
|
|
|
|
|
|
|
function getTime() { |
|
|
|
function getTime() { |
|
|
|
var now = new Date(); |
|
|
|
var now = new Date(); |
|
|
@ -78,39 +79,40 @@ function dhtTrendRender() { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function addData(data) { |
|
|
|
function addData(data) { |
|
|
|
console.log(data); |
|
|
|
// console.log(data);
|
|
|
|
|
|
|
|
var rdata = $.parseJSON(data.data); |
|
|
|
xData.push(getTime()); |
|
|
|
xData.push(getTime()); |
|
|
|
yData.push(data[0]); |
|
|
|
oneData.push(rdata[0]); |
|
|
|
zData.push(data[1]); |
|
|
|
twoData.push(rdata[1]); |
|
|
|
// if (shift) {
|
|
|
|
threeData.push(rdata[2]); |
|
|
|
// xData.shift();
|
|
|
|
|
|
|
|
// yData.shift();
|
|
|
|
xData.shift(); |
|
|
|
// zData.shift();
|
|
|
|
oneData.shift(); |
|
|
|
// }
|
|
|
|
twoData.shift(); |
|
|
|
|
|
|
|
threeData.shift(); |
|
|
|
} |
|
|
|
} |
|
|
|
for (var i = 8; i >= 0; i--) { |
|
|
|
for (var i = 8; i >= 0; i--) { |
|
|
|
var time = (new Date()).getTime(); |
|
|
|
var time = (new Date()).getTime(); |
|
|
|
xData.push(format(time - (i * 3 * 1000))); |
|
|
|
xData.push(format(time - (i * 5 * 1000))); |
|
|
|
yData.push(0); |
|
|
|
oneData.push(0); |
|
|
|
zData.push(0); |
|
|
|
twoData.push(0); |
|
|
|
|
|
|
|
threeData.push(0); |
|
|
|
} |
|
|
|
} |
|
|
|
// 指定图表的配置项和数据
|
|
|
|
// 指定图表的配置项和数据
|
|
|
|
var option = { |
|
|
|
var option = { |
|
|
|
title: { |
|
|
|
title: { |
|
|
|
text: lan.index.interface_net, |
|
|
|
text: '接口流量实时', |
|
|
|
left: 'center', |
|
|
|
left: 'center', |
|
|
|
textStyle: { |
|
|
|
textStyle: { |
|
|
|
color: '#888888', |
|
|
|
color: '#888888',fontStyle: 'normal', |
|
|
|
fontStyle: 'normal', |
|
|
|
fontFamily: '宋体',fontSize: 16, |
|
|
|
fontFamily: lan.index.net_font, |
|
|
|
|
|
|
|
fontSize: 16, |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis' |
|
|
|
trigger: 'axis' |
|
|
|
}, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
legend: { |
|
|
|
data: [lan.index.net_up, lan.index.net_down], |
|
|
|
data: ['5s', '10s', '15s'], |
|
|
|
bottom: '2%' |
|
|
|
bottom: '2%' |
|
|
|
}, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
xAxis: { |
|
|
@ -124,7 +126,7 @@ function dhtTrendRender() { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
yAxis: { |
|
|
|
name: lan.index.unit + 'KB/s', |
|
|
|
name: '单位个数', |
|
|
|
splitLine: { |
|
|
|
splitLine: { |
|
|
|
lineStyle: { |
|
|
|
lineStyle: { |
|
|
|
color: "#eee" |
|
|
|
color: "#eee" |
|
|
@ -137,9 +139,30 @@ function dhtTrendRender() { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [{ |
|
|
|
series: [{ |
|
|
|
name: lan.index.net_up, |
|
|
|
name: '5s', |
|
|
|
type: 'line', |
|
|
|
type: 'line', |
|
|
|
data: yData, |
|
|
|
data: oneData, |
|
|
|
|
|
|
|
smooth: true, |
|
|
|
|
|
|
|
showSymbol: false, |
|
|
|
|
|
|
|
symbol: 'circle', |
|
|
|
|
|
|
|
symbolSize: 6, |
|
|
|
|
|
|
|
areaStyle: { |
|
|
|
|
|
|
|
normal: { |
|
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
|
|
|
|
|
|
|
[{offset: 0,color: 'rgba(205, 51, 51,0.5)'},
|
|
|
|
|
|
|
|
{offset: 1,color: 'rgba(205, 51, 51,0.8)'}], false) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
|
|
normal: {color: '#cd3333'} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
|
|
normal: {width: 1} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, { |
|
|
|
|
|
|
|
name: '10s', |
|
|
|
|
|
|
|
type: 'line', |
|
|
|
|
|
|
|
data: twoData, |
|
|
|
smooth: true, |
|
|
|
smooth: true, |
|
|
|
showSymbol: false, |
|
|
|
showSymbol: false, |
|
|
|
symbol: 'circle', |
|
|
|
symbol: 'circle', |
|
|
@ -148,27 +171,25 @@ function dhtTrendRender() { |
|
|
|
normal: { |
|
|
|
normal: { |
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
|
|
offset: 0, |
|
|
|
offset: 0, |
|
|
|
color: 'rgba(255, 140, 0,0.5)' |
|
|
|
color: 'rgba(30, 144, 255,0.5)' |
|
|
|
}, { |
|
|
|
}, { |
|
|
|
offset: 1, |
|
|
|
offset: 1, |
|
|
|
color: 'rgba(255, 140, 0,0.8)' |
|
|
|
color: 'rgba(30, 144, 255,0.8)' |
|
|
|
}], false) |
|
|
|
}], false) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
normal: {color: '#52a9ff'} |
|
|
|
color: '#f7b851' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
lineStyle: { |
|
|
|
lineStyle: { |
|
|
|
normal: { |
|
|
|
normal: { |
|
|
|
width: 1 |
|
|
|
width: 1 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, { |
|
|
|
},{ |
|
|
|
name: lan.index.net_down, |
|
|
|
name: '15s', |
|
|
|
type: 'line', |
|
|
|
type: 'line', |
|
|
|
data: zData, |
|
|
|
data: threeData, |
|
|
|
smooth: true, |
|
|
|
smooth: true, |
|
|
|
showSymbol: false, |
|
|
|
showSymbol: false, |
|
|
|
symbol: 'circle', |
|
|
|
symbol: 'circle', |
|
|
@ -185,9 +206,7 @@ function dhtTrendRender() { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
normal: {color: '#C6E2FF'} |
|
|
|
color: '#52a9ff' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
lineStyle: { |
|
|
|
lineStyle: { |
|
|
|
normal: { |
|
|
|
normal: { |
|
|
@ -196,23 +215,32 @@ function dhtTrendRender() { |
|
|
|
} |
|
|
|
} |
|
|
|
}] |
|
|
|
}] |
|
|
|
}; |
|
|
|
}; |
|
|
|
setInterval(function() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
|
|
|
|
myChartNetwork.setOption(option); |
|
|
|
|
|
|
|
window.addEventListener("resize", function() { |
|
|
|
|
|
|
|
myChartNetwork.resize(); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function render(){ |
|
|
|
dhtTrendData(function(data){ |
|
|
|
dhtTrendData(function(data){ |
|
|
|
addData(data); |
|
|
|
addData(data); |
|
|
|
}); |
|
|
|
}); |
|
|
|
myChartNetwork.setOption({ |
|
|
|
myChartNetwork.setOption({ |
|
|
|
xAxis: {data: xData}, |
|
|
|
xAxis: {data: xData}, |
|
|
|
series: [ |
|
|
|
series: [ |
|
|
|
{name: '5s',data: yData},
|
|
|
|
{name: '5s',data: oneData},
|
|
|
|
{name: '10s',data: zData} |
|
|
|
{name: '10s',data: twoData}, |
|
|
|
|
|
|
|
{name: '15s',data: threeData} |
|
|
|
] |
|
|
|
] |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
render(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setInterval(function() { |
|
|
|
|
|
|
|
render(); |
|
|
|
}, 5000); |
|
|
|
}, 5000); |
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
|
|
|
|
myChartNetwork.setOption(option); |
|
|
|
|
|
|
|
window.addEventListener("resize", function() { |
|
|
|
|
|
|
|
myChartNetwork.resize(); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|