<?php echo $title; ?>
//制作饼图上的标签
function makeLabel(labelValue,labelRate) {var label ={
normal:{
label:{
show: false},labelLine:{
show: false},formatter:[‘{title|{b}}{abg|}‘,
‘ {head|}{valueHead|个数}{rateHead|占比}‘,
‘{hr|}‘,
‘ {head|}{value|‘ + labelValue + ‘}{rate|‘ + labelRate + ‘}‘].join(‘\n‘),backgroundColor: ‘#eee‘,borderColor: ‘#777‘,borderWidth: 1,borderRadius: 4,rich:{
title:{
color: ‘#eee‘,align: ‘center‘},abg:{
backgroundColor: ‘#333‘,width: ‘100%‘,align: ‘right‘,height: 25,borderRadius: [4, 4, 0, 0]
},Sunny:{
height: 30,align: ‘left‘},head:{
color: ‘#333‘,height: 24,align: ‘left‘},hr:{
borderColor: ‘#777‘,width: ‘100%‘,borderWidth: 0.5,height: 0},value:{
width: 20,padding: [0, 20, 0, 30],align: ‘left‘},valueHead:{
color: ‘#333‘,width: 20,padding: [0, 20, 0, 30],align: ‘center‘},rate:{
width: 40,align: ‘right‘,padding: [0, 10, 0, 0]
},rateHead:{
color: ‘#333‘,width: 40,align: ‘center‘,padding: [0, 10, 0, 0]
}
}
}
};returnlabel;
}//画label连接线
function makeLabelLine(length,length2) {var labelLine ={
normal:{
show: true,length: length,length2: length2,lineStyle:{
type: ‘dashed‘,width: 2}
}
};returnlabelLine;//原文：/LzzMandy/article/details/84875146
}/*画饼图
用到了tooltip：/echarts2/doc/doc.html#Tooltip*/
function drawPie(pieTitle, pieSubTitle, innerOneDay, oneToTwoDays, twoToThreeDays,moreThanThreeDays) {//基于准备好的dom，初始化echarts实例
var myPie = echarts.init(document.getElementById(‘myPie‘));//开发周期饼图数据
var pieOption ={
title:{
text: pieTitle,subtext: pieSubTitle,left: ‘center‘},tooltip:{
trigger: ‘item‘,formatter: "{a}
{b} : {c} ({d}%)"},legend:{
orient: ‘vertical‘,left: ‘left‘,data: [‘1天以内‘, ‘1到2天‘, ‘2到3天‘, ‘大于3天‘]
},series:[
{
name: ‘占比‘,type: ‘pie‘,radius: ‘55%‘,center: [‘50%‘, ‘60%‘],data:[
{
value: innerOneDay,name: ‘1天以内‘,label: makeLabel("{c}", "{d}%"),labelLine: makeLabelLine(0, 50)
},{
value: oneToTwoDays,name: ‘1到2天‘,label: makeLabel("{c}", "{d}%"),labelLine: makeLabelLine(30, 50)
},{
value: twoToThreeDays,name: ‘2到3天‘,label: makeLabel("{c}", "{d}%"),labelLine: makeLabelLine(30, 50)
},{
value: moreThanThreeDays,name: ‘大于3天‘,label: makeLabel("{c}", "{d}%"),labelLine: makeLabelLine(90, 50)
}
],itemStyle:{
emphasis:{
shadowBlur: 10,shadowOffsetX: 0,shadowColor: ‘rgba(0, 0, 0, 0.5)‘}
}
}
]
};
myPie.setOption(pieOption);
myPie.on(‘click‘, ‘series.pie.label‘, function() {
window.open("");
});
}//获取饼图数据
function getPieData(iterationId, sDate, stType, pieTitle,pieSubTitle) {//标准GET请求ajax写法
$.ajax({
url: "/cloud/tools/getDevOpsPieData",type: "GET",data:{"iterationId": iterationId,
"sDate": sDate,
"stType": stType,
"pieTitle": pieTitle,
"pieSubTitle":pieSubTitle
},contentType: "application/json; charset=utf-8",dataType: "json",success: function(result) {
console.log(result);var pieTitle = result["pieTitle"];var pieSubTitle = result["pieSubTitle"];var innerOneDay = result["innerOneDay"];var oneToTwoDays = result["oneToTwoDays"];var twoToThreeDays = result["twoToThreeDays"];var moreThanThreeDays = result["moreThanThreeDays"];
drawPie(pieTitle, pieSubTitle, innerOneDay, oneToTwoDays, twoToThreeDays,moreThanThreeDays);
}
});
}
$(function() {var iterationId = "<?php echo $iterationId;?>";var sDate = "<?php echo $sDate;?>";var stType = "<?php echo $stType;?>";var pieTitle = "<?php echo $pieTitle;?>";var pieSubTitle = "<?php echo $pieSubTitle;?>";
getPieData(iterationId, sDate, stType, pieTitle,pieSubTitle)
});
如果觉得《echarts饼图php ECharts饼图自定义》对你有帮助，请点赞、收藏，并留下你的观点哦！
