當呈現單一靜態總數的相對比例或百分比份額時，餅圖 是一個熟悉且直覺的選擇。透過將圓形劃分為比例切片，餅圖讓觀看者能快速掌握各個組成部分如何貢獻於一個整體，例如市場份額分配、裝置偏好分割或支出類別配置。
餅圖的運作原理
與使用水平和垂直軸的笛卡兒圖表不同，餅圖將分類資料直接映射到極坐標系統上的徑向角度。在 Apache ECharts 中，透過將系列的type設為'pie'，並提供一個物件陣列，其中每個項目都包含一個數值value和描述性name.
1. 基本設定
要建立基本的餅圖，請定義一個系列，並設定type: 'pie'，並將您的結構化資料集放入data陣列中：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: '60%',
data: [
{ value: 1048, name: '搜尋引擎' },
{ value: 735, name: '直接' },
{ value: 580, name: '電子郵件' },
{ value: 484, name: '聯合廣告' },
{ value: 300, name: '影片廣告' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
進階結構技術
餅圖可調整為環形的甜甜圈佈局，或使用自訂半徑來強調主要資料段。
1. 甜甜圈圖變體
設定半徑 屬性作為一個兩值陣列（例如，['40%', '70%']) 會將中心挖空，以創建一個乾淨的環形圖。這會在中間留下空間，用於自訂總結標籤：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '設備類型',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 8,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold'
}
},
data: [
{ value: 1048, name: '桌面' },
{ value: 735, name: '行動裝置' },
{ value: 580, name: '平板' },
{ value: 484, name: '其他' }
]
}
]
};
微調佈局與樣式
控制標籤引線和扇形邊界，即使在處理較小的資料值時，也能保持餅圖的可讀性。
1. 自訂扇形分離與標籤引線
套用項目邊框寬度並設定外部指引線，可防止相鄰扇形上的文字重疊：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
name: '市場佔有率',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{ value: 40, name: '品牌 A' },
{ value: 30, name: '品牌 B' },
{ value: 15, name: '品牌 C' },
{ value: 10, name: '品牌 D' },
{ value: 5, name: '其他' }
],
label: {
formatter: '{b}: {d}%'
},
labelLine: {
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
戰略最佳實務
- 將扇形數量限制在 5 或 6 個： 太多小扇形會讓餅圖難以閱讀。將較小的數值歸類至「其他」項目下，以保持焦點清晰。
- 依大小排序扇形： 將最大的扇形從 12 點鐘位置開始，並依順時針方向順序排列其他扇形，以方便快速掃描。
- 在提示框或標籤中直接顯示百分比： 始終包含
{d}%在標籤或提示框格式化器中，讓觀看者能立即看到比例關係，無需進行心算。