如何使用 ECharts 绘制 K 线图

在金融数据可视化领域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 或本地文件引入 EChartsscriptsrchttps://cdn.jsdelivr.net/npm/echarts5.4.2/dist/echarts.min.js/script2. 创建 DOM 容器在 HTML 中定义一个用于渲染图表的容器dividkline-chartstylewidth:800px;height:600px;/div3. 初始化 ECharts 实例通过 JavaScript 初始化图表并绑定容器constchartecharts.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(letidays-1;idata.length;i){letsum0;for(letj0;jdays;j){sumdata[i-j][1];// 使用收盘价计算}result.push(sum/days);}returnresult;}constma5calculateMA(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){constklineDataparams[0].data;returndiv日期:${params[0].axisValue}/div div开盘:${klineData[0]}/div div收盘:${klineData[1]}/div div最低:${klineData[2]}/div div最高:${klineData[3]}/div;}};四、完整示例代码!DOCTYPEhtmlhtmlheadmetacharsetutf-8titleECharts K 线图示例/titlescriptsrchttps://cdn.jsdelivr.net/npm/echarts5.4.2/dist/echarts.min.js/script/headbodydividkline-chartstylewidth:800px;height:600px;/divscriptconstchartecharts.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(letidays-1;idata.length;i){letsum0;for(letj0;jdays;j){sumdata[i-j][1];}result.push(sum/days);}returnresult;}constma5calculateMA(klineData,5);constoption{title:{text:股票价格 K 线图,left:center},tooltip:{trigger:axis,axisPointer:{type:cross},formatter:function(params){constklineDataparams[0].data;returndiv日期:${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五、总结通过 ECharts 绘制 K 线图的核心步骤包括准备数据并格式化为[open, close, low, high]数组配置xAxis和yAxis作为坐标轴使用type: candlestick定义 K 线图系列通过itemStyle自定义涨跌颜色添加dataZoom实现缩放功能通过额外系列叠加技术指标如均线ECharts 的灵活配置和丰富交互功能使得开发者能够快速构建出满足专业需求的金融图表。无论是静态展示还是动态数据更新ECharts 都能提供流畅的用户体验。