当前位置：首页 > news >正文

如何使用 ECharts 绘制 K 线图

news 2026/6/24 19:16:48

在金融数据可视化领域，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：

<scriptsrc="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

2. 创建 DOM 容器

在 HTML 中定义一个用于渲染图表的容器：

<divid="kline-chart"style="width:800px;height:600px;"></div>

3. 初始化 ECharts 实例

通过 JavaScript 初始化图表并绑定容器：

constchart=echarts.init(document.getElementById('kline-chart'));

4. 配置 K 线图选项

核心配置项包括坐标轴、数据系列和样式：

constoption={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. 渲染图表

将配置项应用到图表实例：

chart.setOption(option);

三、进阶功能实现

1. 数据动态加载

通过 AJAX 或 WebSocket 实时获取数据，并更新图表：

// 模拟异步数据加载setTimeout(()=>{constnewData=[[115,120,112,122],[120,118,115,125]];chart.setOption({series:[{data:[...option.series[0].data,...newData]}]});},2000);

2. 添加数据缩放（DataZoom）

支持用户通过滑块缩放查看不同时间范围的数据：

option.dataZoom=[{type:'inside',// 内置型缩放start:0,// 初始起始位置（百分比）end:50// 初始结束位置（百分比）},{type:'slider',// 滑块型缩放bottom:10,// 距离底部距离start:0,end:50}];

3. 添加技术指标（如 MA 均线）

通过额外系列叠加均线数据：

// 计算 5 日均线functioncalculateMA(data,days){constresult=[];for(leti=days-1;i<data.length;i++){letsum=0;for(letj=0;j<days;j++){sum+=data[i-j][1];// 使用收盘价计算}result.push(sum/days);}returnresult;}constma5=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）

优化悬浮提示框的显示内容：

option.tooltip={trigger:'axis',axisPointer:{type:'cross'// 显示十字准星},formatter:function(params){constklineData=params[0].data;return`<div>日期:${params[0].axisValue}</div> <div>开盘:${klineData[0]}</div> <div>收盘:${klineData[1]}</div> <div>最低:${klineData[2]}</div> <div>最高:${klineData[3]}</div>`;}};

四、完整示例代码

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ECharts K 线图示例</title><scriptsrc="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script></head><body><divid="kline-chart"style="width:800px;height:600px;"></div><script>constchart=echarts.init(document.getElementById('kline-chart'));// 示例数据constklineData=[[100,120,95,125],[120,110,105,122],[110,115,108,118],[115,120,112,122],[120,118,115,125],[118,125,117,128],[125,130,122,132]];// 计算 MA5 均线functioncalculateMA(data,days){constresult=[];for(leti=days-1;i<data.length;i++){letsum=0;for(letj=0;j<days;j++){sum+=data[i-j][1];}result.push(sum/days);}returnresult;}constma5=calculateMA(klineData,5);constoption={title:{text:'股票价格 K 线图',left:'center'},tooltip:{trigger:'axis',axisPointer:{type:'cross'},formatter:function(params){constklineData=params[0].data;return`<div>日期:${params[0].axisValue}</div> <div>开盘:${klineData[0]}</div> <div>收盘:${klineData[1]}</div> <div>最低:${klineData[2]}</div> <div>最高:${klineData[3]}</div>`;}},xAxis:{type:'category',data:['2024-01-01','2024-01-02','2024-01-03','2024-01-04','2024-01-05','2024-01-06','2024-01-07'],scale:true,boundaryGap:false},yAxis:{type:'value',scale:true},dataZoom:[{type:'inside',start:0,end:50},{type:'slider',bottom:10,start:0,end:50}],series:[{type:'candlestick',name:'K 线',data:klineData,itemStyle:{color:'#ec0000',color0:'#00da3c',borderColor:'#8A0000',borderColor0:'#008F28'}},{type:'line',name:'MA5',data:Array(4).fill(null).concat(ma5),lineStyle:{color:'#FFA500',width:2}}]};chart.setOption(option);</script></body></html>