title:{
text:'客户分类统计',
textStyle:{
color:'#22252A',
fontFamily:'PingFangSC-Medium',
fontSize:'12',
textAlign:'left'
}
},
color:['#5B93D3','#7CBDDF','#208BC2','#667489','#324462','#384250'],
calculable : true,
legend: {
orient : 'vertical',
width:'100%',
height:320,
top:'30%',
left:'55%',
itemWidth:10,
borderWidth:0,
borderRadius:0,
// itemGap:10,
itemHeight:10,
textStyle:{
color:'#868BA1',
fontFamily: 'PingFangSC-Medium',
// fontSize: 12,
},
data:name
},
//提示框显示在中间
// tooltip:{
// show:true,
// trigger:'item',
//// padding:0,
// borderColor:'#fff',
//// borderWidth:'none',
// backgroundColor:'#fff',
// formatter:function(params,ticket,callback){
// var name=params.data.name;
// var value=params.data.value;
// var str='<div style="text-align:center" id="tooltipbox"><p class="pie-name pie-same">'+name+'</p><p class="pie-nums pie-same">'+value+'</p></div>';
// return str;
// },
// position:'center',
//// position:function(point,params,dom,rect,size){
//////// return ['24.6%','54%']
//// console.log(rect,size.viewSize);
//// var sizes=rect;
//// var marginW=Math.ceil(dom.width/2);
//// var marginH=Math.ceil(dom.height/2);
////// console.log(marginW,marginH);
//// dom.style.marginLeft='-'+marginW+'px';
//// dom.style.marginTop='-'+marginH+'px';
//// return [rect.x,rect.y];
//// },
//// textStyle:{
//// fontFamily:'PingFangSC-Medium',
//// fontWeight:600,
//// width:120,
//// }
// },
series : [
{
type:'pie',
hoverAnimation:false,//取消浮动效果
selectedMode:'single',
selectedOffset:3,
center:['28%','55%'],
data:data,
avoidLabelOverlap: false,
radius : ['47%', '70%'],
label: {
normal: {
show: true,
position: 'center',
formatter : function(param){
return '{top|'+name[2]+'}\n{bottom|'+value[2]+'}'
},
rich:{
top:{
color:'#22252A',
fontSize:18,
fontWeight:600,
lineHeight:18,
fontFamily:'PingFangSC-Medium',
},
bottom:{
color:'#22252A',
fontSize:16,
fontWeight:600,
lineHeight:12,
fontFamily:'PingFangSC-Medium',
padding:[0,0,20,0]
}
},
},
emphasis: {
show: true,
formatter : function(param){
return '{top|'+param.data.name+'}\n{bottom|'+param.data.value+'}'
},
rich:{
top:{
color:'#22252A',
fontSize:18,
fontWeight:600,
lineHeight:18,
fontFamily:'PingFangSC-Medium',
},
bottom:{
color:'#22252A',
fontSize:16,
fontWeight:600,
lineHeight:12,
fontFamily:'PingFangSC-Medium',
padding:[0,0,20,0]
}
},
}
},
itemStyle : {
normal : {
borderWidth:3,
borderColor:'#fff',
label : {
show : false,
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
}
}
},
}
],
};
这个函数是使用html标签使其定位在中间显示数据
function pieFormatter(param){
// var label = param.data.name;
// var value= Math.floor(param.data.value);
// var divWarp = $('<div class="div-tip-warp"/>') ;
// var divTriangle = $('<div class ="triangle-downs hotel-triangle-position">');
// var divContent = $('<div class = "tips-background">');
// var p=$('<p class="pie-name">').text(label);
// var p2= $('<p class="names">').text(value);
// var divFirst =divContent.append(p).append(p2);
// var div = divWarp.append(divTriangle).append(divFirst);
// var cnttext=div.html();
// var dd=cnttext.replace(/<\/?.+?>/g,"");
// console.log(dd);
// var dds=dd.replace(/ /g,"");
// console.log(dds);
// return dds;
// }
修改data即可实现效果图