在追蹤金融市場與資產價格走勢時，K線圖是業界標準的視覺化工具。透過將四個關鍵價格點——開盤價、最高價、最低價和收盤價（OHLC）——結合成單一視覺條形，K線圖能顯示價格波動性、交易範圍與市場情緒一目了然，使其成為股票績效儀表板、加密貨幣追蹤器與商品交易視圖的必要工具。
K線的運作原理
在 Apache ECharts 中，K線系列是使用type: 'candlestick'（或別名'k'）。每個資料點都需要一個明確依序排列的四值陣列，格式為[開盤價, 收盤價, 最低價, 最高價]。圖表引擎會在開盤價與收盤價之間繪製實心或空心的實體，並以細長的「影線」延伸至最低價與最高價。
1. 基本設定
要建立基本的K線圖，需將時間值沿連續的X軸進行映射，並傳入[開盤價, 收盤價, 最低價, 最高價]陣列至你的系列資料中：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
xAxis: {
type: 'category',
data: ['2026-05-01', '2026-05-02', '2026-05-03', '2026-05-04', '2026-05-05']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'candlestick',
data: [
[20, 34, 10, 38], // [開盤價, 收盤價, 最低價, 最高價] -> 多頭（收盤價 > 開盤價）
[40, 35, 30, 50], // 空頭（收盤價 < 開盤價）
[31, 38, 33, 44],
[38, 15, 5, 42],
[15, 28, 10, 32]
]
}
]
};
進階結構技巧
K線圖可依國際色彩規範進行自訂，支援縮放時間範圍，或與移動平均線結合使用。
1. 自訂顏色與移動平均線
使用itemStyle來自訂多頭（上漲）與空頭（下跌）柱狀圖的顏色，並透過將折線系列與K線系列混合，疊加移動平均線：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['每日K線', 'MA5']
},
xAxis: {
type: 'category',
data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: '每日K線',
type: 'candlestick',
data: [
[2320, 2320, 2287, 2362],
[2300, 2291, 2288, 2341],
[2295, 2312, 2290, 2380],
[2315, 2330, 2310, 2360],
[2330, 2325, 2312, 2355],
[2325, 2350, 2320, 2370],
[2350, 2340, 2330, 2385]
],
itemStyle: {
color: '#eb4d4b', // 上漲（收盤 > 開盤）的顏色
color0: '#6ab04c', // 下跌（收盤 < 開盤）的顏色
borderColor: '#eb4d4b',
borderColor0: '#6ab04c'
}
},
{
name: 'MA5',
type: 'line',
smooth: true,
data: [null, null, null, null, 2310, 2321, 2329],
lineStyle: { opacity: 0.8, width: 2 }
}
]
};
微調佈局與互動式縮放
新增時間序列縮放控制可讓使用者在瀏覽密集的歷史交易紀錄時擁有更大的彈性。
1. 資料縮放與座標軸游標控制
使用 dataZoom 設定區塊來整合水平滑桿與滑鼠滾輪縮放：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: ['第1天', '第2天', '第3天', '第4天', '第5天', '第6天', '第7天', '第8天']
},
yAxis: {
type: 'value',
scale: true
},
dataZoom: [
{
type: 'inside', // 啟用滑鼠滾輪縮放
start: 20,
end: 100
},
{
type: 'slider', // 視覺化的底部縮放滑桿
show: true,
top: '90%'
}
],
series: [
{
type: 'candlestick',
data: [
[100, 110, 95, 115],
[110, 105, 100, 112],
[105, 120, 104, 125],
[120, 118, 112, 122],
[118, 125, 115, 128],
[125, 122, 120, 130],
[122, 135, 121, 138],
[135, 130, 128, 140]
]
}
]
};
戰略性最佳實務
- 正確排列資料： 請再次確認陣列結構！ECharts 預期的格式為
[開盤, 收盤, 最低, 最高]—將收盤與最低價互換是造成渲染錯誤的常見原因。 - 啟用
scale: true在 Y 軸上： 始終包含scale: true在數值價格軸上，以確保圖表能自動縮放到當前價格範圍，而非強制將原點設為零。 - 使用十字游標座標軸指標： 設定
tooltip.axisPointer.type = 'cross'以顯示連續的垂直與水平參考線，方便價格與時間戳記對齊。