一、餅圖中間文字重疊
當餅圖的扇區數量較多時，很容易出現中間文字重疊的情況。為了解決這個問題，可以調整中間文字的格式或位置。一種常見的方法是使用白色描邊，讓文字更加清晰可見。另外，也可以嘗試通過設置文字的字體、大小、行高等樣式屬性來調整文本的顯示。
option = {
//設置中間文字樣式
series: [{
label: {
normal: {
formatter: '{b|{b}}{c|{c}}{per|{d}%} ',
rich: {
b: {
fontSize: 14,
lineHeight: 22
},
c: {
fontSize: 14,
lineHeight: 22
},
per: {
fontSize: 14,
lineHeight: 22
}
}
}
},
//設置白色描邊
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff'
}
},
data: {...}
}]
};
二、餅圖間隙
在餅圖中，可能會需要為每個扇區之間增加間隙，以使餅圖更加清晰可見。這時，可以使用Echarts的「roseType」屬性，並設置「radius」屬性的值，使相鄰兩個扇區之間產生距離。
option = {
series: [{
type: 'pie',
//設置roseType屬性
roseType: 'radius',
//設置radius屬性的值
radius: ['30%', '80%'],
data: {...}
}]
};
三、餅圖中間文字位置設置
餅圖中間文字的位置可以通過設置文本框的位置來進行調整，可以設置文本框的x、y坐標，或者使用Echarts提供的「left」、「right」、「center」、「top」、「bottom」等屬性來設置文本框相對於容器的位置。
option = {
series: [{
type: 'pie',
label: {
//使用left、top屬性設置文本框相對於容器的位置
left: '50%',
top: '50%',
formatter: '{b|{b}}\n{c|{c}} ({d|{d}%})',
rich: {
b: {
fontSize: 14,
lineHeight: 22
},
c: {
fontSize: 16,
lineHeight: 30
},
d: {
fontSize: 14,
lineHeight: 22
}
}
},
data: {...}
}]
};
四、餅圖下面顯示文字
有時候需要在餅圖下方添加一些說明性文字或圖例，可以使用Echarts的「legend」屬性來設置。同時，可以通過設置「grid」屬性來控制餅圖和文本的位置關係。
option = {
legend: {
//設置圖例的位置
bottom: 10,
data: {...}
},
grid: {
//設置圖表的位置和大小
left: '30%',
top: 0,
width: '70%',
height: '70%'
},
series: [{
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: {...}
}]
};
五、餅圖中間文字換行
當餅圖中間的文字較多時，可能會出現文字溢出或者文字重疊的情況。這時，可以嘗試使用Echarts的「rich」屬性，來設置多行文字，同時可以通過設置「lineHeight」屬性來控制行高，實現文字換行的效果。
option = {
series: [{
type: 'pie',
label: {
normal: {
//使用rich屬性實現多行文字
formatter: [
'{a|{a}}',
'{b|{b}}',
'{c|{c}}',
'{per|{d}%}'
].join('\n'),
rich: {
a: {
color: '#999',
fontSize: 12,
lineHeight: 18
},
b: {
fontSize: 14,
lineHeight: 22
},
c: {
fontSize: 14,
lineHeight: 22
},
per: {
fontSize: 16,
lineHeight: 24
}
}
}
},
data: {...}
}]
};
六、餅圖中間文字不居中
當餅圖中間的文字不居中時，可能是因為文本框的大小不被正確設置所致。可以通過設置文本框的寬度和高度來解決這個問題。
option = {
series: [{
type: 'pie',
label: {
normal: {
formatter: '{b}\n{c} ({d}%)',
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
//設置文本框的大小
width: 130,
height: 90
}
},
data: {...}
}]
};
七、餅狀圖中間放入文字
餅狀圖中有時需要在中間放入一些說明性的文字，這時可以通過設置「graphic」的方式，在餅狀圖的中心添加文字。同時，可以通過設置「z」屬性來調整文字的層級關係，保證文字不被餅狀圖覆蓋。
option = {
series: [{
type: 'pie',
radius: ['50%', '70%'],
label: {
//設置餅圖中間文字為空
normal: {
show: false
}
},
data: {...},
//使用graphic添加文字
graphic: {
type: 'text',
left: 'center',
top: 'center',
z: 2,
style: {
fill: '#333',
text: '餅狀圖中間文字',
font: '16px Microsoft YaHei'
}
}
}]
};
八、餅狀圖文字超出屏幕
當餅狀圖文字超出屏幕時，可以通過設置「tooltip」屬性來實現懸浮提示的功能，顯示完整的文字內容。
option = {
tooltip: {
formatter: '{b}：{c} ({d}%)'
},
series: [{
type: 'pie',
radius: ['50%', '70%'],
label: {
normal: {
formatter: '{b|{b}}\n{c|{c}} ({d|{d}%})',
rich: {
b: {
fontSize: 14,
lineHeight: 22
},
c: {
fontSize: 14,
lineHeight: 22
},
d: {
fontSize: 14,
lineHeight: 22
}
}
}
},
data: {...},
}]
};
九、餅圖文字重疊
當扇區數量較多時，餅圖中間的文字容易出現重疊的情況。這時，可以通過設置「position」屬性來調整文本的位置，或者使用「labelLine」屬性來連接文本框和扇區，讓文本框不會出現重疊。
option = {
series: [{
type: 'pie',
radius: ['50%', '70%'],
label: {
normal: {
//調整文本位置
position: 'outside',
formatter: '{b|{b}}\n{c|{c}} ({d|{d}%})',
rich: {
b: {
fontSize: 14,
lineHeight: 22
},
c: {
fontSize: 14,
lineHeight: 22
},
d: {
fontSize: 14,
lineHeight: 22
}
}
}
},
//使用labelLine連接文本框和扇區
labelLine: {
normal: {
show: true
}
},
data: {...}
}]
};
原創文章，作者：RNRW，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/149080.html
微信掃一掃 
支付寶掃一掃 