一. 背景
统计不同项目类型资金所占比例，又要知道资金使用情况。就是展示大分类占比下小分类占比
二. 准备
Highcharts文件
jquery文件（jquery.min.js）
三. 内容
- html
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="container" style="width-mid:400px;height:400px"></div>
<script src="js/jquery.min.js"></script>
<script src="Highcharts-6.0.2/code/highcharts.js"></script>
<script src="js/peiAjax.js"></script>
</body>
</html>
- js
var urlDataPie='http://localhost:8080/SpringWind/dataMonitor/listDataPie';//请求接口
var dataPie;
var dataPietotal;
var chartPie;
initChartPie();
ajaxRequestPie("111");
function ajaxRequestPie(selectQyId){
$.ajax({
url : urlDataPie,type : "POST",dataType : "jsonp",jsonp:"callback",jsonpCallback:"successCallback",data : {
qyId : selectQyId
},contentType:'application/x-www-form-urlencoded',async : false,timeout : 6000,success : function(data) {
if(data.success){
dataPie = jQuery.parseJSON(data.data.data);
dataPietotal=data.data.dataSum;
buildPie(dataPie,dataPietotal);
}else{
alert("数据异常");
}
},error : function(error) {
alert("访问失败");
}
});
}
function buildPie(dataPie,dataPietotal) {
var capTotal=dataPietotal;
var colors = Highcharts.getoptions().colors,categories =['未用','已用'],data =dataPie,priceTypeData = [],//项目资金总数
priceTypeUseData = [],//用与未用
i,j,dataLen = data.length,brightness;
// 构建数据数组
for (i = 0; i < dataLen; i += 1) {
//var priceRatio=toFix2(data[i].pricetotal/capTotal*100);//项目资金占比
var priceRatio=data[i].pricetotal/1;
// 添加项目资金总数数据
priceTypeData.push({
name: data[i].projectTypeName,y: priceRatio,color:colors[i]
});
// 添加项目用与未用数据
for (j = 0; j < 2; j += 1) {
brightness = 0.2 - (j / 2) / 5;//不知道为什么这样，颜色要用吧？
var unuseRatio=toFix2(data[i].priceUnused/data[i].pricetotal*100);//未用比例项目资金
var usedratio=toFix2(data[i].priceUsed/data[i].pricetotal*100);//已用比例项目资金
var unuseRatioAll=data[i].priceUnused/1;//未用比例占总金额
var usedratioAll=data[i].priceUsed/1;//已用比例占总金额
priceTypeUseData.push({
//只有已用未用两种，
name:categories[j]+":"+(j==0?unuseRatio:usedratio).toFixed(2)+"%",y:j==0?unuseRatioAll:usedratioAll,color: Highcharts.Color(colors[i]).brighten(brightness).get()
});
}
}
chartPie.series[0].data=priceTypeData;//内图
chartPie.series[1].data=priceTypeUseData;//外图
//绘制图表
chartPie = new Highcharts.Chart(chartPie);
}
function initChartPie(){
// 创建空数据饼图
chartPie= {
chart: {
renderTo: 'containerPie',type: 'pie'
},title: {
text: '资金使用情况'
},// subtitle: {
// text: '内环为浏览器品牌占比，外环为具体的版本'
// },
yAxis: {
title: {
text: '总百分比市场份额'
}
},plotOptions: {
pie: {
shadow: false,center: ['50%','50%'],}
},tooltip: {
//valueSuffix: '%' //后缀
valueSuffix: '万元'
},credits:{
enabled:false//隐藏公司链接
},exporting:{
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
},series: [{
name: '资金',data: '',//饼图里的内容必然显示
size: '80%',showInLegend:true,//显示图例
dataLabels: {
formatter: function () {
//return this.y > 5 ? this.point.name+ ':</b> ' + this.y + '%' : null;
return this.percentage > 10 ? this.point.name+ ':</b> ' + this.percentage.toFixed(2)+' %' : null;
},color: 'white',distance: -60
}
},{
name: '资金',size: '80%',showInLegend:false,//不显示图例
innerSize: '90%',//内环越大外环越小
dataLabels: {
formatter: function () {
// 大于1则显示
console.log(this);
//return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
return this.y > 1 ? this.point.name : null;
}
}
}]
};
}
- json格式
{
"data": [ { "pricetotal": "300","priceUnused": "292","priceUsed": "8","projectTypeId": "1","projectTypeName": "清洁先行" },{ "pricetotal": "20","priceUnused": "0","priceUsed": "20","projectTypeId": "2","projectTypeName": "清水治污" },"priceUnused": "20","priceUsed": "0","projectTypeId": "3","projectTypeName": "绿满家园" },"projectTypeId": "4","projectTypeName": "基础设施" } ] ,"dataSum":"360" }
四. 效果
鼠标移动至饼图