From 9794452376eaf13c0c690642165a5d9188bd8015 Mon Sep 17 00:00:00 2001 From: zhanghongqing Date: Wed, 18 Jul 2018 09:14:15 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E6=A0=B7=E5=BC=8F=E5=8F=8A?= =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/messages/message_en.properties | 10 +- .../global/plugins/highcharts/css/common.css | 19 ++ .../plugins/highcharts/css/data_text.css | 21 +- .../global/plugins/highcharts/echart.js | 192 ++++++++++++++---- 4 files changed, 186 insertions(+), 56 deletions(-) diff --git a/src/main/resources/messages/message_en.properties b/src/main/resources/messages/message_en.properties index bf19c862e..ab843c915 100644 --- a/src/main/resources/messages/message_en.properties +++ b/src/main/resources/messages/message_en.properties @@ -969,16 +969,16 @@ dashboard=Dashboard traffic_chart=Traffic Chart os_type=OS Type browser_type=Browser Type -traffic_protocol_chart=Traffic Protocol Chart -traffic_ipactive_chart=Traffic IpActive Chart -traffic_app_chart=Traffic App Chart +traffic_protocol_chart=Protocol Chart +traffic_ipactive_chart=IP Active Chart +traffic_app_chart=App Chart traffic_ua_list=Traffic UA List traffic_ua_chart=Traffic UA Chart ranking=Ranking os=OS browser=Browser trend=Trend -traffic_website_list=Traffic Website List -traffic_website_type_chart=Traffic Website Type Chart +traffic_website_list=Website List +traffic_website_type_chart=Website Type Chart website=Website #===============dashboard end=================================== \ No newline at end of file diff --git a/src/main/webapp/static/global/plugins/highcharts/css/common.css b/src/main/webapp/static/global/plugins/highcharts/css/common.css index 77cdc3f59..6593d893c 100644 --- a/src/main/webapp/static/global/plugins/highcharts/css/common.css +++ b/src/main/webapp/static/global/plugins/highcharts/css/common.css @@ -82,4 +82,23 @@ a { float: right; } +td a { + color:#fff +} +/* td a:link { + color:#fff; + text-decoration:none +} +td a:active { + color:red; + text-decoration:none +} +td a:visited { + color:red; + text-decoration:none +} +td a:hover { + color:red; + text-decoration:underline +} */ /*content 结束*/ \ No newline at end of file diff --git a/src/main/webapp/static/global/plugins/highcharts/css/data_text.css b/src/main/webapp/static/global/plugins/highcharts/css/data_text.css index 6ddd31351..7cdaa2f79 100644 --- a/src/main/webapp/static/global/plugins/highcharts/css/data_text.css +++ b/src/main/webapp/static/global/plugins/highcharts/css/data_text.css @@ -1,7 +1,7 @@ .data_content{ /*overflow-x: hidden;*/ /* min-width: 1366px; */ - background-color: #0E0E0E; + background-color: #1c1c1c; padding-top: 10px; padding-bottom: 10px; } @@ -33,14 +33,14 @@ margin-bottom: 5px; } .data_content .data_main .main_left div .main_title{ - width: 180px; + width: 230px; height: 35px; line-height: 33px; background-color: #333333; border-radius: 18px; position: absolute; top: -17px; - left:50%; + left:45%; margin-left: -90px; color:#fff; font-size: 18px; @@ -76,20 +76,21 @@ /*background: url("../img/chart_map.png") no-repeat center ;*/ } .data_content .data_main .main_center .main_title{ - width: 180px; + width: 250px; height: 35px; line-height: 33px; background-color: #333333; border-radius: 18px; position: absolute; top: -17px; - left:50%; + left:45%; margin-left: -90px; color:#fff; font-size: 18px; font-weight: 600; box-sizing: border-box; padding-left: 45px; + text-align:auto; z-index: 1000; } @@ -150,14 +151,14 @@ margin-bottom: 5px; } .data_content .data_main .main_right div .main_title{ - width: 180px; + width: 230px; height: 35px; line-height: 33px; background-color: #333333; border-radius: 18px; position: absolute; top: -17px; - left:50%; + left:45%; margin-left: -90px; color:#fff; font-size: 18px; @@ -250,7 +251,7 @@ font-size: 18px; font-weight: 600; box-sizing: border-box; - padding-left: 45px; + padding-left: 30px; } .data_content .data_bottom div .main_title img{ position: absolute; @@ -274,7 +275,7 @@ .data_content .data_bottom div .main_table th{ font-size: 14px; font-weight: 600; - color:#333333; + color:#757575; text-align: center; } .data_content .data_bottom div .main_table th:nth-child(1){ @@ -296,7 +297,7 @@ .data_content .data_bottom div .main_table tbody tr:nth-child(7), .data_content .data_bottom div .main_table tbody tr:nth-child(9), .data_content .data_bottom div .main_table tbody tr:nth-child(5){ - background-color: #0e0e0e; + background-color: #1c1c1c; box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/ 10px 0px 15px #333333 inset; /*右边阴影*/ /*0px 10px 15px #333333 inset;*/ diff --git a/src/main/webapp/static/global/plugins/highcharts/echart.js b/src/main/webapp/static/global/plugins/highcharts/echart.js index 3898dd9a9..4090b8e24 100644 --- a/src/main/webapp/static/global/plugins/highcharts/echart.js +++ b/src/main/webapp/static/global/plugins/highcharts/echart.js @@ -40,7 +40,7 @@ // margin:10, }, - colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], + colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6' ,'#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], title: { text: null }, @@ -84,12 +84,12 @@ point: { events: { mouseOver: function(e) { // 鼠标滑过时动态更新标题 + console.log(e) // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle chart.setTitle({ - text: e.target.name+ '\t'+ e.target.y + ' %', + text: '
'+e.target.name, style: {//设置字体颜色 color: '#fff', - fontSize:'14px', fontFamily:'Microsoft YaHei' }, }); @@ -133,7 +133,7 @@ } - // echart_main中心图 + // echart_main中心图 活跃IP统计 function echart_main(rs) { var data=new Array(); var xData=new Array(); @@ -173,14 +173,8 @@ // marginLeft:80, marginTop:50, inverted: true, - style: { - fontFamily: "Microsoft YaHei", - color: "#fff", - fontSize:'10px', -// fontStyle: "italic" - }, }, - colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], + colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], title: { text: null }, @@ -190,8 +184,6 @@ title: { text: null }, - labels: { - }, labels:{ formatter:function(){ if(this.value.length>7){ @@ -206,10 +198,14 @@ yAxis: { min: 0, title: { - text: null, + text: 'linkNum', + align:'high', + style: {//设置字体颜色 + color: '#fff', + fontFamily:'Microsoft YaHei' + }, }, labels: { - overflow: 'justify', style: {//设置字体颜色 color: '#fff', fontFamily:'Microsoft YaHei' @@ -241,6 +237,17 @@ data: data }], drilldown:{ + activeAxisLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei', + + }, + activeDataLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei' + }, drillUpButton:{ relativeTo: 'spacingBox', }, @@ -281,10 +288,18 @@ plotBorderWidth:null, plotShadow:false, type: 'column', -// margin:50, + marginTop:50, marginBottom:60, + }, - colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], + labels:{ + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, + }, + colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], title: { text: null }, @@ -293,17 +308,33 @@ }, xAxis: { categories: xData, - style: {//设置字体颜色 - color: '#fff', - fontSize:'10px', - fontFamily:'Microsoft YaHei' - }, - + labels:{ + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, + }, + title: { + text: 'App', + align:'high', + style: {//设置字体颜色 + color: '#fff', + fontFamily:'Microsoft YaHei' + }, + }, }, yAxis: { min: 0, title: { text: null + }, + labels:{ + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, } }, tooltip: { @@ -334,6 +365,17 @@ data: data }], drilldown:{ + activeAxisLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei', + + }, + activeDataLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei' + }, drillUpButton: { relativeTo: 'spacingBox', }, @@ -389,9 +431,9 @@ function echart_2(rs){ fontFamily:'Microsoft YaHei', } }, - colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], + colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], title: { - text: '', + text: null, style: {//设置字体颜色 color: '#fff', fontSize:'18px', @@ -402,15 +444,15 @@ function echart_2(rs){ plotOptions: { series: { dataLabels: { - enabled: true, + enabled: false, format: '{point.name}' }, }, pie:{ -// showInLegend: true, + showInLegend: true, point: { events: { - mouseOver: function(e) { // 鼠标滑过时动态更新标题 + mouseOver: function(e) { this.slice(); }, // 鼠标移出时，收回突出显示 @@ -428,6 +470,15 @@ function echart_2(rs){ credits:{//是否有highcharts水印 enabled:false }, + legend:{ + itemHoverStyle:{ + color:'#61D2F7', + }, + itemStyle:{ + color: '#fff', + fontFamily:'Microsoft YaHei', + } + }, tooltip: { enabled: true, headerFormat: '{point.key}: {point.percentage:.1f}%
', @@ -441,6 +492,17 @@ function echart_2(rs){ data: data }], drilldown:{ + activeAxisLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei', + + }, + activeDataLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei' + }, series:drillData, drillUpButton: { relativeTo: 'spacingBox', @@ -485,9 +547,6 @@ function echart_5(rs){ type: 'pie' }, legend:{ - layout:'vertical', - align:'center', - verticalAligh:'bottom', itemHoverStyle:{ color:'#61D2F7', }, @@ -496,9 +555,9 @@ function echart_5(rs){ fontFamily:'Microsoft YaHei', } }, - colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], + colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], title: { - text: '', + text: null, style: {//设置字体颜色 color: '#fff', fontSize:'18px', @@ -509,7 +568,7 @@ function echart_5(rs){ plotOptions: { series: { dataLabels: { - enabled: true, + enabled: false, format: '{point.name}' }, @@ -530,7 +589,7 @@ function echart_5(rs){ } }, }, -// showInLegend: true, + showInLegend: true, } }, credits:{//是否有highcharts水印 @@ -549,6 +608,17 @@ function echart_5(rs){ data: data }], drilldown:{ + activeAxisLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei', + + }, + activeDataLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei' + }, series:drillData, drillUpButton: { relativeTo: 'spacingBox', @@ -594,19 +664,19 @@ function echart_4(rs){ type: 'pie' }, - colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], + colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], title: { text: null, }, plotOptions: { series: { dataLabels: { - enabled: true, + enabled: false, format: '{point.name}' }, -// showInLegend: true, }, pie:{ + showInLegend: true, point: { events: { mouseOver: function(e) { @@ -627,6 +697,15 @@ function echart_4(rs){ credits:{//是否有highcharts水印 enabled:false }, + legend:{ + itemHoverStyle:{ + color:'#61D2F7', + }, + itemStyle:{ + color: '#fff', + fontFamily:'Microsoft YaHei', + } + }, tooltip: { enabled: true, headerFormat: '{point.key}: {point.percentage:.1f}%
', @@ -640,6 +719,17 @@ function echart_4(rs){ data: data, }], drilldown:{ + activeAxisLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei', + + }, + activeDataLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei' + }, series:drillData, drillUpButton: { relativeTo: 'spacingBox', @@ -684,19 +774,19 @@ function echart_6(rs){ type: 'pie' }, - colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], + colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], title: { text: null, }, plotOptions: { series: { dataLabels: { - enabled: true, + enabled: false, format: '{point.name}' }, -// showInLegend: true, }, pie:{ + showInLegend: true, point: { events: { mouseOver: function(e) { // 鼠标滑过时动态更新标题 @@ -717,6 +807,15 @@ function echart_6(rs){ credits:{//是否有highcharts水印 enabled:false }, + legend:{ + itemHoverStyle:{ + color:'#61D2F7', + }, + itemStyle:{ + color: '#fff', + fontFamily:'Microsoft YaHei', + } + }, tooltip: { enabled: true, headerFormat: '{point.key}: {point.percentage:.1f}%
', @@ -730,6 +829,17 @@ function echart_6(rs){ data: data, }], drilldown:{ + activeAxisLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei', + + }, + activeDataLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei' + }, series:drillData, drillUpButton: { relativeTo: 'spacingBox',