當您需要追蹤整體總量與個別次級元件貢獻隨時間的變化時，堆疊面積圖是最理想的視覺化工具。垂直堆疊面積填滿會產生一個連續的綜合視圖，其中最上方的線代表總合總量，而各個帶狀寬度則顯示次分類貢獻的變化情況，例如數個月內總網站流量按搜尋引擎、自然流量和直接推薦管道的分解情況。
堆疊面積圖的運作原理
堆疊面積圖結合了線系列配置與匹配的堆疊屬性。當渲染引擎偵測到多個系列中具有相同堆疊識別符時，若這些系列皆具有type: 'line'且areaStyleareaStyle 活性，它會沿著垂直的 Y 軸，將每個資料點依序堆疊在前一個系列線路的上方。
1. 基本設定
要建立基本的堆疊面積圖，請定義一個連續的 X 軸，設定type: 'line'於每個系列，啟用areaStyle，並為所有系列分配相同的堆疊識別符：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['電子郵件', '聯合廣告', '影片廣告', '直接']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['一', '二', '三', '四', '五', '六', '日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '電子郵件',
type: 'line',
stack: '總計',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '聯合廣告',
type: 'line',
stack: '總計',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '影片廣告',
type: 'line',
stack: '總計',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接',
type: 'line',
stack: '總計',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
進階結構技術
堆疊面積圖可設定為專注於整體累積成長，或隨時間變化的相對比例變化。
1. 100% 正規化百分比面積圖
當評估比例變化而非總體累積量的時間變化時，請將您的資料集正規化為每個水平時間點皆為 100%：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['桌面', '行動裝置', '平板']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2023', '2024', '2025', '2026']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: '桌面',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [65, 55, 48, 40]
},
{
name: '行動裝置',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [25, 35, 42, 50]
},
{
name: '平板',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [10, 10, 10, 10]
}
]
};
微調佈局與樣式
由於堆疊區域完全覆蓋背景，調整填滿的不透明度與線條粗細，有助於保持各層之間的清晰與可讀性。
1. 自訂圖層不透明度與邊界分隔
在略帶透明的區域填滿上設定實線線條，可創造出相鄰堆疊帶之間清晰的視覺邊界：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: '產品 A',
type: 'line',
stack: '量',
smooth: true,
lineStyle: { width: 2, color: '#5470c6' },
areaStyle: { color: '#5470c6', opacity: 0.7 },
data: [120, 150, 180, 210]
},
{
name: '產品 B',
type: 'line',
stack: '量',
smooth: true,
lineStyle: { width: 2, color: '#91cc75' },
areaStyle: { color: '#91cc75', opacity: 0.7 },
data: [220, 280, 250, 310]
},
{
name: '產品 C',
type: 'line',
stack: '量',
smooth: true,
lineStyle: { width: 2, color: '#fac858' },
areaStyle: { color: '#fac858', opacity: 0.7 },
data: [150, 190, 220, 260]
}
]
};
策略性最佳實務
- 將穩定的系列置於底部：將最大或波動最小的系列置於堆疊底部，以建立上方各帶可預測的基準。
- 限制帶數：堆疊超過 4 到 5 個系列會使中間的帶狀區域難以準確評估。建議將次要類別合併為「其他」類別。
- 使用
axisPointer: { type: 'cross' }:將懸停十字線與持續顯示的提示框結合，可輕鬆精確定位密集垂直堆疊中的特定日期值。