在追蹤連續進展或時間序列變化時，折線圖成為主要的視覺工具。與專注於單一類別比較的離散柱狀圖或條形圖不同，折線圖強調連接與斜率，以突出動能、季節性以及指標的突然變動在連續序列中的表現，例如每日活躍用戶增長、每月重複收入或感測器遙測資料流。
折線圖的運作原理
在 Apache ECharts 中，折線圖的視覺化是透過將 series type 屬性設為 'line'。折線圖沿著連續類別或時間尺度的水平軸（xAxis）將依序排列的資料點連接起來，並把連續數值映射到垂直軸（yAxis).
1. 基本設定
要建立基本的折線圖，請在 X 軸上定義您的連續類別，並將資料集映射到一個具有 type: 'line':
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
data: [150, 230, 224, 218, 135, 147, 260]
}
]
};
進階結構技術
折線圖具有彈性，可用於多指標疊加、平滑插值曲線以及自訂資料點指標。
1. 平滑插值曲線
預設情況下，折線系列以直線段連接資料點。啟用 smooth: true會套用三次樣條插值，以在您的資料集中創建曲線且自然的折線路徑：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330],
lineStyle: {
width: 3,
color: '#5470c6'
}
}
]
};
2. 多線性能比較
透過在「series」陣列中提供多個線條物件，於相同時間區間內比較次要指標：series陣列：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['當前期間', '前一期間']
},
xAxis: {
type: 'category',
data: ['第一週', '第二週', '第三週', '第四週']
},
yAxis: {
type: 'value'
},
series: [
{
name: '當前期間',
type: 'line',
smooth: true,
data: [320, 332, 301, 334],
itemStyle: { color: '#5470c6' }
},
{
name: '前一期間',
type: 'line',
smooth: true,
data: [220, 182, 191, 234],
itemStyle: { color: '#91cc75' }
}
]
};
微調區域填充與資料點
可透過微妙的背景漸層填充與精準的資料標記，視覺上強化折線系列，以突顯關鍵里程碑。
1. 折線區域樣式
加入 areaStyle屬性可將標準折線圖轉換為區域圖，填滿折線路徑與水平軸之間的區域：
ECharts
Edit ECharts in VPasCode
option = {
xAxis: {
type: 'category',
boundaryGap: false, // 將折線直接對齊軸邊緣
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
data: [300, 280, 250, 590, 820, 710, 430],
areaStyle: {
color: 'rgba(84, 112, 198, 0.25)' // 折線下方的柔軟填充
},
lineStyle: {
width: 3,
color: '#5470c6'
},
symbolSize: 8
}
]
};
戰略最佳實務
- 使用
boundaryGap: false用於時間序列：移除連續時間軸上的預設邊緣間隙，可讓折線直接從零邊距開始，呈現乾淨的邊對邊效果。 - 保持折線數量低：避免在單一畫布中渲染超過 4 到 5 條折線。過於擁擠的折線圖（「義大利麵圖」）會迅速變得難以閱讀。
- 軸提示觸發 始終進行設定
工具提示：{ 觸發：'軸' }以便使用者可將游標懸停於任何水平點，同時查看所有活躍折線系列的精確數值。