環形圖的形成其實就是echarts中的餅圖pie,控制餅圖的內圈半徑和外圈半徑來形成環形的效果！下面記錄的問題是在開發中出現發現的，因為在網上找到了利用陰影來做下面的圖：
說明：
由於代碼比較長，不能都寫在這里，如果您也遇到了這些問題，並且有不明白的地方，可以找我，我看到會及時回復，可以多交流哦！
出現的問題
1.在雲480這一圈中出現了明明紫色的區域比例是比黃色區域的比例大的，但是看着圖上的比例就是不對的，就很奇怪
代碼：
具體的series中的配置
series: [
//第一圈
{
// name:'直接訪問',
type:'pie',
clockWise: false, //順時加載
hoverAnimation: true, //鼠標移入變大
radius: ['56%', '61%'],
center: ['50%', '50%'],
zlevel:1,
avoidLabelOverlap: false,
hoverOffset:7,
tooltip : {
show:true,
trigger: 'item',
extraCssText:'box-shadow: 8px 10px 3px rgba(0, 0, 0, 0.3);',
formatter:function(parames){
let marker = '';
let markeTitle = '<div><span>'+'全國總量'+'</span></div>';
let logo1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#4CA6FF'+ '"></span>';
let logo2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#ccb2ff' + '"></span>';
let logo3 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#FFB27F' + '"></span>';
marker = markeTitle+'<div style="color:#fff"><div>'+logo1+'外圍級項目'+':'+mSum+'</div><div>'+logo2+'店鋪級項目:'+sSum+'</div><div>'+logo3+'完整店鋪及POI:'+aSum+'</div></div>';
return marker;
}
},
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{
value:mSum,
name:data.legend[0],
tooltip:{show:true},
emphasis:{
show:false
},
label: {
show: true,
color:'#666',
fontSize:12,
padding:[-180,-100,0,0],
position:'center',
formatter:function(promase){
return '全國總量'+' ' + data.allSum.all
}
},
itemStyle:{
normal: {
// borderWidth: 7,
// // shadowBlur: 40,
// borderColor: "#4CA6FF",
// shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:sSum,
name:data.legend[1],
tooltip:{show:true},
emphasis:{
show:false
},
itemStyle:{
normal: {
label: {
show: false,
position:'outside',
// formatter:'{d}%'
},
labelLine: {
show: true,
},
borderWidth: 7,
// shadowBlur: 40,
borderColor: "#ccb2ff",
shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:aSum,
name:data.legend[2],
tooltip:{show:true},
emphasis:{
show:false
},
itemStyle:{
normal: {
label: {
show: true,
position:'outside',
// formatter:'{d}%'
},
labelLine: {
show: true,
},
borderWidth: 7,
shadowBlur: 40,
borderColor: "#FFB27F",
shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:lastSum,
name:data.legend[3],
tooltip:{show:false},
hoverAnimation: false,
color:'#fff',
itemStyle:{
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: "#E5E5E5",
borderColor: "#E5E5E5",
borderWidth: 0
}
}
},
]
},
// 第二圈
{
type:'pie',
clockWise: false, //順時加載
hoverAnimation: true, //鼠標移入變大
radius: ['45%', '44%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
hoverOffset:7,
datasetIndex:1,
tooltip : {
show:true,
trigger: 'item',
extraCssText:'box-shadow: 8px 10px 3px rgba(0, 0, 0, 0.3);',
formatter:function(parames){
let marker = '';
let markeTitle = '<div><span>'+'合作且有客流'+'</span></div>';
let logo1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#4CA6FF'+ '"></span>';
let logo2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#ccb2ff' + '"></span>';
let logo3 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#FFB27F' + '"></span>';
marker = markeTitle+'<div style="color:#fff"><div>'+logo1+'外圍級項目'+':'+mWinner+'</div><div>'+logo2+'店鋪級項目:'+sWinner+'</div><div>'+logo3+'完整店鋪及POI:'+aWinner+'</div></div>';
return marker;
}
},
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{
value:mWinner,
name:data.legend[0],
tooltip:{show:true},
emphasis:{
show:false
},
label: {
show: true,
color:'#666',
fontSize:12,
padding:[-140,-114,0,0],
position:'center',
formatter:function(promase){
return '合作且有客流'+' ' + data.winnerAndTraffic.all
}
},
itemStyle:{
normal: {
borderWidth: 7,
shadowBlur: 40,
borderColor: "#4CA6FF",
shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:sWinner,
name:data.legend[1],
tooltip:{show:true},
emphasis:{
show:false
},
itemStyle:{
normal: {
label: {
show: true,
position:'outside',
// formatter:'{d}%'
},
labelLine: {
show: true,
},
borderWidth: 7,
shadowBlur: 40,
borderColor: "#ccb2ff",
shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:aWinner,
name:data.legend[2],
tooltip:{show:true},
emphasis:{
show:false
},
itemStyle:{
normal: {
label: {
show: true,
position:'outside',
// formatter:'{d}%'
},
labelLine: {
show: true,
},
borderWidth: 7,
shadowBlur: 40,
borderColor: "#FFB27F",
shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{value:lastWinner,
name:' ',
tooltip:{show:false},
hoverAnimation: false,
itemStyle:{
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: "#E5E5E5",
borderColor: "#E5E5E5",
borderWidth: 0
}
}
},
]
},
// 第三圈
{
type:'pie',
clockWise: false, //順時加載
hoverAnimation: true, //鼠標移入變大
radius: ['30%', '31%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
hoverOffset:7,
datasetIndex:2,
tooltip : {
show:true,
trigger: 'item',
extraCssText:'box-shadow: 8px 10px 3px rgba(0, 0, 0, 0.3);',
formatter:function(parames){
let marker = '';
let markeTitle = '<div><span>'+'有客流且上雲'+'</span></div>';
let logo1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#4CA6FF'+ '"></span>';
let logo2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#ccb2ff' + '"></span>';
let logo3 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#FFB27F' + '"></span>';
marker = markeTitle+'<div style="color:#fff"><div>'+logo1+'外圍級項目'+':'+mYun+'</div><div>'+logo2+'店鋪級項目:'+sYun+'</div><div>'+logo3+'完整店鋪及POI:'+aYun+'</div></div>';
return marker;
}
},
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{
value:mYun,
name:data.legend[0],
tooltip:{show:true},
emphasis:{
show:false
},
label: {
show: true,
color:'#666',
fontSize:12,
padding:[-92,-114,0,0],
position:'center',
formatter:function(promase){
return '有客流且上雲'+' ' + data.yunAndTraffic.all
}
},
itemStyle:{
normal: {
borderWidth: 7,
// shadowBlur: 40,
borderColor: "#4CA6FF",
shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:sYun,
name:data.legend[1],
tooltip:{show:true},
emphasis:{
show:false
},
itemStyle:{
normal: {
label: {
show: false,
position:'outside',
// formatter:'{d}%'
},
labelLine: {
show: false,
},
borderWidth: 7,
// shadowBlur: 40,
borderColor: "#ccb2ff",
// shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:aYun,
name:data.legend[2],
tooltip:{show:true},
emphasis:{
show:false
},
itemStyle:{
normal: {
label: {
show: false,
position:'outside',
// formatter:'{d}%'
},
labelLine: {
show: false,
},
borderWidth: 7,
// shadowBlur: 40,
borderColor: "#FFB27F",
// shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{value:lastYun,
name:data.legend[3],
tooltip:{show:false},
hoverAnimation: false,
itemStyle:{
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: "#E5E5E5",
borderColor: "#E5E5E5",
borderWidth: 0
}
}
},
]
},
]
這樣形成的圖就會有層與層之間的擠壓和覆蓋，所以出現比例在頁面上顯示效果模糊的情況
更改如下
代碼截圖：
主要在數據series中的配置變化
series: [
//第一圈
{
// name:'直接訪問',
type:'pie',
clockWise: false, //順時加載
hoverAnimation: true, //鼠標移入變大
radius: ['56%', '61%'],
center: ['50%', '50%'],
zlevel:1,
avoidLabelOverlap: false,
hoverOffset:7,
tooltip : {
show:true,
trigger: 'item',
extraCssText:'box-shadow: 8px 10px 3px rgba(0, 0, 0, 0.3);',
formatter:function(parames){
let marker = '';
let markeTitle = '<div><span>'+'全國總量'+'</span></div>';
let logo1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#4CA6FF'+ '"></span>';
let logo2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#ccb2ff' + '"></span>';
let logo3 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#FFB27F' + '"></span>';
marker = markeTitle+'<div style="color:#fff"><div>'+logo1+'外圍級項目'+':'+mSum+'</div><div>'+logo2+'店鋪級項目:'+sSum+'</div><div>'+logo3+'完整店鋪及POI:'+aSum+'</div></div>';
return marker;
}
},
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{
value:mSum,
name:data.legend[0],
tooltip:{show:true},
emphasis:{
show:false
},
label: {
show: true,
color:'#666',
fontSize:12,
padding:[-180,-100,0,0],
position:'center',
formatter:function(promase){
return '全國總量'+' ' + data.allSum.all
}
},
itemStyle:{
normal: {
// borderWidth: 7,
// // shadowBlur: 40,
// borderColor: "#4CA6FF",
// shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:sSum,
name:data.legend[1],
tooltip:{show:true},
emphasis:{
show:false
},
itemStyle:{
normal: {
label: {
show: false,
position:'outside',
// formatter:'{d}%'
},
labelLine: {
show: true,
},
// borderWidth: 7,
// // shadowBlur: 40,
// borderColor: "#ccb2ff",
// shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:aSum,
name:data.legend[2],
tooltip:{show:true},
emphasis:{
show:false
},
itemStyle:{
normal: {
label: {
show: true,
position:'outside',
// formatter:'{d}%'
},
labelLine: {
show: true,
},
// borderWidth: 7,
// shadowBlur: 40,
// borderColor: "#FFB27F",
// shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:lastSum,
name:data.legend[3],
tooltip:{show:false},
hoverAnimation: false,
color:'#fff',
itemStyle:{
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(128, 128, 128, 0)',
borderColor: 'rgba(128, 128, 128, 0)',
borderWidth: 0
}
}
},
]
},
//第一圈的底層灰色
{
// name:'直接訪問',
type:'pie',
clockWise: false, //順時加載
hoverAnimation: false, //鼠標移入變大
radius: ['58%', '59%'],
center: ['50%', '50%'],
zlevel:0,
avoidLabelOverlap: false,
hoverOffset:0,
labelLine: {
show: false,
},
data:[
{
value:lastSum,
name:data.legend[3],
tooltip:{show:false},
hoverAnimation: false,
itemStyle:{
normal: {
label: {
show: false
},
labelLine: {
show: false,
},
color: "#E5E5E5",
borderColor: "#E5E5E5",
borderWidth: 0
}
}
},
]
},
// 第二圈
{
type:'pie',
clockWise: false, //順時加載
hoverAnimation: true, //鼠標移入變大
radius: ['42%', '47%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
hoverOffset:7,
zlevel:1,
tooltip : {
show:true,
trigger: 'item',
extraCssText:'box-shadow: 8px 10px 3px rgba(0, 0, 0, 0.3);',
formatter:function(parames){
let marker = '';
let markeTitle = '<div><span>'+'合作且有客流'+'</span></div>';
let logo1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#4CA6FF'+ '"></span>';
let logo2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#ccb2ff' + '"></span>';
let logo3 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#FFB27F' + '"></span>';
marker = markeTitle+'<div style="color:#fff"><div>'+logo1+'外圍級項目'+':'+mWinner+'</div><div>'+logo2+'店鋪級項目:'+sWinner+'</div><div>'+logo3+'完整店鋪及POI:'+aWinner+'</div></div>';
return marker;
}
},
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{
value:mWinner,
name:data.legend[0],
tooltip:{show:true},
emphasis:{
show:false
},
label: {
show: true,
color:'#666',
fontSize:12,
padding:[-140,-114,0,0],
position:'center',
formatter:function(promase){
return '合作且有客流'+' ' + data.winnerAndTraffic.all
}
},
// itemStyle:{
// normal: {
// borderWidth: 7,
// shadowBlur: 40,
// borderColor: "#4CA6FF",
// shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
// }
// }
},
{
value:sWinner,
name:data.legend[1],
tooltip:{show:true},
emphasis:{
show:false
},
itemStyle:{
normal: {
label: {
show: true,
position:'outside',
// formatter:'{d}%'
},
labelLine: {
show: true,
},
// borderWidth: 7,
// shadowBlur: 40,
// borderColor: "#ccb2ff",
// shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:aWinner,
name:data.legend[2],
tooltip:{show:true},
emphasis:{
show:false
},
itemStyle:{
normal: {
label: {
show: true,
position:'outside',
// formatter:'{d}%'
},
labelLine: {
show: true,
},
// borderWidth: 7,
// shadowBlur: 40,
// borderColor: "#FFB27F",
// shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{value:lastWinner,
name:' ',
tooltip:{show:false},
hoverAnimation: false,
itemStyle:{
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(128, 128, 128, 0)',
borderColor: 'rgba(128, 128, 128, 0)',
borderWidth: 0
}
}
},
]
},
//第二圈的底層灰色
{
// name:'直接訪問',
type:'pie',
clockWise: false, //順時加載
hoverAnimation: false, //鼠標移入變大
radius: ['45%', '44%'],
center: ['50%', '50%'],
zlevel:0,
avoidLabelOverlap: false,
hoverOffset:0,
labelLine: {
show: false,
},
data:[
{
value:lastSum,
name:data.legend[3],
tooltip:{show:false},
hoverAnimation: false,
itemStyle:{
normal: {
label: {
show: false
},
labelLine: {
show: false,
},
color: "#E5E5E5",
borderColor: "#E5E5E5",
borderWidth: 0
}
}
},
]
},
// 第三圈
{
type:'pie',
clockWise: false, //順時加載
hoverAnimation: true, //鼠標移入變大
radius: ['28%', '33%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
hoverOffset:7,
zlevel:1,
tooltip : {
show:true,
trigger: 'item',
extraCssText:'box-shadow: 8px 10px 3px rgba(0, 0, 0, 0.3);',
formatter:function(parames){
let marker = '';
let markeTitle = '<div><span>'+'有客流且上雲'+'</span></div>';
let logo1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#4CA6FF'+ '"></span>';
let logo2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#ccb2ff' + '"></span>';
let logo3 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;font-weight:bold;">'#FFB27F' + '"></span>';
marker = markeTitle+'<div style="color:#fff"><div>'+logo1+'外圍級項目'+':'+mYun+'</div><div>'+logo2+'店鋪級項目:'+sYun+'</div><div>'+logo3+'完整店鋪及POI:'+aYun+'</div></div>';
return marker;
}
},
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{
value:mYun,
name:data.legend[0],
tooltip:{show:true},
emphasis:{
show:false
},
label: {
show: true,
color:'#666',
fontSize:12,
padding:[-92,-114,0,0],
position:'center',
formatter:function(promase){
return '有客流且上雲'+' ' + data.yunAndTraffic.all
}
},
itemStyle:{
normal: {
// borderWidth: 7,
// // shadowBlur: 40,
// borderColor: "#4CA6FF",
// shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:sYun,
name:data.legend[1],
tooltip:{show:true},
emphasis:{
show:false
},
itemStyle:{
normal: {
label: {
show: false,
position:'outside',
// formatter:'{d}%'
},
labelLine: {
show: false,
},
// borderWidth: 7,
// // shadowBlur: 40,
// borderColor: "#ccb2ff",
// // shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{
value:aYun,
name:data.legend[2],
tooltip:{show:true},
emphasis:{
show:false
},
itemStyle:{
normal: {
label: {
show: false,
position:'outside',
// formatter:'{d}%'
},
labelLine: {
show: false,
},
// borderWidth: 7,
// // shadowBlur: 40,
// borderColor: "#FFB27F",
// // shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
}
},
{value:lastYun,
name:data.legend[3],
tooltip:{show:false},
hoverAnimation: false,
itemStyle:{
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(128, 128, 128, 0)',
borderColor: 'rgba(128, 128, 128, 0)',
borderWidth: 0
}
}
},
]
},
//第三圈的底層灰色
{
// name:'直接訪問',
type:'pie',
clockWise: false, //順時加載
hoverAnimation: false, //鼠標移入變大
radius: ['30%', '31%'],
center: ['50%', '50%'],
zlevel:0,
avoidLabelOverlap: false,
hoverOffset:0,
labelLine: {
show: false,
},
data:[
{
value:lastYun,
name:data.legend[3],
tooltip:{show:false},
hoverAnimation: false,
itemStyle:{
normal: {
label: {
show: false
},
labelLine: {
show: false,
},
color: "#E5E5E5",
borderColor: "#E5E5E5",
borderWidth: 0
}
}
},
]
},
]
};
下面的也是同理的