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:
wangwenrui
2018-12-17 01:50:16 +08:00
parent cd54aee8ac
commit fade97c28d
3 changed files with 621 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/main/java/com/nis/web/controller/dashboard/TrafficStatisticsInfoController.java
View File

@@ -1,12 +1,15 @@
package com.nis.web.controller.dashboard; package com.nis.web.controller.dashboard;
import java.lang.reflect.Type; import java.lang.reflect.Type;
import java.math.BigDecimal;
import java.net.URISyntaxException; import java.net.URISyntaxException;
import java.net.URLEncoder; import java.net.URLEncoder;
import java.text.DecimalFormat; import java.text.DecimalFormat;
import java.text.SimpleDateFormat; import java.text.SimpleDateFormat;
import java.util.ArrayList; import java.util.ArrayList;
import java.util.Calendar; import java.util.Calendar;
import java.util.Collections;
import java.util.Comparator;
import java.util.Date; import java.util.Date;
import java.util.HashMap; import java.util.HashMap;
import java.util.List; import java.util.List;
@@ -35,10 +38,13 @@ import com.google.gson.JsonParseException;
import com.google.gson.LongSerializationPolicy; import com.google.gson.LongSerializationPolicy;
import com.google.gson.reflect.TypeToken; import com.google.gson.reflect.TypeToken;
import com.nis.domain.PageLog; import com.nis.domain.PageLog;
import com.nis.domain.SysDataDictionaryItem;
import com.nis.domain.configuration.WebsiteDomainTopic;
import com.nis.domain.dashboard.TrafficIpActiveStatistic; import com.nis.domain.dashboard.TrafficIpActiveStatistic;
import com.nis.util.CodeDicUtils; import com.nis.util.CodeDicUtils;
import com.nis.util.Constants; import com.nis.util.Constants;
import com.nis.util.DateUtil; import com.nis.util.DateUtil;
import com.nis.util.DictUtils;
import com.nis.util.StringUtil; import com.nis.util.StringUtil;
import com.nis.util.httpclient.HttpClientUtil; import com.nis.util.httpclient.HttpClientUtil;
import com.nis.web.controller.BaseController; import com.nis.web.controller.BaseController;
@@ -382,4 +388,100 @@ public class TrafficStatisticsInfoController extends BaseController {
} }
return list; return list;
} }
/**
* 网址类型列表
*/
@RequestMapping("webTypeList")
public String webTypeList(Model model){
Calendar cal = Calendar. getInstance ();
cal.setTime(new Date());
String now = new SimpleDateFormat( "yyyy-MM-dd HH:mm:00" ).format(cal.getTime());//获取到完整的时间
cal.set(Calendar.HOUR_OF_DAY, cal.get(Calendar.HOUR_OF_DAY) - 1);
String oneHoursAgo = new SimpleDateFormat( "yyyy-MM-dd HH:mm:00" ).format(cal.getTime());
model.addAttribute("beginDate", oneHoursAgo);
model.addAttribute("endDate", now);
return "/dashboard/trafficWebTypeList";
}
/**
* 网站统计图跟表
*/
@RequestMapping(value="websiteList")
@ResponseBody
public List websiteList(Model model,@RequestParam(required=false)String beginDate,@RequestParam(required=false)String endDate){
Map<String, Object> fromJsonList = new HashMap<String, Object>();
List list = new ArrayList();
String url = Constants.DASHBOARD_URL+Constants.TRAFFIC_WEBSITELIST;
// String url = "http://192.168.11.87:8088/galaxy-service/service/log/v1/"+Constants.TRAFFIC_WEBSITELIST;
try {
url=urlAddDate(url,beginDate,endDate);
String string = HttpClientUtil.get(url);
Gson gson = new GsonBuilder().create();
fromJsonList = gson.fromJson(string, new TypeToken<Map>(){}.getType());
logger.debug("website接口数据"+fromJsonList);
list = (ArrayList) fromJsonList.get("data");
BigDecimal divisor=new BigDecimal(1024*1024*1024);
DecimalFormat df = new DecimalFormat("0.00");
DecimalFormat dl = new DecimalFormat("0");
DecimalFormat pf = new DecimalFormat("0.00%");
Double totalLink=0d;
Double totalGbyte=0d;
Double totalPackets=0d;
for (Object object : list) {
Map m=(Map)object;
Double count=(Double)m.get("count");
totalGbyte+=count;
totalLink+=(Double)m.get("linkNum");
totalPackets+=(Double)m.get("packets");
String format = df.format(count/1024/1024/1024);
m.put("Gbyte", format);
}
List<WebsiteDomainTopic> codeList = appCfgService.getDomainDict(new WebsiteDomainTopic());
Map<Long, String> map = new HashMap<Long,String>();
for (WebsiteDomainTopic websiteDomainTopic : codeList) {
if(!map.containsKey(websiteDomainTopic.getWebsiteServiceId())){
map.put(websiteDomainTopic.getId(),websiteDomainTopic.getDomain());
}
}
for (Object object : list) {
Map m=(Map)object;
Double perLink = ((Double)m.get("linkNum"))/totalLink;
m.put("perLink",pf.format(perLink));
Double perPackets = ((Double)m.get("packets"))/totalPackets;
m.put("perPackets", pf.format(perPackets));
Double perGbyte = ((Double)m.get("count"))/totalGbyte;
m.put("perGbyte", pf.format(perGbyte));
if(map.containsKey(Long.parseLong(dl.format(m.get("webId"))))){
m.put("website", map.get(Long.parseLong(dl.format(m.get("webId")))));
}
}
Collections.sort(list, new Comparator<Object>() {
@Override
public int compare(Object o1, Object o2) {
if(o1==null&&o2!=null){
return 1;
}
if(o1!=null&&o2==null){
return -1;
}
if(o1==null&&o2==null){
return 0;
}
Map m1=(Map)o1;
Map m2=(Map)o2;
if((Double)m1.get("count")==(Double)m2.get("count")){
return 0;
}
int result=((Double)m1.get("count")-(Double)m2.get("count"))>0?-1:1;
return result;
}
});
} catch (Exception e) {
e.printStackTrace();
logger.error("网站域名数据获取错误"+e);
list.add(Maps.newHashMap("error","request_service_failed"));
}
return list;
}
} }

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

