流量统计新增app应用详情,阻断监测动作趋势统计

This commit is contained in:
zhanghongqing
2018-12-06 17:27:04 +08:00
parent d3bbf10f72
commit 68a28366a0
12 changed files with 653 additions and 82 deletions

View File

@@ -4,13 +4,17 @@
function echart_1(rs) {
var data=new Array();
var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
var pktNum=new Array();
var byteLen=new Array();
//协议图-操作系统
data.push({
name: d.protoType,
y: parseInt(d.count),
y: parseFloat(inoctetsNum),
// drilldown: d.protoType,
});
@@ -69,12 +73,14 @@
title: {
text: null
},
tool: {
/*tool: {
enabled: true,
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
pointFormat: '{series.name}: {point.y}<b>',
shared: true,
useHTML: true
// headerFormat: '<span style="font-size:10px">{point.key}- <b>{point.percentage:.1f}%</span>'+unit,
pointFormat: '{series.name} {point.y}<b>'+unit,
},*/
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name} <br>{point.y}</b> '+unit
},
credits:{//是否有highcharts水印
enabled:false
@@ -152,7 +158,7 @@
series: [{
type: 'pie',
innerSize: '70%',//圆环的大小
name: 'bytes',
name: ' ',
data: data
}],
// drilldown:{
@@ -188,21 +194,25 @@
var data=new Array();
var xData=new Array();
var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var pktNum=new Array();
var byteLen=new Array();
var inoctetsNum=d.linkNum;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
/*var pktNum=new Array();
var byteLen=new Array();*/
xData.push(d.ipAddr);
//活跃IP图
data.push({
name: d.ipAddr,
y: parseInt(d.linkNum),
y: parseFloat(inoctetsNum),
// drilldown: d.ipAddr,
});
pktNum[0]="pktNum";
/*pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
drillData.push({
byteLen[1]=parseInt(d.byteLen);*/
/*drillData.push({
name: d.ipAddr,
id: d.ipAddr,
type:'pie',
@@ -211,7 +221,7 @@
pointFormat: '{series.name}: {point.y}<b> ({point.percentage:.1f}%)'
},
data: [pktNum,byteLen],
});
});*/
});
var chart = Highcharts.chart('chart_main', {
chart: {
@@ -285,7 +295,7 @@
yAxis: {
min: 0,
title: {
text: 'bytes',
text: unit,
align:'high',
style: {//设置字体颜色
color: '#fff',
@@ -304,9 +314,9 @@
},
tooltip: {
// valueSuffix: ' 单位'
},
headerFormat: '{series.name}<br>',
pointFormat: '{point.name} <br>{point.y}</b> '+unit
},
plotOptions: {
bar: {
dataLabels: {
@@ -327,7 +337,7 @@
enabled:false
},
series: [{
name: 'bytes',
name: ' ',
colorByPoint: true,
data: data
}],
@@ -350,23 +360,59 @@
// }
});
}
function changeNum(inoctetsNum){
// 变化单位
var inoctetsNumK=inoctetsNum/1024;
var inoctetsNumM=inoctetsNumK/1024;
var inoctetsNumG=inoctetsNumM/1024;
if(inoctetsNumK>1){
inoctetsNum=inoctetsNumK;
};
if(inoctetsNumM>1){
inoctetsNum=inoctetsNumM;
};
if(inoctetsNumG>1){
inoctetsNum=inoctetsNumG;
};
inoctetsNum=inoctetsNum.toFixed(1)
return inoctetsNum;
}
function changeUnit(inoctetsNum){
// 变化单位
var unit="bytes";
var inoctetsNumK=inoctetsNum/1024;
var inoctetsNumM=inoctetsNumK/1024;
var inoctetsNumG=inoctetsNumM/1024;
if(inoctetsNumK>1){
unit="KB";
};
if(inoctetsNumM>1){
unit="MB";
};
if(inoctetsNumG>1){
unit="GB";
};
return unit
}
//app应用类型统计 echart_3
function echart_3(rs) {
var data=new Array();
var xData=new Array();
var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
var pktNum=new Array();
var byteLen=new Array();
xData.push(d.appType);
//活跃IP图
data.push({
name: d.appType,
y: parseInt(d.count),
y: parseFloat(inoctetsNum),
// drilldown: d.appType,
});
pktNum[0]="pktNum";
/* pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
@@ -374,7 +420,7 @@
name: d.appType,
id: d.appType,
data: [pktNum,byteLen],
});
});*/
});
var chart = Highcharts.chart('chart_3',{
chart: {
@@ -437,7 +483,7 @@
yAxis: {
min: 0,
title: {
text: 'bytes',
text: unit,
align:'high',
style: {//设置字体颜色
color: '#fff',
@@ -457,7 +503,7 @@
tooltip: {
enabled: true,
headerFormat: '<span style="font-size:10px"><b>{point.key}</span><br>',
pointFormat: '{series.name}: {point.y}<b>',
pointFormat: '{point.y:.1f} <b> '+unit,
shared: true,
useHTML: true
},
@@ -479,7 +525,7 @@
},
series: [{
name: 'bytes',
name: '',
colorByPoint: true,
data: data
}],
@@ -502,20 +548,24 @@
}*/
});
}
//终端用户 分操作系统与浏览器
//终端用户 分操作系统
function echart_2(rs){
var data=new Array();
var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var pktNum=new Array();
var byteLen=new Array();
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
// var pktNum=new Array();
// var byteLen=new Array();
data.push({
name: d.osType,
y: parseInt(d.count),
y: parseFloat(inoctetsNum),
// drilldown: d.osType,
});
pktNum[0]="pktNum";
/* pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
@@ -525,7 +575,7 @@ function echart_2(rs){
id: d.osType,
type:'pie',
data: [pktNum,byteLen],
});
});*/
});
// 创建图例
@@ -616,12 +666,12 @@ function echart_2(rs){
tooltip: {
enabled: true,
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
pointFormat: '{series.name}: {point.y}<b>',
pointFormat: '{point.y} <b> '+unit,
shared: true,
useHTML: true
},
series: [{
name: 'bytes',
name: ' ',
colorByPoint: true,
data: data
}],
@@ -648,17 +698,21 @@ function echart_2(rs){
function echart_5(rs){
var data=new Array();
var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var pktNum=new Array();
var byteLen=new Array();
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
// var pktNum=new Array();
// var byteLen=new Array();
//协议图-操作系统
data.push({
name: d.bsType,
y: parseInt(d.count),
y: parseFloat(inoctetsNum),
// drilldown: d.bsType,
});
pktNum[0]="pktNum";
/* pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
@@ -668,7 +722,7 @@ function echart_5(rs){
id: d.bsType,
type:'pie',
data: [pktNum,byteLen],
});
});*/
});
// 创建图例
@@ -760,12 +814,12 @@ function echart_5(rs){
tooltip: {
enabled: true,
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
pointFormat: '{series.name}: {point.y}<b>',
pointFormat: '{point.y} <b> '+unit,
shared: true,
useHTML: true
},
series: [{
name: 'bytes',
name: ' ',
colorByPoint: true,
data: data
}],
@@ -792,17 +846,21 @@ function echart_5(rs){
//网站流量分析
function echart_4(rs){
var data=new Array();
var drillData=new Array();
// var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var pktNum=new Array();
var byteLen=new Array();
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
// var pktNum=new Array();
// var byteLen=new Array();
data.push({
name: d.websiteService,
y: parseInt(d.count),
y: parseFloat(inoctetsNum),
// drilldown: d.websiteService,
});
pktNum[0]="pktNum";
/* pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
@@ -812,7 +870,7 @@ function echart_4(rs){
id: d.websiteService,
type:'pie',
data: [pktNum,byteLen],
});
});*/
});
// 创建图例
@@ -895,15 +953,15 @@ function echart_4(rs){
fontFamily:'Microsoft YaHei',
}
},
tooltip: {
tooltip: {
enabled: true,
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
pointFormat: '{series.name}: {point.y}<b>',
pointFormat: '{point.y} <b> '+unit,
shared: true,
useHTML: true
},
series: [{
name: 'bytes',
name: ' ',
colorByPoint: true,
data: data,
}],
@@ -929,18 +987,22 @@ function echart_4(rs){
//网站流量分析-点击列表显示网站分类
function echart_6(rs){
var data=new Array();
var drillData=new Array();
// var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var pktNum=new Array();
var byteLen=new Array();
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
// var pktNum=new Array();
// var byteLen=new Array();
//协议图-操作系统
data.push({
name: d.domain,
y: parseInt(d.count),
y: parseFloat(inoctetsNum),
// drilldown: d.domain,
});
pktNum[0]="pktNum";
/* pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
@@ -950,7 +1012,7 @@ function echart_6(rs){
id: d.domain,
type:'pie',
data: [pktNum,byteLen],
});
});*/
});
// 创建图例
@@ -1033,15 +1095,15 @@ function echart_6(rs){
fontFamily:'Microsoft YaHei',
}
},
tooltip: {
tooltip: {
enabled: true,
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
pointFormat: '{series.name}: {point.y}<b>',
pointFormat: '{point.y} <b> '+unit,
shared: true,
useHTML: true
},
series: [{
name: 'bytes',
name: ' ',
colorByPoint: true,
data: data,
}],
@@ -1070,21 +1132,27 @@ function echart_topic_domain(rs){
'parent': '',
'name': 'TOPIC'
}];
var unit="bytes";
$(rs).each(function(i,d){
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
data.push({
'id': '1.'+d.topicId,
'parent': '0.0',
'name': d.topic,
'value':d.count
'value':parseFloat(inoctetsNum)
});
/****主题中的子域名*******/
$(d.domainData).each(function(j,t){
var domainNum=d.count;
unit=changeUnit(domainNum);
domainNum=changeNum(domainNum);
data.push({
'id': '2.'+t.webId,
'parent': '1.'+d.topicId,
'name': t.domain,
'value':t.count
'value':parseFloat(domainNum)
});
})
@@ -1186,7 +1254,7 @@ function echart_topic_domain(rs){
}],
tooltip: {
headerFormat: "",
pointFormat: '<b>{point.name}</b>: <b>{point.value}</b>'
pointFormat: '<b>{point.name}</b> : <b>{point.value}<b> ' +unit
}
});
}