分段面積圖

概述

分段面積圖透過在特定時間段或索引區間使用不同的顏色或透明度，有選擇地突顯部分區域。這樣既能把注意力引向關鍵區間，又能保留對完整資料集的整體理解。

何時使用

• 突出特定關注的時間段（事件、行銷活動、事故）
• 強調對比視窗（干預前/後的分析）
• 標記特殊條件或營運狀態
• 吸引讀者注意峰值或異常時期

不適用

• 當所有時間段同樣重要時
• 突出段過多時（會削弱焦點）
• 需要連續漸層更好說明過渡時
• 針對數值閾值時（使用依數值的 visualMap 更合適）

關鍵變體

• 依索引（位置）分段 vs 依時間分段
• 多色分段 vs 單一強調色
• 有或沒有邊界標記（垂直線）
• 顯示或隱藏圖例（若突出效果已足夠說明）

使用場景

• 行銷：突出行銷期 vs 基準表現
• 事故分析：標記斷線或效能下降的時間窗
• 季節性比較：強調旺季或假期
• A/B 測試：對比測試期與對照期
• 事件影響：展示重大事件的前/中/後
• 合規場景：標記需要特別注意的時段

資料 (CSV)

x,y
2019-10-10,200
2019-10-11,560
2019-10-12,750
2019-10-13,580
2019-10-14,250
2019-10-15,300
2019-10-16,450
2019-10-17,300
2019-10-18,100

圖表配置 (JSON)

性能提示

• 將突出段控制在 2–4 個，可獲得最佳效果
• 使用對色盲友好的高對比度配色
• 添加垂直標記線（markLine）以清楚標出分段邊界
• 可加入註解，說明為何需要突出這些區間
• 保持基礎填充的不透明度較低，讓高亮更醒目

常見問題

visualMap 中的 "dimension: 0" 代表什麼？ 表示分段以 x 軸索引（dimension 0）為基礎。對於含 9 個點的圖表，索引 0–8 對應 x 軸上的每個位置，便於突出特定時間段或區間。

為什麼分段使用 "gt" 和 "lt"？ gt（大於）與 lt（小於）定義每個突出段的索引範圍。例如 "gt": 1, "lt": 3 會突出索引 2（介於 1 和 3 之間）的點，為該區間填充顏色。

本例中的 markLine 有什麼作用？ markLine 會在特定 x 軸位置（索引 1、3、5、7）繪製垂直虛線，直觀標出突出區域的邊界，幫助讀者看清每個區段的起迄位置。

如何挑選要突出的分段？ 找出對你的故事最重要的時間段或資料區間：

• 表現特別好或需要關注的時期
• 具有特殊條件或事件的時間窗
• 比較視窗（例如干預前/後）
• 高峰或離峰時段

可以為每個突出段使用不同顏色嗎？ 可以！visualMap 裡的每個 piece 都可以有自己的顏色。用不同顏色表示不同事件類型或嚴重程度（如藍色代表正向事件，紅色代表事故）。

為什麼未突出區域的填充較淡？ 基礎的 areaOpacity（0.4）作用於整個區域，而 visualMap 的分段會覆寫特定區間，使對比更強，突出部分更顯眼，同時保留整體脈絡。

什麼時候需要隱藏 visualMap 圖例（show: false）？ 以下情況可隱藏圖例：

• 突出區域已夠清晰（有分隔線或標籤）
• 你強調的是特定時間段，不需要類別標籤
• 圖表已經有其他圖例元素

當顏色代表需要辨識的不同類別時（如「週末」、「促銷期」、「維護時段」），就應顯示圖例。

應該使用多少個突出段？ 建議維持 2–4 個。過多的高亮區域會稀釋重點，讓圖表更難解讀；聚焦在最關鍵的時段即可。