為了強調連續時間內的趨勢方向與整體量值，面積圖提供了一種富有表現力的視覺方法。透過填滿趨勢線與水平軸之間的區域，面積圖能將注意力引向相對大小以及序列中的總量變化，例如伺服器頻寬使用量、活躍使用者數量或每日交易吞吐量。
面積圖的運作原理
面積圖直接建立在折線圖的設定之上。透過設定type: 'line'，並在系列物件中加入areaStyle屬性，渲染引擎會自動填滿線路下方至水平基準線的幾何空間。
1. 基本設定
要建立基本的面積圖，定義連續的 X 軸，設定系列type: 'line'，並宣告一個空的或自訂的areaStyle物件：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
areaStyle: {}, // 啟用預設面積填滿
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
進階結構技術
面積圖可透過現代化的色彩漸變與平滑曲線來增強，以提升可讀性與視覺質感。
1. 漸變填滿樣式
純色填滿有時會顯得沉重。應用半透明的線性漸變，可創造出現代且簡潔的外觀，使填滿區域緩慢地向底部軸線淡化：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['一月', '二月', '三月', '四月', '五月', '六月']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: '#5470c6'
},
areaStyle: {
opacity: 0.8,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(84, 112, 198, 0.6)' },
{ offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
]
}
},
data: [320, 450, 410, 680, 890, 950]
}
]
};
2. 重疊的多系列面積比較
當在單一圖表中顯示多個面積系列時，調整填滿的不透明度至關重要，以確保底層的資料路徑仍能完全清晰可見：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['入站流量', '出站流量']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
},
yAxis: {
type: 'value'
},
series: [
{
name: '入站流量',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [120, 200, 450, 600, 700, 380]
},
{
name: '出站流量',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [80, 140, 310, 420, 510, 260]
}
]
};
微調佈局與間距
由於區域填充會一直延伸至 Y 軸基線，因此設定連續的邊界間距可確保填充與畫布邊框對齊整齊。
1. 無縫邊緣對齊
透過設定boundaryGap: false於類別 X 軸上設定，填充會從容器網格的絕對左側邊緣開始，並乾淨地結束於最右側：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
areaStyle: {
color: 'rgba(145, 204, 117, 0.3)'
},
lineStyle: {
color: '#91cc75',
width: 2
},
data: [150, 230, 224, 318]
}
]
};
策略性最佳實務
- 使用低填充不透明度：實心區域填充會遮蔽底層網格線與重疊的圖表系列。為確保高對比度，請始終維持透明度在 20% 至 50% 之間。
- 將圖表系列控制在 2 或 3 個：過多重疊的區域形狀會造成視覺混亂。若累積連續資料集達 4 個或以上，建議改用堆疊面積圖。
- 設定
boundaryGap: false:在時間軸上移除水平邊距，可讓區域填充橫跨整個網格寬度，而不會在左右兩側留下尷尬的空白間隙。