gfwleak/k18-ntcs-web-ntc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

流量统计首页样式更新

Browse Source
This commit is contained in:
zhangwei
2018-12-20 14:32:36 +06:00
parent e9e655c91e
commit 4a93a198fd
3 changed files with 637 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
src/main/webapp/static/pages/scripts/echart.js
View File

@@ -1,15 +1,5 @@
Highcharts.setOptions({ // Apply to all charts
chart: {
events: {
beforePrint: function () {
$(".highcharts-background").attr("fill","rgba(48,48,48,1)")
},
afterPrint: function () {
$(".highcharts-background").attr("fill","rgba(255, 255, 255, 0)")
}
}
}
});
//蓝色系 colors:['#0026af', '#0032bc', '#004bbc', '#015bb1', '#2f74b5', '#4186c1', '#5597cd', '#67a7de', '#77b5dc', '#98cde7', '#b9e7f4', '#d9ffff'],
//彩色系colors:[ '#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5','#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4'],
//协议统计分析
function echart_1(rs) {
@@ -29,7 +19,7 @@
// drilldown: d.protoType,
});
/*pktNum[0]="pktNum";
pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
@@ -40,7 +30,7 @@
type:'pie',
innerSize: '70%',
data: [pktNum,byteLen],
});*/
});
});
var chart = Highcharts.chart('chart_1', {
@@ -56,8 +46,8 @@
},
navigation: {
buttonOptions: {
x:25,
y: -18,
x:31,
y:-30
}
},
exporting: {
@@ -73,14 +63,16 @@
},
}
},
buttons: exportingButton('#3b355b')
},
noData:{
style: {//设置字体颜色
color: '#fff',
},
},
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6' ,'#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
//colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6' ,'#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
//colors:[ '#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4','#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5'],
colors:['#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5','#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4'],
title: {
text: null
},
@@ -123,6 +115,7 @@
plotOptions: {
pie: {
borderColor: "",
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
@@ -144,7 +137,7 @@
mouseOver: function(e) { // 鼠标滑过时动态更新标题
// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
chart.setTitle({
text:e.target.name.length>10? this.percentage.toFixed(2)+"%<br><span>"+(e.target.name+"").substring(0,10)+"...</span>":this.percentage.toFixed(2)+"%<br><span>"+e.target.name+"</span>",
text:e.target.name.length>10? this.percentage.toFixed(2)+"%<br><span>"+e.target.name.substring(0,10)+"...</span>":this.percentage.toFixed(2)+"%<br><span>"+(e.target.name+"").substring(0,10)+"</span>",
floating:true,
y:120,
style: {//设置字体颜色
@@ -164,7 +157,7 @@
}
},
},
}
},
},
series: [{
type: 'pie',
@@ -193,7 +186,7 @@
// echart_main中心图 活跃IP统计
function echart_main(rs) {
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},
@@ -245,12 +238,12 @@
marginTop:50,
inverted: true,
},
navigation: {
buttonOptions: {
y:13,
x:-7
}
},
//navigation: {
//buttonOptions: {
//y:13,
//x:-7
//}
//},
exporting: {
allowHTML:true,
filename:'Active-IP',
@@ -263,14 +256,40 @@
},
},
}
},
buttons: {
contextButton: {
symbolSize: 12,
symbolX: 11,
symbolY: 10,
symbolStroke: '#e6e6e6',
symbolFill: '#e6e6e6',
width: 21,
height: 20,
theme: {
'stroke-width': 1,
stroke: '#e6e6e6',
r: 0,
fill: '#51586f',
states: {
hover: {
fill: '#51586f'
},
select: {
fill: '#51586f'
}
}
}
}
}
},
noData:{
style: {//设置字体颜色
color: '#fff',
},
},
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
},//
//colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
colors:['#004bbc', '#015bb1', '#2f74b5', '#4186c1', '#5597cd', '#67a7de', '#77b5dc', '#98cde7', '#b9e7f4', '#d9ffff'],
title: {
text: null
},
@@ -304,45 +323,45 @@
},
yAxis: {
min: 0,
title: {
text: unit,
align:'high',
style: {//设置字体颜色
color: '#fff',
fontSize:'10px',
fontFamily:'Microsoft YaHei'
},
},
labels: {
style: {//设置字体颜色
color: '#fff',
fontSize:'10px',
fontFamily:'Microsoft YaHei'
},
},
lineWidth: 1,
min: 0,
title: {
text: unit,
align:'high',
style: {//设置字体颜色
color: '#fff',
fontSize:'10px',
fontFamily:'Microsoft YaHei'
},
},
labels: {
style: {//设置字体颜色
color: '#fff',
fontSize:'10px',
fontFamily:'Microsoft YaHei'
},
},
lineWidth: 1
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name} <br>{point.y}</b> '+unit
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
allowOverlap: true, // 允许数据标签重叠
style: {//设置字体颜色
color: '#fff',
fontSize:'10px',
fontFamily:'Microsoft YaHei'
},
},
showInLegend:false
},
bar: {
borderColor: "",
dataLabels: {
enabled: true,
allowOverlap: true, // 允许数据标签重叠
style: {//设置字体颜色
color: '#fff',
fontSize:'10px',
fontFamily:'Microsoft YaHei',
textOutline:'none',
fontWeight:'normal'
}
},
showInLegend: false
}
},
credits:{//是否有highcharts水印
enabled:false
@@ -351,7 +370,7 @@
name: ' ',
colorByPoint: true,
data: data
}]
}],
// drilldown:{
// activeAxisLabelStyle:{
// textDecoration:'none',
@@ -416,8 +435,8 @@
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
// var pktNum=new Array();
// var byteLen=new Array();
var pktNum=new Array();
var byteLen=new Array();
xData.push(d.appType);
data.push({
name: d.appType,
@@ -445,14 +464,15 @@
marginBottom:60,
},
navigation: {
/*navigation: {
buttonOptions: {
y: 13,
}
},
},*/
exporting: {
allowHTML:true,
filename:'App',
buttons: exportingButton('#415262')
},
noData:{
style: {//设置字体颜色
@@ -466,7 +486,8 @@
fontFamily:'Microsoft YaHei'
},
},
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
//colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
colors:['#0026af', '#0032bc', '#004bbc', '#015bb1', '#2f74b5', '#4186c1', '#5597cd', '#67a7de', '#77b5dc', '#98cde7', '#b9e7f4', '#d9ffff'],
title: {
text: null
},
@@ -520,20 +541,21 @@
useHTML: true
},
plotOptions: {
column: {
column: {
dataLabels: {// 柱形图上的数字显示
enabled: true,
allowOverlap: true, // 允许数据标签重叠
style: {//设置字体颜色
color: '#fff',
fontSize:'10px',
fontFamily:'Microsoft YaHei'
},
// format:"{point.y:.2f}",
fontFamily:'Microsoft YaHei',
textOutline:'none',
fontWeight:'normal'
}
},
borderColor: "",//去边框
showInLegend:false
},
},
},
series: [{
@@ -597,13 +619,8 @@ function echart_2(rs){
plotBackgroundColor:null,
plotBorderWidth:null,
plotShadow:false,
type: 'pie'
type: 'pie',
},
navigation: {
buttonOptions: {
y: -8,
}
},
exporting: {
allowHTML:true,
filename:'BS',
@@ -616,7 +633,8 @@ function echart_2(rs){
},
},
}
}
},
buttons: exportingButton('#372f57')
},
noData:{
style: {//设置字体颜色
@@ -636,7 +654,9 @@ function echart_2(rs){
fontFamily:'Microsoft YaHei',
}
},
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
//colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
//colors:[ '#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4','#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5'],
colors:['#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5','#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4'],
title: {
text: null,
style: {//设置字体颜色
@@ -654,7 +674,9 @@ function echart_2(rs){
},
},
pie:{
borderColor: "",
showInLegend: true,
size: '80%',
point: {
events: {
mouseOver: function(e) {
@@ -684,6 +706,7 @@ function echart_2(rs){
},
series: [{
name: ' ',
size: '80%',
colorByPoint: true,
data: data
}],
@@ -746,11 +769,11 @@ function echart_5(rs){
plotShadow:false,
type: 'pie'
},
navigation: {
/*navigation: {
buttonOptions: {
y: -8,
}
},
},*/
exporting: {
allowHTML:true,
filename:'BS',
@@ -763,7 +786,8 @@ function echart_5(rs){
},
},
}
}
},
buttons: exportingButton('#372f57')
},
legend:{
width:480,
@@ -783,7 +807,8 @@ function echart_5(rs){
color: '#fff',
},
},
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
colors:['#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5','#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4'],
/*colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],*/
title: {
text: null,
style: {//设置字体颜色
@@ -802,6 +827,7 @@ function echart_5(rs){
},
pie:{
borderColor: "",
point: {
events: {
mouseOver: function(e) { // 鼠标滑过时动态更新标题
@@ -818,6 +844,7 @@ function echart_5(rs){
},
},
showInLegend: true,
size: '80%',
}
},
credits:{//是否有highcharts水印
@@ -832,6 +859,7 @@ function echart_5(rs){
},
series: [{
name: ' ',
size: '80%',
colorByPoint: true,
data: data
}],
@@ -894,12 +922,6 @@ function echart_4(rs){
plotShadow:false,
type: 'pie'
},
navigation: {
buttonOptions: {
x:-5,
y: -10,
}
},
exporting: {
allowHTML:true,
filename:'Website',
@@ -909,12 +931,15 @@ function echart_4(rs){
dataLabels: {
enabled: true,
allowOverlap: true, // 允许数据标签重叠
},
}
},
}
}
},
buttons: exportingButton('#3c2347')
},
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
//colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
//colors:[ '#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4','#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5'],
colors:['#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5','#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4'],
title: {
text: null,
},
@@ -931,6 +956,8 @@ function echart_4(rs){
},
},
pie:{
borderColor: "",
size: "80%",
showInLegend: true,
point: {
events: {
@@ -1036,12 +1063,12 @@ function echart_6(rs){
plotShadow:false,
type: 'pie'
},
navigation: {
/*navigation: {
buttonOptions: {
x:-5,
y: -10,
}
},
},*/
exporting: {
allowHTML:true,
filename:'Website',
@@ -1073,6 +1100,7 @@ function echart_6(rs){
},
},
pie:{
borderColor: "",
showInLegend: true,
point: {
events: {
@@ -1185,12 +1213,12 @@ function echart_topic_domain(rs){
marginTop:50,
marginBottom:10,
},
navigation: {
/* navigation: {
buttonOptions: {
x:-5,
y:15,
}
},
},*/
exporting: {
allowHTML:true,
filename:'Topic',
@@ -1203,9 +1231,11 @@ function echart_topic_domain(rs){
},
},
}
}
},
buttons: exportingButton('#6e6379')
},
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6','#0099cc','#cc0033','#ff6633','#99cccc','#d9f9d0'],
//colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6','#0099cc','#cc0033','#ff6633','#99cccc','#d9f9d0'],
colors:['#003078','#004bbc', '#015bb1', '#2f74b5', '#4186c1', '#0058e1','#066aff', '#5597cd', '#5c9dff', '#67a7de', '#77b5dc', '#98cde7','#89b9ff','#78adff'],
noData:{
style: {//设置字体颜色
color: '#fff',
@@ -1224,7 +1254,12 @@ function echart_topic_domain(rs){
cursor: 'pointer',
colorByPoint: true,
dataLabels: {
format: '{point.name}',
//format: '{point.name}',
/*formatter: function(){
this.point.value = this.point.value.toFixed(2);
this.series.name = this.point.name;
console.info(this);
},*/
filter: {
property: 'innerArcLength',
operator: '>',
@@ -1264,10 +1299,54 @@ function echart_topic_domain(rs){
}]
}],
plotOptions: {
sunburst: {
borderColor: "",
dataLabels: {
enabled: true,
style: {//设置字体颜色
color: '#fff',
fontSize:'11px',
fontFamily:'Microsoft YaHei',
textOutline:'none',
fontWeight:'normal'
},
format: '{point.name}',
}
}
},
tooltip: {
headerFormat: "",
pointFormat: '<b>{point.name}</b> : <b>{point.value}<b> ' +unit
pointFormat: '<b>{point.name}</b> : <b>{point.value:.2f}<b> ' +unit
}
});
}
function exportingButton(color) {
var button = {
contextButton: {
symbolSize: 12,
symbolX: 11,
symbolY: 10,
symbolStroke: '#e6e6e6',
symbolFill: '#e6e6e6',
width: 21,
height: 20,
theme: {
'stroke-width': 1,
stroke: '#e6e6e6',
r: 0,
fill: color,
states: {
hover: {
fill: color
},
select: {
fill: color
}
}
}
}
};
return button;
}