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

210
src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp
View File

@@ -15,7 +15,32 @@
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
body {
overflow-x:hidden
}
.chart_topic text {
color: #fff
}
.fa-arrow-circle-up {
color: #fe392e;
background-color: white;
border-radius: 10px;
font-size: 13px;
width: 10px;
height: 10px;
line-height: 9px !important;
}
.fa-arrow-circle-down {
color: #42DEEB;
background-color: white;
border-radius: 10px;
font-size: 13px;
width: 10px;
height: 10px;
line-height: 9px !important;
}
</style>
</head>
<body>
@@ -118,7 +143,6 @@
<i class="fa fa-unlink"> </i>
</div>
<div class="fl_fc">
<!-- <a href="javacript:;"> -->
<p data-original-title="<spring:message code="active_link"/>"
class="tooltips" data-flag="false" data-html="true" data-placement="top">
<!-- 活跃链接数 --><spring:message code="active_link"/></p>
@@ -162,27 +186,40 @@
<div class="main_left fl">
<div class="left_1">
<div class="main_title">
<spring:message code="traffic_ipactive_chart"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-line-chart"></i></a> <a href="javascipt:void(0)" onclick="ipActiveList();return false;"><i class="fa fa-refresh"></i></a>
<label class="txt"><spring:message code="traffic_ipactive_chart"/></label>
<span class="label_block" style="border-left:2px #646d8a solid;">
<label class="btn2"> <a href="javascipt:void(0)" onclick="ipActiveList();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
<span class="label_block" style="border-left:2px #626a87 solid;">
<label><a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-line-chart"></i></a></label>
</span>
</div>
<!-- 活跃IP图 --> <div id="chart_main" style="width:100%;height:400px;"></div>
<!-- 活跃IP图 --> <div class="chart-back" id="chart_main" style="width:100%;height:400px;"></div>
</div>
</div>
<!-- 协议类型图 -->
<div class="main_center fl">
<div class="center_text">
<div class="main_title">
<spring:message code="traffic_protocol_chart"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-line-chart"></i></a>
<a href="javascipt:void(0)" onclick="protocolList();return false;"><i class="fa fa-refresh"></i></a>
<label class="txt"><spring:message code="traffic_protocol_chart"/></label>
<span class="label_block" style="border-left:2px #575073 solid;">
<label><a href="javascipt:void(0)" onclick="protocolList();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
<span class="label_block" style="border-left:2px #575073 solid;">
<label><a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-line-chart"></i></a></label>
</span>
</div>
<div id="chart_1" class="" style="width:100%;height: 400px;"></div>
<div id="chart_1" class="chart-back" style="width:100%;height: 400px;"></div>
</div>
</div>
<!-- 活跃端口 -->
<div class="main_right fr">
<div class="right_1">
<div class="main_title_port">
<spring:message code="active_port"/>&nbsp;&nbsp; <!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<a href="javascipt:void(0)" onclick="portActiveList();return false;"><i class="fa fa-refresh"></i></a>
<label class="txt"><spring:message code="active_port"/></label>
<span class="label_block" style="border-left:2px #575073 solid;">
<label><a href="javascipt:void(0)" onclick="portActiveList();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
</div>
<div class="main_table_port">
@@ -209,20 +246,25 @@
<div class="main_left1 fl">
<div class="left_1">
<div class="main_title1">
<spring:message code="service"/>&nbsp;&nbsp;<%-- <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a> --%>
<a href="${ctx}/dashboard/httpStatisticList"><i class="fa fa-line-chart"></i></a>&nbsp;<a href="javascipt:void(0)" onclick="topicAndDomainList();return false;"><i class="fa fa-refresh"></i></a>
</div>
<label class="txt"><spring:message code="service"/></label>
<span class="label_block" style="border-left:2px #99879b solid;">
<label><a href="javascipt:void(0)" onclick="topicAndDomainList();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
<span class="label_block" style="border-left:2px #9f8da1 solid;">
<label><a href="${ctx}/dashboard/httpStatisticList"><i class="fa fa-line-chart"></i></a></label>
</span>
</div>
<!-- 网站主题分类图 --><div id="chart_topic" style="width:100%;height:400px;"></div>
</div>
</div>
<div class="main_center1 fl">
<div class="bottom_web fl">
<div class="main_title_web">
<spring:message code="traffic_website_list"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/traffic/webTypeList"><i class="fa fa-line-chart"></i></a>
<a href="javascipt:void(0)" onclick="websiteList();return false;"><i class="fa fa-refresh"></i></a>
<label class="txt"><spring:message code="traffic_website_list"/></label>
<span class="label_block" style="border-left:2px #824e6a solid;">
<label><a href="javascipt:void(0)" onclick="websiteList();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
</div>
<div class="main_table_web">
<table>
@@ -239,13 +281,13 @@
</div>
</div>
</div>
<div class="main_right1 fl">
<div class="main_right1 fl" style="margin-left:5px;">
<div class="bottom_web fl">
<%-- <div class="main_title_web">
<spring:message code="traffic_website_type_chart"/>
</div> --%>
<div class="main_table_web">
<!-- http网站分类图 --><div id="chart_4" class="" style="width:100%;height: 400px;"></div>
<!-- http网站分类图 --><div id="chart_4" class=""></div>
</div>
</div>
</div>
@@ -255,8 +297,13 @@
<div class="main_left1 fl">
<div class="left_1">
<div class="main_title1">
<spring:message code="traffic_app_chart"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/traffic/appTypeList"><i class="fa fa-line-chart"></i></a>
<a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a>
<label class="txt"><spring:message code="traffic_app_chart"/></label>
<span class="label_block" style="border-left:2px #5c6a78 solid;">
<label><a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
<span class="label_block" style="border-left:2px #5c6a78 solid;">
<label><a href="${ctx}/dashboard/traffic/appTypeList"><i class="fa fa-line-chart"></i></a></label>
</span>
</div>
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 420px;"></div>
</div>
@@ -265,8 +312,10 @@
<div class="main_center1 fl">
<div class="bottom_web fl">
<div class="main_title_web">
<!-- 终端 -->OS/BS &nbsp;&nbsp;<!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<a href="javascipt:void(0)" onclick="uaSelectChange();return false;"><i class="fa fa-refresh"></i></a>
<label class="txt"><!-- 终端 -->OS/BS </label><!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<span class="label_block" style="border-left:2px #6e5377 solid;">
<label><a href="javascipt:void(0)" onclick="uaSelectChange();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
</div>
<div class="main_table_web">
<table>
@@ -275,9 +324,9 @@
<th><spring:message code="ranking"/></th>
<th>
<div class="choice">
<select name="uaSelect" id="uaSelect">
<option value="system"><spring:message code="os"/></option>
<option value="browser"><spring:message code="browser"/></option>
<select name="uaSelect" id="uaSelect" style="text-align:center; text-align-last:center; -webkit-appearance: none; background-color: #3D495F; width: 80px;" class="minimal">
<option value="system">&nbsp;<spring:message code="os"/></option>
<option value="browser">&nbsp;<spring:message code="browser"/></option>
</select>
</div>
</th>
@@ -291,101 +340,19 @@
</div>
</div>
<div class="main_right1 fl">
<div class="bottom_web fl">
<div class="bottom_web fl" style="margin-left:5px;">
<%-- <div class="main_title_web">
<spring:message code="traffic_website_type_chart"/>
</div> --%>
<div class="main_table_web">
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 400px;"></div>
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 470px;"></div>
</div>
</div>
</div>
</div>
<!-- 第4行 -->
<%-- <div class="data_bottom">
<div class="bottom_1 fl">
<div class="main_title">
<!-- 终端 -->BS &nbsp;&nbsp;<!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<a href="javascipt:void(0)" onclick="uaSelectChange();return false;"><i class="fa fa-refresh"></i></a>
</div>
<div class="main_table">
<table>
<thead>
<tr>
<th><spring:message code="ranking"/></th>
<th>
<div class="choice">
<select name="uaSelect" id="uaSelect">
<option value="system"><spring:message code="os"/></option>
<option value="browser"><spring:message code="browser"/></option>
</select>
</div>
</th>
<th><spring:message code="trend"/></th>
</tr>
</thead>
<tbody id="tbodyData1">
<tr>
<td>1</td>
<td>windows</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bottom_center fl">
<div class="bottom_2 fl">
<div class="main_title">
<spring:message code="BS"/>
</div>
<div class="main_table">
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 400px;"></div>
</div>
</div>
<div class="bottom_3 fl">
<div class="main_title">
<spring:message code="traffic_website_list"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a>
</div>
<div class="main_table">
<table>
<thead>
<tr>
<th><spring:message code="ranking"/></th>
<th><spring:message code="website"/></th>
<th><spring:message code="trend"/></th>
</tr>
</thead>
<tbody id="tbodyData2">
<tr>
<td>1</td>
<td>baidu.com</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bottom_3 fl">
<div class="main_title">
<spring:message code="traffic_app_chart"/>&nbsp;&nbsp;<!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a>
</div>
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 420px;"></div>
</div>
</div>
</div> --%>
</div>
<!--content结束-->
<!-- 列表显示 -->
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
@@ -634,12 +601,13 @@ function portActiveList(){
var tr = "<tr class='frist rowData'>";
tr += "<td class='list_c1' style='color:#fff' title='"+itemObj.port+"'>"+itemObj.port+"</td>";
tr += "<td class='list_c2' style='color:#fff'>"+count+"</td>";
if(preCount<count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:red'/>"+"</td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-up'/>"+"</td></tr>";
}else if(preCount>count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:green'/>"+"</td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-down'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'>"+"--"+"</td></tr>";
tr += "<td class='list_c3' style='color:#fff'>"+"--"+"</td></tr>";
}
$("#tbodyDataPort").prepend(tr);
})
@@ -726,11 +694,11 @@ function systemList(){
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.osType+"'>"+os+"</td>";
if(preCount<count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:red'/>"+"</td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-up'/>"+"</td></tr>";
}else if(preCount>count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:green'/>"+"</td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-down'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'>"+"--"+"</td></tr>";
tr += "<td class='list_c3' style='color:#fff'>"+"--"+"</td></tr>";
}
n=n-1;
$("#tbodyData1").prepend(tr);
@@ -837,11 +805,11 @@ function browserList() {
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.bsType+"'>"+bs+"</td>";
if(preCount<count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:red'/>"+"</td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-up'/>"+"</td></tr>";
}else if(preCount>count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:green'/>"+"</td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-down'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'>"+"--"+"</td></tr>";
tr += "<td class='list_c3' style='color:#fff'>"+"--"+"</td></tr>";
}
$("#tbodyData1").prepend(tr);
n=n-1;
@@ -901,11 +869,11 @@ function websiteList() {
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title="+itemObj.websiteService+">"+web+"</td>";
if(itemObj.preCount<itemObj.count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:red'/>"+"</td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-up'/>"+"</td></tr>";
}else if(itemObj.preCount>itemObj.count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:green'/>"+"</td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-down'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'>"+"--"+"</td></tr>";
tr += "<td class='list_c3' style='color:#fff'>"+"--"+"</td></tr>";
}
$("#tbodyData2").prepend(tr);

535
src/main/webapp/static/pages/css/data_text.css
View File

@@ -3,9 +3,15 @@
.data_content{
/*overflow-x: hidden;*/
/* min-width: 1366px; */
background-color: #303030;
padding-top: 30px;
padding-bottom: 10px;
/* background-color: #303030; */
padding-top: 15px;
/* padding-bottom: 10px; */
background: url("../img/dashboard-back.jpg")no-repeat;
width:100%;
/* height:100%; */
background-size:100% 100%;
position:absolute;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/dashboard-back.jpg',sizingMethod='scale');
}
/******************** info start *************************/
@@ -14,7 +20,7 @@ p{
}
.data_content .data_info{
width: calc(100% - 20px);
margin-bottom: 40px;
margin-bottom: 50px;
height: 110px;
margin-left: 15px;
text-align: center;
@@ -28,32 +34,61 @@ p{
.data_content .data_info .fr_fc{
width: 100%;
height: 110px;
border: 1px solid #303030;
border: 1px solid #545678;
border-width: 0 1px;
display: inline-block;
}
.fl_visual .fa {
background:-webkit-linear-gradient(left, #d9ffff, #77b5dc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 42px;
}
.data_content .data_info .fr_fc .fl_visual{
margin-left: 0px;
margin-left: 2px;
float: left;
height: 110px;
width: 28%;
font-size: 45px;
color: #C5C5C5;
font-size: 40px;
/* color: #d9ffff !important; */
/* color: linear-gradient(to right, #ffcc99, #77b5dc); */
position: relative;
margin-top: 15px;
margin-top: 25px;
/*background: -webkit-linear-gradient(left,#d9ffff, #77b5dc);*/
/* background: -webkit-linear-gradient(left,#d9ffff,#77b5dc); */
-webkit-background-clip: text;
/* -webkit-text-fill-color: #d9ffff; */
-webkit-text-fill-color: #d9ffff;
/* background: -webkit-linear-gradient(left bottom, #d9ffff , #77b5dc); */
/* -webkit-background-clip: text; */
/* -webkit-text-fill-color: transparent; */
/* -webkit-text-stroke:1px transparent; */
/* background:-webkit-linear-gradient(left,#d9ffff , #77b5dc); */
/* background:-o-linear-gradient(left,#d9ffff , #77b5dc); */
/* background:-moz-linear-gradient(left,#d9ffff , #77b5dc); */
/* background:-ms-linear-gradient(left,#d9ffff , #77b5dc); */
}
.data_content .data_info .fr_fc .fl_visual a:link {
color: #C5C5C5 !important;
/* .data_content .data_info .fr_fc .fl_visual a:link {
color:#d9ffff !important;
background: -webkit-linear-gradient(left bottom, #d9ffff , #77b5dc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.data_content .data_info .fr_fc .fl_visual a:visited {
color: #C5C5C5 !important;
background: -webkit-linear-gradient(left bottom, #d9ffff , #77b5dc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.data_content .data_info .fr_fc .fl_visual a:hover {
color: #716D6D !important;
}
.data_content .data_info .fr_fc .fl_visual a:active {
color: #716D6D !important;
}
background: -webkit-linear-gradient(left bottom, #d9ffff , #77b5dc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} */
.data_content .data_info .fr_fc .fl_fc{
width: 70%;
height: 110px;
@@ -62,7 +97,7 @@ p{
}
.data_content .data_info .info_2>.text_2{
width: calc(100% - 10px);
background-color: #3D3D3D;
background-color: #3D495F;
height: 110px;
}
@@ -78,23 +113,11 @@ p{
}
.data_content .data_info .info_1>.text_1{
width: calc(100% - 1px);
background-color: #3D3D3D;
background-color: #3D495F;
height: 110px;
}
/* .data_content .data_info .info_3{
width: 29%;
height: 110px;
}
.data_content .data_info .info_3>.text_3{
width:100%;
background-color: #3D3D3D;
height: 110px;
} */
.data_content .data_info>div.info_2>.text_2>div{
width: 14.2%;
width: 14.2%;
position: relative;
}
.data_content .data_info>div.info_1>div>div,
@@ -134,7 +157,8 @@ p{
width:100%;
font-weight: 600;
font-size: 16px;
color:#288dce;
/*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em;
margin-left: 0px;
}
@@ -142,7 +166,8 @@ p{
width:100%;
font-weight: 600;
font-size: 16px;
color:#288dce;
/*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em;
margin-left: 0px;
}
@@ -150,7 +175,8 @@ p{
width:100%;
font-weight: 600;
font-size: 16px;
color:#288dce;
/*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em;
margin-left: 0px;
}
@@ -158,7 +184,8 @@ p{
width:100%;
font-weight: 600;
font-size: 16px;
color:#288dce;
/*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em;
margin-left: 0px;
}
@@ -166,7 +193,8 @@ p{
width:100%;
font-weight: 600;
font-size: 16px;
color:#288dce;
/*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em;
margin-left: 0px;
}
@@ -174,7 +202,8 @@ p{
width:100%;
font-weight: 600;
font-size: 16px;
color:#288dce;
/*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em;
margin-left: 0px;
}
@@ -182,7 +211,8 @@ p{
width:100%;
font-weight: 600;
font-size: 16px;
color:#288dce;
/*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em;
margin-left: 0px;
}
@@ -190,7 +220,8 @@ p{
width:100%;
font-weight: 600;
font-size: 16px;
color:#288dce;
/*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em;
margin-left: 0px;
}
@@ -198,7 +229,8 @@ p{
width:100%;
font-weight: 600;
font-size: 16px;
color:#288dce;
/*color:#288dce;*/
color:#ffffff;
margin-top: 1px;
margin-left: 0px;
}
@@ -206,19 +238,22 @@ p{
width:100%;
font-weight: 600;
font-size: 16px;
color:#288dce;
/*color:#288dce;*/
color:#ffffff;
margin-top: 33px;
margin-left: 0px;
}
.data_content .data_info>div.info_1 .fl_fc .numberRun4-unit{
font-weight: 500;
font-size: 16px;
color:#288dce;
/*color:#288dce;*/
color:#ffffff;
margin-top: 0.6px;
}
.data_content .data_info>div.info_1 .fl_fc .csNum{
font-size: 11px;
color:#337ab7 !important;
/*color:#337ab7 !important;*/
color:#ffffff !important;
margin-top: -6px;
text-align: center;
margin-left: 1.3px;
@@ -256,37 +291,76 @@ p{
.data_content .data_main .main_left>div{
width: 100%;
height: 400px;
box-sizing: border-box;
/* box-sizing: border-box;
border: 1px solid #3D3D3D;
/*box-shadow: 0px 0px 10px #3D3D3D inset;*/
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
box-shadow: 0px 0px 10px #3D3D3D inset;
box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
0px -10px 15px #3D3D3D inset, 上边阴影
10px 0px 15px #3D3D3D inset, 右边阴影
0px 10px 15px #3D3D3D inset; */
position: relative;
}
.data_content .data_main .main_left .left_1 .chart-back{
background-color:rgba(15, 27, 49,0.3);
/* background: -webkit-linear-gradient(right, #496A85,#496A85); Safari 5.1 - 6.0 */
/* background: -o-linear-gradient(right, #496A85,#496A85); // Opera 11.1 - 12.0 */
/* background: -moz-linear-gradient(right, #496A85,#496A85);// Firefox 3.6 - 15 */
/* background: linear-gradient(left bottom, #273349,#5D516F); //标准的语法（必须放在最后） */
}
.data_content .data_main .main_left div:nth-child(1){
margin-bottom: 5px;
}
.data_content .data_main .main_left div .main_title{
width: 260px;
width: 100%;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
border-radius: 18px;
background-color: #3D495F;
position: absolute;
top: -17px;
left:46%;
margin-left: -100px;
top: -39px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
text-align:center;
z-index: 1000;
border-radius:18px !important;
}
.data_content .data_main .main_left div .main_title .txt{
line-height: 33px;
/* position: absolute; */
margin-left: 10px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
z-index: 1000;
}
.label_block {
padding-left: 10px;
width: 40px;
height: 35px;
display: inline-block;
float: right;
}
.label_block label a {
color: white !important;
font-weight: normal;
}
.highcharts-button-box {
rx: 0 !important;
ry: 0 !important;
}
.data_content .data_main .main_left div .main_title .btn1{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 59%;
}
/* .data_content .data_main .main_left div .main_title .btn2{
border: 1px solid #26262d;
border-width: 0 1px;
} */
.data_content .data_main .main_center{
width: 35%;
@@ -294,48 +368,63 @@ p{
}
.data_content .data_main .main_center .center_text{
width: calc(100% - 16px);
width: calc(100% - 18px);
height: 400px;
margin-left: 15px;
margin-right: 15px;
box-sizing: border-box;
border: 1px solid #3D3D3D;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
/* border: 1px solid #3D3D3D;
box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
0px -10px 15px #3D3D3D inset, 上边阴影
10px 0px 15px #3D3D3D inset, 右边阴影
0px 10px 15px #3D3D3D inset; */
background-color:rgba(15, 27, 49,0.3);
position: relative;
}
.data_content .data_main .main_center .main_title{
width: 230px;
width: 100%;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
background-color: #3D495F;
position: absolute;
top: -17px;
left:50%;
margin-left: -110px;
top: -39px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
text-align:center;
z-index: 1000;
border-radius:18px !important;
}
.data_content .data_main .main_center div .main_title .txt{
line-height: 33px;
margin-left: 10px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
z-index: 1000;
}
.data_content .data_main .main_center .center_text .main_title .btn1{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 50%;
}
.data_content .data_main .main_right{
margin-top: -25px;
width: 23%;
}
.data_content .data_main .main_right>div{
width: 100%;
height: 400px;
box-sizing: border-box;
border: 1px solid #3D3D3D;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
/* box-sizing: border-box; */
background-color:rgba(15, 27, 49,0.3);
/* border: 1px solid #292853; */
/* box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
0px -10px 15px #3D3D3D inset, 上边阴影
10px 0px 15px #3D3D3D inset, 右边阴影
0px 10px 15px #3D3D3D inset; */
position: relative;
}
.data_content .data_main .main_right div.right_1 .choice{
@@ -344,10 +433,33 @@ p{
right: 30px;
z-index: 1000;
}
.data_content .data_main .main_right div.right_1 .choice label{
.data_content .data_main .main_right div.right_1 label{
color:#fff;
}
.choice label{
-webkit-appearance: none;
}
select.minimal:focus {
/*
background-image:
linear-gradient(45deg, gray 50%, transparent 50%),
linear-gradient(135deg, transparent 50%, green 50%),
linear-gradient(to right, #ccc, #ccc);
background-position:
calc(100% - 15px) 1em,
calc(100% - 20px) 1em,
calc(100% - 2.5em) 0.5em;
background-size:
5px 5px,
5px 5px,
1px 1.5em;
background-repeat: no-repeat;
border-color: #ffffff;
outline: 0;
*/
}
.data_content .data_main .main_right div:nth-child(1){
margin-bottom: 5px;
}
@@ -371,24 +483,18 @@ p{
}
/* 第2行图 */
.data_content .data_main1{
width: calc(100% - 30px);
width: calc(100% - 14px);
height: 430px;
margin-left: 15px;
margin-top: 30px
margin-top: 54px
}
.data_content .data_main1 .main_left1{
width: 41%;
width: 40.5%;
}
.data_content .data_main1 .main_left1>div{
width: 100%;
height: 430px;
box-sizing: border-box;
border: 1px solid #3D3D3D;
/*box-shadow: 0px 0px 10px #3D3D3D inset;*/
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
background-color:rgba(15, 27, 49,0.3);
position: relative;
}
@@ -396,26 +502,46 @@ p{
margin-bottom: 5px;
}
.data_content .data_main1 .main_left1 div .main_title1{
width: 250px;
width: 100%;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
border-radius: 18px;
background-color: #3D495F;
position: absolute;
top: -17px;
left:45%;
margin-left: -100px;
top: -39px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
text-align:center;
z-index: 1000;
border-radius:18px !important;
}
.data_content .data_main1 .main_left1 div .main_title1 .txt{
line-height: 33px;
margin-left: 10px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
z-index: 1000;
}
.data_content .data_main1 .main_left1 div .main_title1 .btn1{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 82%;
}
.data_content .data_main1 .main_left1 div .main_title1 .btn1-app{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 69%;
}
.data_content .data_main1 .main_center1{
width: calc(25% - 10px);
width: calc(24% - 13px);
height: 430px;
}
@@ -423,7 +549,7 @@ p{
width: 230px;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
background-color:rgba(95, 80, 94,0.3);
position: absolute;
top: -17px;
left:50%;
@@ -438,19 +564,21 @@ p{
}
.data_content .data_main1 .main_right1{
width: calc(34% - 5px);
margin-right: 15px;
width: calc(34% - 3px);
margin-left: 15px;
margin-top: -38px;
}
.data_content .data_main1 .main_right1>div{
width: 100%;
height: 430px;
box-sizing: border-box;
height: 469px;
/* box-sizing: border-box;
border: 1px solid #3D3D3D;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
/* 10px 0px 15px #3D3D3D inset, */ /*右边阴影*/
0px 10px 15px #3D3D3D inset;
box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
0px -10px 15px #3D3D3D inset, 上边阴影
10px 0px 15px #3D3D3D inset, 右边阴影
0px 10px 15px #3D3D3D inset; */
position: relative;
top: -1px;
}
.data_content .data_main1 .main_right1 div.right_1 .choice{
position: absolute;
@@ -461,7 +589,6 @@ p{
.data_content .data_main1 .main_right1 div.right_1 .choice label{
color:#fff;
}
.data_content .data_main1 .main_right1 div:nth-child(1){
margin-bottom: 5px;
}
@@ -698,13 +825,24 @@ p{
width: 100%;
}
.data_content .data_bottom div .main_table thead tr{
height: 36px;
height: 37px;
}
.data_content .data_bottom div .main_table th{
font-size: 14px;
font-weight: 600;
color:#757575;
text-align: center;
border-top:1px solid #493b6a;
border-left:1px solid #493b6a;
border-right:1px solid #493b6a;
border-bottom:1px solid #493b6a;
border-width: 2px;
}
div .main_table_port th:nth-child(1){
border-left:none;
}
div .main_table_port th:nth-child(3){
border-right:none;
}
.data_content .data_bottom div .main_table th:nth-child(1){
width: 30%;
@@ -736,99 +874,123 @@ p{
height: 430px;
margin-left: 0px;
margin-top: 30px;
}
.data_bottom_web div{
}
.bottom_web{
width: 100%;
height: 430px;
box-shadow:/* -10px 0px 15px #3D3D3D inset, */ /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
background-color:rgba(15, 27, 49, 0.3);
position: relative;
box-sizing: border-box;
border: 1px solid #3D3D3D;
margin-left: 15px;
}
.bottom_center_web{
width: 74%;
height: 430px;
}
.bottom_web{
width: 100%;
height: 430px;
box-shadow:/* -10px 0px 15px #3D3D3D inset, */ /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative;
box-sizing: border-box;
border: 1px solid #3D3D3D;
margin-left: 15px;
}
div .main_title_web{
width: 220px;
width: 100%;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
border-radius: 18px;
background-color: rgba(61, 73, 95, 0.7);
/* background: linear-gradient(left bottom, #273349,#5D516F); //标准的语法（必须放在最后） */
position: absolute;
top: -17px;
left:50%;
margin-left: -110px;
top: -39px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
text-align:center;
border-radius:18px !important;
}
div .main_title_web .txt{
line-height: 33px;
margin-left: 10px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
z-index: 1000;
}
div .main_title_web .btn1{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 38%;
}
div .main_title_web .btn1-bs{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 69%;
}
div .main_table_web tr{
height: 36px;
height: 39px;
}
div .main_table_web tr th{
border-top:none;
border-left:1px solid #847387;
border-right:1px solid #847387;
border-width: 2px;
}
div .main_table_web tr th:nth-child(1){
border-left:none;
}
div .main_table_web tr th:nth-child(3){
border-right:none;
}
div .main_table_web{
width: 100%;
margin-top: 25px;
/* margin-top: 25px; */
}
div .main_table_web table{
width: 100%;
}
div .main_table_web thead tr{
height: 36px;
height: 40px;
}
div .main_table_web th{
font-size: 14px;
font-weight: 600;
color:#757575;
/* color:#757575; */
color:#ffffff;
text-align: center;
}
.main_table_web th:nth-child(1){
width: 30%;
}
div .main_table_web th:nth-child(2){
width: 35%;
width: 40%;
}
div .main_table_web th:nth-child(2){
width: 35%;
div .main_table_web th:nth-child(3){
width: 30%;
}
div .main_table_web td{
color:#3D3D3D;
/* color:#3D3D3D; */
font-size: 12.8px;
text-align: center;
border-top:1px solid #847387;
border-left:1px solid #847387;
/* border-right:1px solid #847387; */
border-bottom:none;
border-width: 2px;
}
.main_table_web tbody tr:nth-child(1),
div .main_table_web td:nth-child(1){
border-left:none;
}
div .main_table_web td:nth-child(3){
border-right:none;
}
/* .main_table_web tbody tr:nth-child(1),
div .main_table_web tbody tr:nth-child(3),
div .main_table_web tbody tr:nth-child(7),
div .main_table_web tbody tr:nth-child(9),
div .main_table_web tbody tr:nth-child(5){
background-color: #303030;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
10px 0px 15px #3D3D3D inset; /*右边阴影*/
/*0px 10px 15px #3D3D3D inset;*/
}
box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
10px 0px 15px #3D3D3D inset; 右边阴影
0px 10px 15px #3D3D3D inset;
} */
/* 活跃端口 active port */
.data_bottom_port{
@@ -895,25 +1057,39 @@ p{
/*background: url("../img/chart_8.png") no-repeat;*/
}
div .main_title_port{
width: 220px;
width: 100%;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
border-radius: 18px;
background-color: rgba(61, 73, 95, 0.5);
background: linear-gradient(left bottom, #273349,#5D516F); /* //标准的语法（必须放在最后） */
position: absolute;
top: -17px;
left:50%;
margin-left: -110px;
top: -39px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
text-align:center;
border-radius:18px !important;
}
div .main_title_port .txt{
line-height: 33px;
margin-left: 10px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
z-index: 1000;
}
div .main_title_port .btn1{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 50%;
}
div .main_table_port tr{
height: 33px;
height: 36px;
}
div .main_table_port{
width: 100%;
@@ -923,35 +1099,56 @@ p{
width: 100%;
}
div .main_table_port thead tr{
height: 36px;
height: 40px;
}
div .main_table_port th{
font-size: 14px;
font-weight: 600;
color:#757575;
color:#fff;
text-align: center;
border-top:1px solid #493b6a;
border-left:1px solid #493b6a;
border-right:1px solid #493b6a;
border-bottom:1px solid #493b6a;
border-width: 0 2px;
}
div .main_table_port th:nth-child(1){
width: 30%;
border-left:none;
}
div .main_table_port th:nth-child(3){
border-right:none;
}
div .main_table_port th:nth-child(1){
width: 33%;
}
div .main_table2 th:nth-child(2){
width: 35%;
width: 36%;
}
div .main_table_port th:nth-child(2){
width: 35%;
width: 36%;
}
div .main_table_port td{
color:#3D3D3D;
/* color:#3D3D3D; */
font-size: 12.8px;
text-align: center;
border-top:1px solid #493b6a;
border-left:1px solid #493b6a;
/* border-right:1px solid #493b6a; */
border-width: 2px;
}
div .main_table_port td:nth-child(1){
border-left:none;
}
div .main_table_port td:nth-child(3){
border-right:none;
}
div .main_table_port tbody tr:nth-child(1),
div .main_table_port tbody tr:nth-child(3),
div .main_table_port tbody tr:nth-child(7),
div .main_table_port tbody tr:nth-child(9),
div .main_table_port tbody tr:nth-child(5){
background-color: #303030;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
10px 0px 15px #3D3D3D inset; /*右边阴影*/
/*0px 10px 15px #3D3D3D inset;*/
/* background-color: #303030;
box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
10px 0px 15px #3D3D3D inset; 右边阴影
0px 10px 15px #3D3D3D inset; */
}

283
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',
@@ -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;
}