@@ -196,7 +196,7 @@
<div class="main_center1 fl"> <div class="main_center1 fl">
<div class="bottom_web fl"> <div class="bottom_web fl">
<div class="main_title_web"> <div class="main_title_web">
<spring:message code="traffic_website_list"/>&nbsp;&nbsp;<%-- <a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a> --%> <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> <a href="javascipt:void(0)" onclick="websiteList();return false;"><i class="fa fa-refresh"></i></a>
</div> </div>
<div class="main_table_web"> <div class="main_table_web">

678
src/main/webapp/WEB-INF/views/dashboard/trafficWebTypeList.jsp
View File

@@ -3,118 +3,185 @@
<html> <html>
<head> <head>
<title>网站主题服务分类</title> <title>网站主题服务分类</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css"> <link rel="stylesheet"
href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/pages/css/pagination.css">
<script
src="${pageContext.request.contextPath}/static/pages/scripts/jquery.pagination.js"></script>
<script
src="${ctxStatic }/global/plugins/tableExport-3.3.13/xlsx.core.js"></script>
<script
src="${ctxStatic }/global/plugins/tableExport-3.3.13/FileSaver.js"></script>
<script
src="${ctxStatic }/global/plugins/tableExport-3.3.13/tableexport.js"></script>
<script
src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
<script
src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
<script
src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>
<script
src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
</head> </head>
<style type="text/css"> <style type="text/css">
</style>
</style>
<body> <body>
<div class="page-content"> <div class="page-content">
<div class="theme-panel hidden-xs hidden-sm"> <div class="theme-panel hidden-xs hidden-sm">
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/webTypeList'"><spring:message code="refresh"/></button> <button type="button" class="btn btn-default"
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/logChart'"><spring:message code="back"/></button> onClick="javascript:window.location='${ctx}/dashboard/webTypeList'">
</div> <spring:message code="refresh" />
<h3 class="page-title"> </button>
<spring:message code="网站分类"></spring:message> <button type="button" class="btn btn-default"
</h3> onClick="javascript:window.location='${ctx}/dashboard/logChart'">
<h5 class="page-header"></h5> <spring:message code="back" />
<ul class="nav nav-tabs"> </button>
<li class="active"><a href="${ctx}/dashboard/ipActiveList">网站</a></li> </div>
<h3 class="page-title">
<spring:message code="traffic_website_type_chart"></spring:message>
</h3>
<h5 class="page-header"></h5>
<form:form id="searchForm"
action="${ctx}/dashboard/traffic/websiteList" method="get"
class="form-search">
<input id="beginDateh" type="hidden" value="${beginDate}" />
<input id="endDateh" type="hidden" value="${endDate}" />
<!-- 搜索内容与操作按钮栏 -->
<div class="col-md-12">
<div class="pull-left">
<div class="input-group">
<div class="input-group-btn">
<span class="selectpicker form-control"><spring:message
code="begin_date" /></span>
</div>
<input id="beginDate" name="beginDate" type="text"
readonly="readonly" class="form-control Wdate input-medium"
value=""
onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'${beginDate}'});" />
</div>
</div>
<div class="pull-left">
<div class="input-group">
<div class="input-group-btn">
<span class="selectpicker form-control"><spring:message
code="end_date" /></span>
</div>
<input id="endDate" name="endDate" type="text" readonly="readonly"
class="form-control Wdate input-medium" value=""
onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'${endDate}'});" />
</div>
</div>
<div class="pull-left">
<button type="button" class="btn blue"
onClick="return searchList()">
<i class="fa fa-search"></i>
<spring:message code="search" />
</button>
<button type="button" class="btn btn-default" id="resetBtn">
<i class="fa fa-refresh"></i>
<spring:message code="reset" />
</button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default" id="export-btn" >
<i class="fa fa-download"> <spring:message code="export" /></i>
</button>
</div>
</div>
<!-- 搜索内容与操作按钮栏 -->
</form:form>
<%-- <ul class="nav nav-tabs">
<li class="active"><a href="#">网站</a></li>
<li><a href="${ctx}/dashboard/ipActiveList">主题</a></li> <li><a href="${ctx}/dashboard/ipActiveList">主题</a></li>
<li><a href="${ctx}/dashboard/ipActiveList">服务</a></li> <li><a href="${ctx}/dashboard/ipActiveList">服务</a></li>
</ul> </ul> --%>
<%--
<%--
<embed width="700px" height="500px" src="${pageContext.request.contextPath}/static/global/plugins/highcharts/svg.svg"></embed> <embed width="700px" height="500px" src="${pageContext.request.contextPath}/static/global/plugins/highcharts/svg.svg"></embed>
--%> --%>
<!-- -->
<!-- <div id="chart" style="width:100%;height:400px;"></div> -->
<div class="col-md-12">
<div class="portlet">
<div class="portlet-body">
<div class="row">
<!-- --> <form:form id="searchForm" modelAttribute="entry"
<div id="chart" style="width:100%;height:400px;"></div> action="${ctx}/dashboard/websiteList" method="post"
class="form-search">
<div class="col-md-12"> <input id="pageNo" name="pageNo" type="hidden"
<div class="portlet"> value="${page.pageNo}" />
<div class="portlet-body"> <input id="pageSize" name="pageSize" type="hidden"
value="${page.pageSize}" />
<div class="row" > </form:form>
<form:form id="searchForm" modelAttribute="entry" action="${ctx}/dashboard/webTypeList" method="post" class="form-search"> </div>
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/> <style>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/> .show-two {
</form:form> display: inline-block;
</div> }
<style>
.show-two{ .title-num {
display: inline-block; margin-right: 8px;
} border-radius: 40px !important;
.title-num{ background-color: #f34b60;
margin-right:8px; color: #fff;
border-radius:40px !important; width: 40px;
background-color: #f34b60; text-align: center;
color:#fff; font-size: 20px;
width:40px; }
text-align: center;
font-size: 20px; .tbody .tr:active {
} background: rgb(210, 232, 251, 0.8);
.tbody .tr:active{ }
background: rgb(210, 232, 251, 0.8); </style>
} <script type="text/javascript">
</style> $(function() {
<script type="text/javascript"> $("#contentTable tbody tr").bind(
$(function(){ 'click',
$("#contentTable tbody tr").bind('click',function(){ function() {
$("tbody tr").removeClass("active"); $("tbody tr").removeClass("active");
$(this).addClass("active"); $(this).addClass("active");
$("span[class='title-num']").html('&nbsp;'+($(this).index()+1)+'&nbsp;') $("span[class='title-num']").html(
}); '&nbsp;'
}); + ($(this).index() + 1)
</script> + '&nbsp;')
<sys:message content="${message}" type="${messageType }"/> });
<div class="table-responsive show-two"> });
<table id="contentTable" style="width: 35%;" class="table table-hover table-striped table-bordered table-condensed text-nowrap"> </script>
<thead> <sys:message content="${message}" type="${messageType }" />
<tr>
<th><spring:message code="sort"/></th> <div class="table-responsive">
<th><spring:message code="网站"/></th> <table id="contentTable" style="width: 100%;"
<%-- <th><spring:message code="area_id"/></th> --%> class="table table-hover table-striped table-bordered table-condensed text-nowrap">
<th><spring:message code="访问次数"/></th> <thead>
<th><spring:message code="c2s_pkt_num"/></th>
<th><spring:message code="s2c_pkt_num"/></th>
<th><spring:message code="c2s_byte_len"/></th>
<th><spring:message code="s2c_byte_len"/></th>
<th><spring:message code="stat_time"/></th>
</tr>
</thead>
<tbody>
<c:forEach var="entry" items="${page.list }" varStatus="status">
<tr> <tr>
<td>${entry.id }</td> <th><spring:message code="Domain" /></th>
<td>${entry.ipAddr }</td> <th><spring:message code="Link Times" /></th>
<%-- <td>${entry.areaId }</td> --%> <th><spring:message code="Percentage(Link Times)" /></th>
<td>${entry.linkNum }</td> <th><spring:message code="Packets" /></th>
<td>${entry.c2sPktNum }</td> <th><spring:message code="Percentage(Packets)" /></th>
<td>${entry.s2cPktNum }</td> <th><spring:message code="Gbyte" /></th>
<td>${entry.c2sByteLen }</td> <th><spring:message code="Percentage(Gbyte)" /></th>
<td>${entry.s2cByteLen }</td>
<td><fmt:formatDate value="${entry.statTime }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
</tr> </tr>
</c:forEach> </thead>
</tbody> <tbody id="tableData"></tbody>
</table> </table>
<div class="page">${page}</div>
</div> <div id="page">
<div class="right-table" style="width: 30%;float: right;" > <div class="M-box" style="float: right"></div>
</div>
<div class="none-data">
<i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;
<spring:message code="noneData" />
</div>
</div>
<%-- <div class="right-table" style="width: 30%;float: right;" >
<h3> <h3>
<span class="title-num">&nbsp;1 </span> <span class="title-num">&nbsp;1 </span>
<label>分类流量统计</label> <label>分类流量统计</label>
@@ -132,70 +199,361 @@
<tr><td><spring:message code="。。"/></td><td>33456</td></tr> <tr><td><spring:message code="。。"/></td><td>33456</td></tr>
</tbody> </tbody>
</table> </table>
<div id="page"><div class="M-box" style="float: right"></div></div>
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;<spring:message code="noneData"/></div>
</div> --%>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <script
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script> src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ /* $(document).ready(function(){
var chart = Highcharts.chart('chart', { var chart = Highcharts.chart('chart', {
title: { title: {
text: '网站分类' text: '网站分类'
}, },
yAxis: { yAxis: {
title: { title: {
text: 'bps' text: 'bps'
} }
}, },
legend: { legend: {
layout: 'vertical', layout: 'vertical',
align: 'right', align: 'right',
verticalAlign: 'middle' verticalAlign: 'middle'
}, },
xAxis:{ xAxis:{
type:'datetime', type:'datetime',
dateTimeLabelFormats:{ dateTimeLabelFormats:{
day:'%Y-%m-%d %h' day:'%Y-%m-%d %h'
}
},
plotOptions: {
series: {
pointStart: Date.UTC(2018, 8, 16,1),
pointInterval: 3600*1000,
// pointIntervalUnit:'day'
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
}); */
$(document).ready(
function() {
var starth = $("#beginDateh").val();
var endh = $("#endDateh").val();
$("#beginDate").val(starth);
$("#endDate").val(endh);
ajaxWebTypeList(starth, endh);
setInterval(function() {
ajaxWebTypeList(starth, new Date()
.Format("yyyy-MM-dd HH:mm:00"));
}, 500000);// 五分钟调用一次
});
function searchList() {
loading();
var start = $("#beginDate").val();
var end = $("#endDate").val();
if (start == '' || end == '' || end == null || start == null) {
window.location.reload();
} else {
ajaxWebTypeList(start, end);
}
}
function ajaxWebTypeList(start, end) {
loading();
$
.ajax({
url : '${ctx}/dashboard/traffic/websiteList',
type : 'get',
dataType : "json",
data : {
"beginDate" : start,
"endDate" : end
},
async : false,
timeout : 10000,
success : function(data) {
if (data != null && data.length > 0
&& data[0].error != null) {
top.$.jBox
.tip(
"<spring:message code='request_service_failed'/>",
"<spring:message code='info'/>");
return;
}
console.log(JSON.stringify(data));
fileData = data;
getPageData(1, 10);//初始化第一页的数据
pageJuan(10);//初始化分页
closeTip();
if (data != null && data.length < 1) {
$(".none-data").show();
$('.M-box').hide();
} else {
$('.none-data').hide();
$('.M-box').show();
}
},
error : function(data, textStatus, errorThrown) {
closeTip();
},
complete : function(XMLHttpRequest, status) {//超时设置
closeTip();
}
});
}
// 导出列表
$("#export-btn").click(function() {
getPageData(1, 999999);// 设置导出页条数
var te = $("#contentTable").tableExport({
headings : true,
footers : true,
formats : [ "xlsx" ],
fileName : "website",
bootstrap : false
});
$("#myexport").click();
$("caption").remove();
getPageData(1, 10);
});
/**
* 获取本页数据
* @param currentPage 当前页数 【初次查数据，默认第1页】
*/
var fileData;
function getPageData(currentPage, pageNumber) {
if (typeof (fileData) != "undefined" && fileData != null ) {
//计算每页数据起始和终止数据编号
// var pageNumber = 10;
var maxLength = currentPage * pageNumber - 1;
var minLength = currentPage * pageNumber - pageNumber;
var pageData = [];
for (var i = minLength; i < fileData.length; i++) {
if (maxLength < i) {
break;
} else {
pageData.push(fileData[i]);
}
} }
}, htmlData(pageData);
plotOptions: { } else {
series: { //把空数据传到页面中去
pointStart: Date.UTC(2018, 8, 16,1), htmlData(fileData);
pointInterval: 3600*1000, }
// pointIntervalUnit:'day' }
} // 处理接口数据
}, function htmlData(fileDataS) {
$("#tableData").html("");
if (fileDataS == null || fileData == '') {
$(".none-data").show();
$('.M-box').hide();
} else {
$('.none-data').hide();
$('.M-box').show();
$.each(fileDataS, function(index, data) {
if (data != null) {
series: [{ var html = "<tr>";
name: 'Installation', html += "<td class='tc'>"
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] + data.website + "</td>";
}], html += "<td class='tc'>" + data.linkNum + "</td>";
html += "<td class='tc'>" + data.perLink + "</td>";
html += "<td class='tc'>" + data.packets + "</td>";
html += "<td class='tc'>" + data.perPackets + "</td>";
html += "<td class='tc'>" + data.Gbyte + "</td>";
html += "<td class='tc'>" + data.perGbyte + "</td>";
html += "</tr>"
}
$("#tableData").append(html);
});
}
}
responsive: { function chartData(websiteId) {
rules: [{ loading();
condition: { $
maxWidth: 500 .ajax({
}, url : '${ctx}/dashboard/traffic/websiteChart',
chartOptions: { type : 'get',
legend: { dataType : "json",
layout: 'horizontal', data : {
align: 'center', "websiteId" : websiteId
verticalAlign: 'bottom' },
} async : false,
} timeout : 10000,
}] success : function(data) {
} if (data != null && data.length > 0
&& data[0].error != null) {
}); top.$.jBox
.tip(
}); "<spring:message code='request_service_failed'/>",
"<spring:message code='info'/>");
function showIpActiveChart(){ return;
}
} webTypeChart(data);
},
</script> error : function(data, textStatus, errorThrown) {
closeTip();
},
complete : function(XMLHttpRequest, status) {//超时设置
closeTip();
}
});
}
/**
* 分页控件处理
*/
function pageJuan(showData) {
if (typeof (fileData) != "undefined" && fileData != null) {
var totalData = fileData.length;
// var showData = 10;
if (showData > totalData) {
showData = totalData;
}
$('.M-box').pagination({
totalData : totalData,
showData : showData,
coping : true,
callback : function(index) {
//改变显示开始和结束数据编号
getPageData(index.getCurrent(), showData);
}
});
}
}
// 比例协议统计图
/* function webTypeChart(rs){
//终端用户 分操作系统与浏览器
var data=new Array();
$(rs).each(function(i, d) {
data.push({
name: d.website,
y: d.count,
});
});
// 创建图例
var chart = Highcharts.chart('chart',{
chart: {
plotBackgroundColor:null,
plotBorderWidth:null,
plotShadow:false,
type: 'pie'
},
navigation: {
buttonOptions: {
x:-25,
}
},
exporting: {
allowHTML:true,
filename:"Website",
scale:1,
sourceWidth: 1280,
sourceHeight: 500,
},
noData:{
style: {//设置字体颜色
color: '#000',
},
},
// legend:{// 底部平鋪图例
// width:1280,
// x:40,
// itemWidth:100,
// itemDistance:2,
// itemHoverStyle:{
// color:'#61D2F7',
// },
// },
legend: {
// layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
width:380,
itemWidth:100,
itemDistance:2,
itemHoverStyle:{
color:'#61D2F7',
},
},
// colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: {
text: null,
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
softConnector: true, // 是否使用曲线
formatter: function () {
// 通过函数判断是否显示数据标签，为了防止数据标签过于密集
return this.percentage > 1 ? '<b>' + this.point.name + ' :</b> ' +this.percentage.toFixed(2)+' %' : null;
},
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
},
pie:{
allowPointSelect: true,
showInLegend: true,
point: {
events: {
mouseOver: function(e) {
this.slice();
},
// 鼠标移出时，收回突出显示
mouseOut: function() {
this.slice();
},
// 默认是点击突出，这里屏蔽掉
click: function() {
return false;
}
},
},
}
},
credits:{//是否有highcharts水印
enabled:false
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>'
},
series: [{
name: "Website",
colorByPoint: true,
data: data
}],
});
} */
</script>
</body> </body>
</html> </html>