在金融数据可视化领域，K 线图（又称蜡烛图）是展示股票、期货等价格走势的核心工具。它通过矩形实体和上下影线直观呈现开盘价、收盘价、最高价和最低价，帮助投资者快速捕捉市场趋势。本文将结合 ECharts 的官方文档和实战案例，详细讲解如何从零开始构建一个专业的 K 线图。
一、K 线图的核心要素
K 线图由四个关键数据点构成：
开盘价（Open）：交易时段开始时的价格
收盘价（Close）：交易时段结束时的价格
最高价（High）：交易时段内的最高价格
最低价（Low）：交易时段内的最低价格
在 ECharts 中，每个 K 线数据点以数组形式表示：[open, close, low, high]。例如，[100, 120, 95, 125] 表示开盘价 100、收盘价 120、最低价 95、最高价 125 的 K 线。
二、基础 K 线图实现步骤
1. 引入 ECharts 库
通过 CDN 或本地文件引入 ECharts：
html
复制代码
2. 创建 DOM 容器
在 HTML 中定义一个用于渲染图表的容器：
html
复制代码
3. 初始化 ECharts 实例
通过 JavaScript 初始化图表并绑定容器：
javascript
复制代码
const chart = echarts.init(document.getElementById('kline-chart'));
4. 配置 K 线图选项
核心配置项包括坐标轴、数据系列和样式：
javascript
复制代码
const option = {
xAxis: {
type: 'category',
data: ['2024-01-01', '2024-01-02', '2024-01-03'], // 日期数据
scale: true, // 自动缩放
boundaryGap: false // 坐标轴两端不留白
},
yAxis: {
type: 'value',
scale: true // 自动缩放
},
series: [{
type: 'candlestick', // 指定为 K 线图
data: [
[100, 120, 95, 125], // 示例数据
[120, 110, 105, 122],
[110, 115, 108, 118]
],
itemStyle: {
color: '#ec0000', // 下跌颜色（红色）
color0: '#00da3c', // 上涨颜色（绿色）
borderColor: '#8A0000', // 下跌边框色
borderColor0: '#008F28' // 上涨边框色
}
}]
};
5. 渲染图表
将配置项应用到图表实例：
javascript
复制代码
chart.setOption(option);
三、进阶功能实现
1. 数据动态加载
通过 AJAX 或 WebSocket 实时获取数据，并更新图表：
javascript
复制代码
// 模拟异步数据加载
setTimeout(() => {
const newData = [
[115, 120, 112, 122],
[120, 118, 115, 125]
];
chart.setOption({
series: [{
data: [...option.series[0].data, ...newData]
}]
});
}, 2000);
2. 添加数据缩放（DataZoom）
支持用户通过滑块缩放查看不同时间范围的数据：
javascript
复制代码
option.dataZoom = [
{
type: 'inside', // 内置型缩放
start: 0, // 初始起始位置（百分比）
end: 50 // 初始结束位置（百分比）
},
{
type: 'slider', // 滑块型缩放
bottom: 10, // 距离底部距离
start: 0,
end: 50
}
];
3. 添加技术指标（如 MA 均线）
通过额外系列叠加均线数据：
javascript
复制代码
// 计算 5 日均线
function calculateMA(data, days) {
const result = [];
for (let i = days - 1; i < data.length; i++) {
let sum = 0;
for (let j = 0; j < days; j++) {
sum += data[i - j][1]; // 使用收盘价计算
}
result.push(sum / days);
}
return result;
}
const ma5 = calculateMA(option.series[0].data, 5);
option.series.push({
type: 'line',
name: 'MA5',
data: Array(4).fill(null).concat(ma5), // 前 4 天无数据
lineStyle: {
color: '#FFA500', // 橙色
width: 2
}
});
4. 自定义提示框（Tooltip）
优化悬浮提示框的显示内容：
javascript
复制代码
option.tooltip = {
trigger: 'axis',
axisPointer: {
type: 'cross' // 显示十字准星
},
formatter: function (params) {
const klineData = params[0].data;
return `
`;
}
};
四、完整示例代码
html
复制代码
五、总结
通过 ECharts 绘制 K 线图的核心步骤包括：
准备数据并格式化为 [open, close, low, high] 数组
配置 xAxis 和 yAxis 作为坐标轴
使用 type: 'candlestick' 定义 K 线图系列
通过 itemStyle 自定义涨跌颜色
添加 dataZoom 实现缩放功能
通过额外系列叠加技术指标（如均线）
ECharts 的灵活配置和丰富交互功能，使得开发者能够快速构建出满足专业需求的金融图表。无论是静态展示还是动态数据更新，ECharts 都能提供流畅的用户体验。
！