在呈現相對類別分配時，甜甜圈圖提供了一種現代且高對比度的替代方案，取代傳統實心圓餅圖。透過移除中心核心，甜甜圈圖將視覺焦點從填滿區域的大小轉移到外環上的弧長。這個中空的中心區域，為關鍵績效指標、總計摘要或狀態指示器創造了最佳的視覺空間——使其成為高階管理狀態儀表板與財務總結的標準配置。
甜甜圈圖的運作原理
在 Apache ECharts 中，甜甜圈圖是透過使用'pie' 系列類型，搭配一個兩元素的radius 陣列：['innerRadius', 'outerRadius']。第一個值定義中空中心的開口大小，而第二個值則控制外側邊界。
1. 基本設定
要建立標準的甜甜圈圖，請宣告一個系列，並設定type: 'pie'，設定radius: ['50%', '70%']，並傳遞包含name 與value 屬性的資料物件：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '預算分配',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '55%'],
avoidLabelOverlap: true,
label: {
show: false
},
data: [
{ value: 1048, name: '工程' },
{ value: 735, name: '行銷' },
{ value: 580, name: '營運' },
{ value: 484, name: '銷售' },
{ value: 300, name: '支援' }
]
}
]
};
進階結構技巧
當甜甜圈圖搭配中心統計資料或圓潤的視覺風格時，能展現出色表現，從而打造出精緻的使用者介面元件。
1. 中心標籤統計覆疊
利用圖形元素或置中標題元件，將總計或主要關鍵績效指標直接顯示在甜甜圈環內：
ECharts
Edit ECharts in VPasCode
option = {
title: {
text: '$3,147',
subtext: '總支出',
left: 'center',
top: '42%',
textStyle: {
fontSize: 28,
fontWeight: 'bold',
color: '#333'
},
subtextStyle: {
fontSize: 14,
color: '#666'
}
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '支出',
type: 'pie',
radius: ['60%', '80%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
label: {
show: false
},
data: [
{ value: 1048, name: '硬體' },
{ value: 735, name: 'SaaS 訂閱' },
{ value: 580, name: '辦公用品' },
{ value: 484, name: '出差' }
]
}
]
};
微調佈局與區段樣式
加入細膩的圓角與明顯的區段間距，讓甜甜圈圖呈現出時尚、現代的外觀。
1. 圓弧末端與區段間距
使用itemStyle.borderRadius搭配清晰的白色邊框，讓每個弧形區段呈現柔和的藥丸狀外觀：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
name: '儲存空間使用量',
type: 'pie',
radius: ['45%', '70%'],
itemStyle: {
borderRadius: 10,
borderColor: '#ffffff',
borderWidth: 4
},
label: {
show: true,
formatter: '{b}: {d}%'
},
data: [
{ value: 40, name: '文件' },
{ value: 25, name: '媒體檔案' },
{ value: 20, name: '系統資料' },
{ value: 15, name: '可用空間' }
]
}
]
};
策略性最佳實務
- 優化內外半徑比例：將內半徑維持在外半徑的 50% 到 70% 之間，以確保區段足夠寬厚，方便懸停操作，同時保留中心區域充足的空間。
- 有意識地運用中心空間：利用中心的空心區域顯示總計數值或所選區段的指標，而非在圖表周圍堆疊額外的文字框，造成雜亂。
- 限制區段數量：將環形圖的主區段限制在 5 到 6 個。若擁有許多小型分類，應合併為「其他」類別，以避免產生過細、難以辨識的弧形。