1024 lines
24 KiB
JavaScript
1024 lines
24 KiB
JavaScript
|
||
|
||
//协议统计分析
|
||
function echart_1(rs) {
|
||
var data=new Array();
|
||
var drillData=new Array();
|
||
$(rs).each(function(i, d) {
|
||
var pktNum=new Array();
|
||
var byteLen=new Array();
|
||
//协议图-操作系统
|
||
data.push({
|
||
name: d.protoType,
|
||
y: parseInt(d.count),
|
||
drilldown: d.protoType,
|
||
});
|
||
|
||
pktNum[0]="pktNum";
|
||
pktNum[1]=parseInt(d.pktNum);
|
||
byteLen[0]="byteLen";
|
||
byteLen[1]=parseInt(d.byteLen);
|
||
|
||
drillData.push({
|
||
name: d.protoType,
|
||
id: d.protoType,
|
||
type:'pie',
|
||
innerSize: '70%',
|
||
data: [pktNum,byteLen],
|
||
});
|
||
|
||
});
|
||
var chart = Highcharts.chart('chart_1', {
|
||
chart: {
|
||
type: 'pie',
|
||
spacing : [40, 40 , 40, 40],
|
||
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||
plotBackgroundColor:null,
|
||
plotBorderWidth:null,
|
||
plotShadow:false,
|
||
// margin:10,
|
||
|
||
},
|
||
noData:{
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
},
|
||
},
|
||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6' ,'#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||
title: {
|
||
text: null
|
||
},
|
||
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
|
||
},
|
||
credits:{//是否有highcharts水印
|
||
enabled:false
|
||
},
|
||
legend:{
|
||
width:480,
|
||
x:50,
|
||
itemWidth:100,
|
||
itemDistance:2,
|
||
itemHoverStyle:{
|
||
color:'#61D2F7',
|
||
},
|
||
itemStyle:{
|
||
color: '#fff',
|
||
fontFamily:'Microsoft YaHei',
|
||
},
|
||
// navigation: {//图例分页
|
||
// activeColor: 'red',
|
||
// animation: true,
|
||
// arrowSize: 15,
|
||
// inactiveColor: '#CCC',
|
||
// style: {
|
||
// fontWeight: 'bold',
|
||
// color: '#333',
|
||
// fontSize: '12px'
|
||
// }
|
||
// }
|
||
},
|
||
|
||
plotOptions: {
|
||
pie: {
|
||
allowPointSelect: true,
|
||
cursor: 'pointer',
|
||
showInLegend: true,
|
||
dataLabels: {
|
||
enabled: false,
|
||
format: '{point.name}:</b>{point.percentage:.1f}%',
|
||
style: {
|
||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||
}
|
||
},
|
||
size: 200, //饼图的大小
|
||
states: {
|
||
hover: {
|
||
enabled: false
|
||
}
|
||
},
|
||
point: {
|
||
events: {
|
||
mouseOver: function(e) { // 鼠标滑过时动态更新标题
|
||
// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
|
||
chart.setTitle({
|
||
text:e.target.name.length>10? this.percentage.toFixed(1)+"%<br><span>"+e.target.name.substring(0,10)+"...</span>":this.percentage.toFixed(1)+"%<br><span>"+e.target.name.substring(0,10)+"</span>",
|
||
floating:true,
|
||
y:120,
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
fontFamily:'Microsoft YaHei'
|
||
},
|
||
});
|
||
this.slice();
|
||
},
|
||
// 鼠标移出时，收回突出显示
|
||
mouseOut: function() {
|
||
this.slice();
|
||
},
|
||
// 默认是点击突出，这里屏蔽掉
|
||
click: function() {
|
||
return false;
|
||
}
|
||
},
|
||
},
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
innerSize: '70%',//圆环的大小
|
||
name: 'count',
|
||
data: data
|
||
}],
|
||
drilldown:{
|
||
series:drillData,
|
||
drillUpButton: {
|
||
relativeTo: 'spacingBox',
|
||
}
|
||
}
|
||
|
||
}, function(c) { // 图表初始化完毕后的会掉函数
|
||
// 环形图圆心
|
||
var centerY = c.series[0].center[1],
|
||
titleHeight = parseInt(c.title.styles.fontSize);
|
||
// 动态设置标题位置
|
||
c.setTitle({
|
||
y:centerY + titleHeight/2
|
||
});
|
||
});
|
||
|
||
}
|
||
|
||
|
||
// echart_main中心图 活跃IP统计
|
||
function echart_main(rs) {
|
||
if(rs==null||rs.length<=0){
|
||
rs=[{"ipAddr":"103.6.1.12","linkNum":532,"pktNum": 5,"byteLen": 6},
|
||
{"ipAddr":"163.5.6.43","linkNum":532,"pktNum": 5,"byteLen": 7},
|
||
{"ipAddr":"170.1.0.1","linkNum":532,"pktNum": 5,"byteLen": 8},
|
||
{"ipAddr":"10.32.33.61","linkNum":532,"pktNum": 5,"byteLen": 9},
|
||
{"ipAddr":"145.16.1.2","linkNum":532,"pktNum": 5,"byteLen": 10},
|
||
{"ipAddr":"153.5.0.36","linkNum":532,"pktNum": 5,"byteLen": 11}]
|
||
}
|
||
var data=new Array();
|
||
var xData=new Array();
|
||
var drillData=new Array();
|
||
$(rs).each(function(i, d) {
|
||
var pktNum=new Array();
|
||
var byteLen=new Array();
|
||
xData.push(d.ipAddr);
|
||
//活跃IP图
|
||
data.push({
|
||
name: d.ipAddr,
|
||
y: parseInt(d.linkNum),
|
||
drilldown: d.ipAddr,
|
||
});
|
||
pktNum[0]="pktNum";
|
||
pktNum[1]=parseInt(d.pktNum);
|
||
byteLen[0]="byteLen";
|
||
byteLen[1]=parseInt(d.byteLen);
|
||
drillData.push({
|
||
name: d.ipAddr,
|
||
id: d.ipAddr,
|
||
type:'pie',
|
||
tooltip: {
|
||
enabled: true,
|
||
pointFormat: '{series.name}: {point.y}<b> ({point.percentage:.1f}%)'
|
||
},
|
||
data: [pktNum,byteLen],
|
||
});
|
||
});
|
||
var chart = Highcharts.chart('chart_main', {
|
||
chart: {
|
||
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||
plotBackgroundColor:null,
|
||
plotBorderWidth:null,
|
||
plotShadow:false,
|
||
type: 'bar',
|
||
// marginLeft:80,
|
||
marginTop:50,
|
||
inverted: true,
|
||
},
|
||
noData:{
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
},
|
||
},
|
||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||
title: {
|
||
text: null
|
||
},
|
||
xAxis: {
|
||
type:'category',
|
||
categories: xData,
|
||
title: {
|
||
text: null
|
||
},
|
||
labels:{
|
||
formatter:function(){
|
||
if(this.value.length>15){
|
||
return '<span>'+this.value.substring(0,15)+"..."+'</span>'
|
||
}else{
|
||
return this.value
|
||
}
|
||
}
|
||
}
|
||
|
||
},
|
||
yAxis: {
|
||
min: 0,
|
||
title: {
|
||
text: 'Link Number',
|
||
align:'high',
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
fontFamily:'Microsoft YaHei'
|
||
},
|
||
},
|
||
labels: {
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
fontFamily:'Microsoft YaHei'
|
||
},
|
||
},
|
||
lineWidth: 1,
|
||
|
||
},
|
||
tooltip: {
|
||
// valueSuffix: ' 单位'
|
||
},
|
||
|
||
plotOptions: {
|
||
bar: {
|
||
dataLabels: {
|
||
enabled: true,
|
||
allowOverlap: true, // 允许数据标签重叠
|
||
},
|
||
|
||
showInLegend:false
|
||
},
|
||
},
|
||
credits:{//是否有highcharts水印
|
||
enabled:false
|
||
},
|
||
series: [{
|
||
name: 'Link Number',
|
||
colorByPoint: true,
|
||
data: data
|
||
}],
|
||
drilldown:{
|
||
activeAxisLabelStyle:{
|
||
textDecoration:'none',
|
||
color: '#fff',
|
||
fontStyle:'Microsoft YaHei',
|
||
|
||
},
|
||
activeDataLabelStyle:{
|
||
textDecoration:'none',
|
||
color: '#fff',
|
||
fontStyle:'Microsoft YaHei'
|
||
},
|
||
drillUpButton:{
|
||
relativeTo: 'spacingBox',
|
||
},
|
||
series:drillData
|
||
}
|
||
});
|
||
}
|
||
|
||
//app应用类型统计 echart_3
|
||
function echart_3(rs) {
|
||
var data=new Array();
|
||
var xData=new Array();
|
||
var drillData=new Array();
|
||
$(rs).each(function(i, d) {
|
||
var pktNum=new Array();
|
||
var byteLen=new Array();
|
||
xData.push(d.appType);
|
||
//活跃IP图
|
||
data.push({
|
||
name: d.appType,
|
||
y: parseInt(d.count),
|
||
// drilldown: d.appType,
|
||
});
|
||
pktNum[0]="pktNum";
|
||
pktNum[1]=parseInt(d.pktNum);
|
||
byteLen[0]="byteLen";
|
||
byteLen[1]=parseInt(d.byteLen);
|
||
drillData.push({
|
||
name: d.appType,
|
||
id: d.appType,
|
||
data: [pktNum,byteLen],
|
||
});
|
||
});
|
||
var chart = Highcharts.chart('chart_3',{
|
||
chart: {
|
||
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||
plotBackgroundColor:null,
|
||
plotBorderWidth:null,
|
||
plotShadow:false,
|
||
type: 'column',
|
||
marginTop:50,
|
||
marginBottom:60,
|
||
|
||
},
|
||
noData:{
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
},
|
||
},
|
||
labels:{
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
fontSize:'10px',
|
||
fontFamily:'Microsoft YaHei'
|
||
},
|
||
},
|
||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||
title: {
|
||
text: null
|
||
},
|
||
credits:{//是否有highcharts水印
|
||
enabled:false
|
||
},
|
||
xAxis: {
|
||
categories: xData,
|
||
labels:{
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
fontSize:'10px',
|
||
fontFamily:'Microsoft YaHei'
|
||
},
|
||
},
|
||
title: {
|
||
text: 'App',
|
||
align:'high',
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
fontSize:'10px',
|
||
fontFamily:'Microsoft YaHei'
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
min: 0,
|
||
title: {
|
||
text: 'Link Number',
|
||
align:'high',
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
fontFamily:'Microsoft YaHei'
|
||
},
|
||
},
|
||
labels:{
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
fontSize:'10px',
|
||
fontFamily:'Microsoft YaHei'
|
||
},
|
||
}
|
||
},
|
||
tooltip: {
|
||
enabled: true,
|
||
headerFormat: '<span style="font-size:10px"><b>{point.key}</span><br>',
|
||
pointFormat: '{series.name}: {point.y}<b>',
|
||
shared: true,
|
||
useHTML: true
|
||
},
|
||
plotOptions: {
|
||
column: {
|
||
dataLabels: {//数字显示
|
||
enabled: true,
|
||
allowOverlap: true, // 允许数据标签重叠
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
fontSize:'10px',
|
||
fontFamily:'Microsoft YaHei'
|
||
},
|
||
},
|
||
showInLegend:false
|
||
},
|
||
},
|
||
|
||
series: [{
|
||
name: 'count',
|
||
colorByPoint: true,
|
||
data: data
|
||
}],
|
||
/*drilldown:{
|
||
activeAxisLabelStyle:{
|
||
textDecoration:'none',
|
||
color: '#fff',
|
||
fontStyle:'Microsoft YaHei',
|
||
|
||
},
|
||
activeDataLabelStyle:{
|
||
textDecoration:'none',
|
||
color: '#fff',
|
||
fontStyle:'Microsoft YaHei'
|
||
},
|
||
drillUpButton: {
|
||
relativeTo: 'spacingBox',
|
||
},
|
||
series:drillData
|
||
}*/
|
||
});
|
||
}
|
||
//终端用户 分操作系统与浏览器
|
||
function echart_2(rs){
|
||
var data=new Array();
|
||
var drillData=new Array();
|
||
$(rs).each(function(i, d) {
|
||
var pktNum=new Array();
|
||
var byteLen=new Array();
|
||
//协议图-操作系统
|
||
data.push({
|
||
name: d.osType,
|
||
y: parseInt(d.count),
|
||
drilldown: d.osType,
|
||
});
|
||
|
||
pktNum[0]="pktNum";
|
||
pktNum[1]=parseInt(d.pktNum);
|
||
byteLen[0]="byteLen";
|
||
byteLen[1]=parseInt(d.byteLen);
|
||
|
||
drillData.push({
|
||
name: d.osType,
|
||
id: d.osType,
|
||
type:'pie',
|
||
data: [pktNum,byteLen],
|
||
});
|
||
|
||
});
|
||
// 创建图例
|
||
var chart = Highcharts.chart('chart_2',{
|
||
chart: {
|
||
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||
plotBackgroundColor:null,
|
||
plotBorderWidth:null,
|
||
plotShadow:false,
|
||
type: 'pie'
|
||
},
|
||
noData:{
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
},
|
||
},
|
||
legend:{
|
||
width:480,
|
||
x:40,
|
||
itemWidth:100,
|
||
itemDistance:2,
|
||
itemHoverStyle:{
|
||
color:'#61D2F7',
|
||
},
|
||
itemStyle:{
|
||
color: '#fff',
|
||
fontFamily:'Microsoft YaHei',
|
||
}
|
||
},
|
||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||
title: {
|
||
text: null,
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
fontSize:'18px',
|
||
fontFamily:'Microsoft YaHei'
|
||
},
|
||
|
||
},
|
||
plotOptions: {
|
||
series: {
|
||
dataLabels: {
|
||
enabled: false,
|
||
format: '{point.name}'
|
||
},
|
||
},
|
||
pie:{
|
||
showInLegend: true,
|
||
point: {
|
||
events: {
|
||
mouseOver: function(e) {
|
||
this.slice();
|
||
},
|
||
// 鼠标移出时，收回突出显示
|
||
mouseOut: function() {
|
||
this.slice();
|
||
},
|
||
// 默认是点击突出，这里屏蔽掉
|
||
click: function() {
|
||
return false;
|
||
}
|
||
},
|
||
},
|
||
}
|
||
},
|
||
credits:{//是否有highcharts水印
|
||
enabled:false
|
||
},
|
||
tooltip: {
|
||
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
|
||
},
|
||
series: [{
|
||
name: 'count',
|
||
colorByPoint: true,
|
||
data: data
|
||
}],
|
||
drilldown:{
|
||
activeAxisLabelStyle:{
|
||
textDecoration:'none',
|
||
color: '#fff',
|
||
fontStyle:'Microsoft YaHei',
|
||
|
||
},
|
||
activeDataLabelStyle:{
|
||
textDecoration:'none',
|
||
color: '#fff',
|
||
fontStyle:'Microsoft YaHei'
|
||
},
|
||
series:drillData,
|
||
drillUpButton: {
|
||
relativeTo: 'spacingBox',
|
||
}
|
||
}
|
||
});
|
||
}
|
||
//当点击操作系统列表时-显示浏览器
|
||
function echart_5(rs){
|
||
var data=new Array();
|
||
var drillData=new Array();
|
||
$(rs).each(function(i, d) {
|
||
var pktNum=new Array();
|
||
var byteLen=new Array();
|
||
//协议图-操作系统
|
||
data.push({
|
||
name: d.bsType,
|
||
y: parseInt(d.count),
|
||
drilldown: d.bsType,
|
||
});
|
||
|
||
pktNum[0]="pktNum";
|
||
pktNum[1]=parseInt(d.pktNum);
|
||
byteLen[0]="byteLen";
|
||
byteLen[1]=parseInt(d.byteLen);
|
||
|
||
drillData.push({
|
||
name: d.bsType,
|
||
id: d.bsType,
|
||
type:'pie',
|
||
data: [pktNum,byteLen],
|
||
});
|
||
|
||
});
|
||
// 创建图例
|
||
var chart = Highcharts.chart('chart_2',{
|
||
chart: {
|
||
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||
plotBackgroundColor:null,
|
||
plotBorderWidth:null,
|
||
plotShadow:false,
|
||
type: 'pie'
|
||
},
|
||
legend:{
|
||
width:480,
|
||
x:40,
|
||
itemWidth:100,
|
||
itemDistance:2,
|
||
itemHoverStyle:{
|
||
color:'#61D2F7',
|
||
},
|
||
itemStyle:{
|
||
color: '#fff',
|
||
fontFamily:'Microsoft YaHei',
|
||
}
|
||
},
|
||
noData:{
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
},
|
||
},
|
||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||
title: {
|
||
text: null,
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
fontSize:'18px',
|
||
fontFamily:'Microsoft YaHei'
|
||
},
|
||
|
||
},
|
||
plotOptions: {
|
||
series: {
|
||
dataLabels: {
|
||
enabled: false,
|
||
format: '{point.name}'
|
||
},
|
||
|
||
},
|
||
pie:{
|
||
point: {
|
||
events: {
|
||
mouseOver: function(e) { // 鼠标滑过时动态更新标题
|
||
this.slice();
|
||
},
|
||
// 鼠标移出时，收回突出显示
|
||
mouseOut: function() {
|
||
this.slice();
|
||
},
|
||
// 默认是点击突出，这里屏蔽掉
|
||
click: function() {
|
||
return false;
|
||
}
|
||
},
|
||
},
|
||
showInLegend: true,
|
||
}
|
||
},
|
||
credits:{//是否有highcharts水印
|
||
enabled:false
|
||
},
|
||
tooltip: {
|
||
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
|
||
},
|
||
series: [{
|
||
name: 'count',
|
||
colorByPoint: true,
|
||
data: data
|
||
}],
|
||
drilldown:{
|
||
activeAxisLabelStyle:{
|
||
textDecoration:'none',
|
||
color: '#fff',
|
||
fontStyle:'Microsoft YaHei',
|
||
|
||
},
|
||
activeDataLabelStyle:{
|
||
textDecoration:'none',
|
||
color: '#fff',
|
||
fontStyle:'Microsoft YaHei'
|
||
},
|
||
series:drillData,
|
||
drillUpButton: {
|
||
relativeTo: 'spacingBox',
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
//网站流量分析
|
||
function echart_4(rs){
|
||
var data=new Array();
|
||
var drillData=new Array();
|
||
$(rs).each(function(i, d) {
|
||
var pktNum=new Array();
|
||
var byteLen=new Array();
|
||
data.push({
|
||
name: d.websiteService,
|
||
y: parseInt(d.count),
|
||
drilldown: d.websiteService,
|
||
});
|
||
|
||
pktNum[0]="pktNum";
|
||
pktNum[1]=parseInt(d.pktNum);
|
||
byteLen[0]="byteLen";
|
||
byteLen[1]=parseInt(d.byteLen);
|
||
|
||
drillData.push({
|
||
name: d.websiteService,
|
||
id: d.websiteService,
|
||
type:'pie',
|
||
data: [pktNum,byteLen],
|
||
});
|
||
|
||
});
|
||
// 创建图例
|
||
var chart = Highcharts.chart('chart_4',{
|
||
chart: {
|
||
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||
plotBackgroundColor:null,
|
||
plotBorderWidth:null,
|
||
plotShadow:false,
|
||
type: 'pie'
|
||
},
|
||
|
||
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||
title: {
|
||
text: null,
|
||
},
|
||
noData:{
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
},
|
||
},
|
||
plotOptions: {
|
||
series: {
|
||
dataLabels: {
|
||
enabled: false,
|
||
format: '{point.name}'
|
||
},
|
||
},
|
||
pie:{
|
||
showInLegend: true,
|
||
point: {
|
||
events: {
|
||
mouseOver: function(e) {
|
||
this.slice();
|
||
},
|
||
// 鼠标移出时，收回突出显示
|
||
mouseOut: function() {
|
||
this.slice();
|
||
},
|
||
// 默认是点击突出，这里屏蔽掉
|
||
click: function() {
|
||
return false;
|
||
}
|
||
},
|
||
},
|
||
}
|
||
},
|
||
credits:{//是否有highcharts水印
|
||
enabled:false
|
||
},
|
||
legend:{
|
||
width:480,
|
||
x:50,
|
||
itemWidth:100,
|
||
itemDistance:2,
|
||
itemHoverStyle:{
|
||
color:'#61D2F7',
|
||
},
|
||
itemStyle:{
|
||
color: '#fff',
|
||
fontFamily:'Microsoft YaHei',
|
||
}
|
||
},
|
||
tooltip: {
|
||
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
|
||
},
|
||
series: [{
|
||
name: 'count',
|
||
colorByPoint: true,
|
||
data: data,
|
||
}],
|
||
drilldown:{
|
||
activeAxisLabelStyle:{
|
||
textDecoration:'none',
|
||
color: '#fff',
|
||
fontStyle:'Microsoft YaHei',
|
||
|
||
},
|
||
activeDataLabelStyle:{
|
||
textDecoration:'none',
|
||
color: '#fff',
|
||
fontStyle:'Microsoft YaHei'
|
||
},
|
||
series:drillData,
|
||
drillUpButton: {
|
||
relativeTo: 'spacingBox',
|
||
}
|
||
}
|
||
});
|
||
}
|
||
//网站流量分析-点击列表显示网站分类
|
||
function echart_6(rs){
|
||
var data=new Array();
|
||
var drillData=new Array();
|
||
$(rs).each(function(i, d) {
|
||
var pktNum=new Array();
|
||
var byteLen=new Array();
|
||
//协议图-操作系统
|
||
data.push({
|
||
name: d.domain,
|
||
y: parseInt(d.count),
|
||
drilldown: d.domain,
|
||
});
|
||
|
||
pktNum[0]="pktNum";
|
||
pktNum[1]=parseInt(d.pktNum);
|
||
byteLen[0]="byteLen";
|
||
byteLen[1]=parseInt(d.byteLen);
|
||
|
||
drillData.push({
|
||
name: d.domain,
|
||
id: d.domain,
|
||
type:'pie',
|
||
data: [pktNum,byteLen],
|
||
});
|
||
|
||
});
|
||
// 创建图例
|
||
var chart = Highcharts.chart('chart_4',{
|
||
chart: {
|
||
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||
plotBackgroundColor:null,
|
||
plotBorderWidth:null,
|
||
plotShadow:false,
|
||
type: 'pie'
|
||
},
|
||
noData:{
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
},
|
||
},
|
||
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||
title: {
|
||
text: null,
|
||
},
|
||
plotOptions: {
|
||
series: {
|
||
dataLabels: {
|
||
enabled: false,
|
||
format: '{point.name}'
|
||
},
|
||
},
|
||
pie:{
|
||
showInLegend: true,
|
||
point: {
|
||
events: {
|
||
mouseOver: function(e) { // 鼠标滑过时动态更新标题
|
||
this.slice();
|
||
},
|
||
// 鼠标移出时，收回突出显示
|
||
mouseOut: function() {
|
||
this.slice();
|
||
},
|
||
// 默认是点击突出，这里屏蔽掉
|
||
click: function() {
|
||
return false;
|
||
}
|
||
},
|
||
},
|
||
}
|
||
},
|
||
credits:{//是否有highcharts水印
|
||
enabled:false
|
||
},
|
||
legend:{
|
||
width:480,
|
||
x:50,
|
||
itemWidth:100,
|
||
itemDistance:2,
|
||
itemHoverStyle:{
|
||
color:'#61D2F7',
|
||
},
|
||
itemStyle:{
|
||
color: '#fff',
|
||
fontFamily:'Microsoft YaHei',
|
||
}
|
||
},
|
||
tooltip: {
|
||
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
|
||
},
|
||
series: [{
|
||
name: 'count',
|
||
colorByPoint: true,
|
||
data: data,
|
||
}],
|
||
drilldown:{
|
||
activeAxisLabelStyle:{
|
||
textDecoration:'none',
|
||
color: '#fff',
|
||
fontStyle:'Microsoft YaHei',
|
||
|
||
},
|
||
activeDataLabelStyle:{
|
||
textDecoration:'none',
|
||
color: '#fff',
|
||
fontStyle:'Microsoft YaHei'
|
||
},
|
||
series:drillData,
|
||
drillUpButton: {
|
||
relativeTo: 'spacingBox',
|
||
}
|
||
}
|
||
});
|
||
}
|
||
function echart_topic_domain(rs){
|
||
var data=[{
|
||
'id': '0.0',
|
||
'parent': '',
|
||
'name': 'TOPIC'
|
||
}];
|
||
|
||
$(rs).each(function(i,d){
|
||
data.push({
|
||
'id': '1.'+d.topicId,
|
||
'parent': '0.0',
|
||
'name': d.topic,
|
||
'value':d.count
|
||
});
|
||
/****主题中的子域名*******/
|
||
$(d.domainData).each(function(j,t){
|
||
data.push({
|
||
'id': '2.'+t.webId,
|
||
'parent': '1.'+d.topicId,
|
||
'name': t.domain,
|
||
'value':t.count
|
||
});
|
||
})
|
||
|
||
});
|
||
|
||
|
||
// Splice in transparent for the center circle
|
||
Highcharts.getOptions().colors.splice(0, 0, 'transparent');
|
||
|
||
|
||
var chart = Highcharts.chart('chart_topic', {
|
||
|
||
chart: {
|
||
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||
plotBackgroundColor:null,
|
||
plotBorderWidth:null,
|
||
plotShadow:false,
|
||
marginTop:50,
|
||
marginBottom:10,
|
||
},
|
||
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6','#0099cc','#cc0033','#ff6633','#99cccc','#d9f9d0'],
|
||
noData:{
|
||
style: {//设置字体颜色
|
||
color: '#fff',
|
||
},
|
||
},
|
||
title: {
|
||
text: null
|
||
},
|
||
credits:{//是否有highcharts水印
|
||
enabled:false
|
||
},
|
||
series: [{
|
||
type: "sunburst",
|
||
data: data,
|
||
allowDrillToNode: true,
|
||
cursor: 'pointer',
|
||
colorByPoint: true,
|
||
dataLabels: {
|
||
format: '{point.name}',
|
||
filter: {
|
||
property: 'innerArcLength',
|
||
operator: '>',
|
||
value: 16
|
||
}
|
||
},
|
||
levels: [{
|
||
level: 1,
|
||
levelIsConstant: false,
|
||
dataLabels: {
|
||
rotationMode: 'parallel',
|
||
filter: {
|
||
property: 'outerArcLength',
|
||
operator: '>',
|
||
value: 64
|
||
}
|
||
}
|
||
}, {
|
||
level: 2,
|
||
colorByPoint: true,
|
||
dataLabels: {
|
||
rotationMode: 'parallel'
|
||
}
|
||
},
|
||
{
|
||
level: 3,
|
||
colorVariation: {
|
||
key: 'brightness',
|
||
to: -0.5
|
||
}
|
||
}, {
|
||
level: 4,
|
||
colorVariation: {
|
||
key: 'brightness',
|
||
to: 0.5
|
||
}
|
||
}]
|
||
|
||
}],
|
||
tooltip: {
|
||
headerFormat: "",
|
||
pointFormat: '<b>{point.name}</b>: <b>{point.value}</b>'
|
||
}
|
||
});
|
||
}
|
||
|