原理是先把数据加大并且半径扩大20%(图1),展示数据的时候再把数据还原(图2)及比例还原(图3)
图1
图2
图3
var nData =[
{value:1, name:'直接访问1'},
{value:30, name:'邮件营销1'},
{value:30, name:'联盟广告1'},
{value:50, name:'视频广1告'},
{value:2, name:'搜索引擎1'}
]
var showData =[]
var totalVal = 0;
var maxVal = 0;
nData.forEach(function(a){
totalVal +=a.value
if(a.value>=maxVal) maxVal = a.value
})
var showMore = Math.round(maxVal*0.2)
var showData=nData.map(si=>{
return {
value : showMore+si.value,
name:si.name
}
})
option = {
backgroundColor: '#2c343c',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip : {
trigger: 'item',
formatter: function (param){
return param.name+':'+ (param.value - showMore)+','+ (((param.value - showMore)/totalVal)*100).toFixed(0)+'%'
}
},
visualMap: {
show: false,
min: 0,
max: 50,
inRange: {
colorLightness: [0, 0.5]
}
},
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '50%'],
data:showData,
roseType: 'area',
itemStyle: {
normal: {
// color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)',
label:{
show:true,
// formatter: '{b} : {c} \n ({d}%)'
formatter:function(param){ return (((param.value - showMore)/totalVal)*100).toFixed(0)+'%';}
},
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};