在追踪金融市场和资产价格随时间变化时，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在数值价格轴上始终包含scale: true，以便图表自动缩放到当前价格范围，而不是强制将原点设为零。 - 使用十字准线坐标轴指针：设置
tooltip.axisPointer.type = 'cross'以显示连续的垂直和水平参考线，便于价格与时间戳对齐。