简介一份基于C# MVC框架的ECharts K线图实现资源面向需要在前端展示金融数据可视化的.NET开发者重点解决K线图各区块自定义颜色问题。资源包共519个文件包含项目源码、视图模板、JS脚本、配置文件及依赖库dll、js、cshtml、cs等压缩包大小36.31MB整体结构完整便于直接参考或集成到现有项目。已有1142人浏览学习适合正在学习ECharts或需要快速搭建K线图功能的开发者。内容覆盖ECharts库引入、candlestick类型配置、itemStyle颜色区分上涨与下跌K线以及通过C#控制器返回JSON数据动态填充图表的完整思路。资源内包含多个项目文件和NuGet包可对照源码理解前后端联动过程并按需调整颜色、数据源及图表样式。 做C# MVC项目时接了个需求后端管理后台要展示股票/基金的行情K线图。最初想着这还不简单前端找个图表库画一下就行结果真做起来才发现——C#后端出的数据格式和ECharts要的数据格式对不上、日期序列化出来一堆乱七八糟的格式、K线图出来全是错位的柱子光调试数据格式就折腾了半天。这篇博文我把完整的落地过程整理出来包含后端接口设计、ECharts核心配置、以及我踩过的坑给同样要做K线图展示的朋友一个可以直接抄作业的参考。适合的人群MVC项目里需要集成图表展示的C#开发者、刚接触ECharts想做K线图的前端/全栈朋友。下面内容偏实操尽量写清楚每一步牵扯到的关键点。1. 整体思路拆解与技术选型1.1 为什么K线图要用“C# MVC ECharts”这个组合先拆需求。K线图本质上是把一组OHLC数据Open开盘、High最高、Low最低、Close收盘按时间顺序画成蜡烛形态另外一般还会配成交量柱状图。它的核心难点不在“画”而在数据准备和数据格式转换。C# MVC的职责很纯粹从数据库或者第三方行情接口拿到数据组织成前端需要的结构通过HTTP接口吐给页面。ECharts则负责把数据渲染成交互图表。选这个组合的原因很简单C# MVC强类型模型天然适合定义K线数据结构Controller可以直接返回JsonResult前端拿到就是JSON。ECharts对K线图支持非常成熟candlestick系列类型就是专门干这个的内置tooltip、dataZoom、图例联动不需要自己造轮子。这套技术栈在传统企业级后台管理系统里非常普遍维护成本低组内其他同事接手也容易。如果你是纯静态页面项目当然也可以只写HTMLJS但一旦涉及权限控制、数据权限筛选、服务端计算就绕不开后端接口。MVC在这里的价值就是提供稳定、可控的数据服务。1.2 K线图数据结构和ECharts的映射关系这是整个实例里最容易翻车的地方。ECharts的candlestick系列data数组的每一项默认是一个数组[open, close, lowest, highest]。注意顺序不是我们习惯的OHLC而是先open再close再lowest再highest。顺序一错K线图就完全乱套。同时日期数据要单独弄一个数组放在xAxis里也就是说最终数据结构是“两个平行数组”xAxis.data [2025-01-01, 2025-01-02, ...]series.data [[开盘1, 收盘1, 最低1, 最高1], [开盘2, 收盘2, 最低2, 最高2], ...]这个设计很多新手容易不习惯觉得应该把日期和OHLC绑在一个对象里。ECharts之所以这么设计是为了减少每个数据点内部的属性解析开销在做大数据量渲染时性能更好。理解了这个设计后后端接口的返回结构也就清晰了。2. C# MVC端的数据准备与接口设计2.1 定义K线图数据模型在MVC项目里我习惯先建一个模型类对应ECharts需要的结构。注意日期用字符串不用DateTime这样能避开后面序列化格式的大坑。为什么用字符串因为DateTime在序列化时会根据服务端文化信息转换成各种格式前端拿到的可能是“/Date(1704067200000)/”这种带了时区偏移量的字符串解析起来非常烦。直接格式化成“yyyy-MM-dd”字符串ECharts拿过来就能直接当类目轴数据用。public class KLineChartModel { // 对应的日期数组 public Liststring categories { get; set; } // K线数据每一项 [open, close, lowest, highest] public Listobject[] klineData { get; set; } // 成交量数据可选 public Listobject[] volumeData { get; set; } }为什么data用Listobject[]而不是定义一个强类型类的集合因为ECharts的data格式是数组用object[]可以直接匹配[open, close, lowest, highest]的JSON结构序列化出来正好是嵌套数组。如果用强类型类序列化成对象的集合前端还得做一次map转换没必要。2.2 控制器里生成和返回数据在Controller里写一个Action模拟从数据源取数。真实业务中可能从数据库读也可能调用第三方行情接口这里为了演示我用一个生成模拟K线数据的方法来填充。核心是生成连续的日期和四条价格数据保证收盘价在开盘价附近波动最高价大于等于两者、最低价小于等于两者否则画出来的K线逻辑上就是错的。public ActionResult GetKLineData() { var model new KLineChartModel(); var random new Random(); var categories new Liststring(); var klineData new Listobject[](); var volumeData new Listobject[](); var basePrice 100.0; var startDate new DateTime(2025, 1, 1); for (int i 0; i 60; i) { var date startDate.AddDays(i); // 跳过周末K线图在交易日才显示 if (date.DayOfWeek DayOfWeek.Saturday || date.DayOfWeek DayOfWeek.Sunday) continue; categories.Add(date.ToString(yyyy-MM-dd)); var open basePrice (random.NextDouble() - 0.5) * 4; var close open (random.NextDouble() - 0.5) * 4; var high Math.Max(open, close) random.NextDouble() * 2; var low Math.Min(open, close) - random.NextDouble() * 2; var volume random.Next(1000, 10000); klineData.Add(new object[] { Math.Round(open, 2), Math.Round(close, 2), Math.Round(low, 2), Math.Round(high, 2) }); volumeData.Add(new object[] { i, volume }); // volume用索引和值 basePrice close; } model.categories categories; model.klineData klineData; model.volumeData volumeData; return Json(model, JsonRequestBehavior.AllowGet); }注意这里的几点细节跳过了周末因为真实行情只有交易日不跳过的话K线图日期间隙里会有一段平白无故的空档看起来像数据缺失。用Math.Round(..., 2)保留两位小数避免浮点数携带一长串尾数。返回Json(model, JsonRequestBehavior.AllowGet)MVC里GET请求返回JSON默认是禁止的不加这个参数会报错。2.3 JSON序列化中的日期格式陷阱这是C# MVC接ECharts最常见的坑之一。老版本MVC用JavaScriptSerializer序列化DateTime会出现/Date(1704067200000)/这样的格式用Newtonsoft.Json则默认输出ISO格式。问题在于前端如果直接把这个格式丢给ECharts类目轴日期会变成一串数字或者解析异常。解决办法有二数据库到DTO阶段就把DateTime全部格式化成字符串后面全程不再出现DateTime类型。在序列化设置里统一配置日期格式。推荐第一种方式因为后端就把数据结构固定住了前端拿到的一定是干净的yyyy-MM-dd格式无论在什么环境下部署都不受影响。如果你是在.NET Core或者现代版本的项目里用Newtonsoft.Json可以加一行services.AddControllers().AddNewtonsoftJson(options { options.SerializerSettings.DateFormatString yyyy-MM-dd HH:mm:ss; });但在老ASP.NET MVC.NET Framework环境里最稳妥的还是手动格式化成字符串。我实际开发中一直坚持“所有日期序列化前toString”少踩很多坑。3. 前端渲染ECharts K线图3.1 页面结构、脚本引入和AJAX请求前端部分我放在了MVC的View里。用普通Razor视图即可先引入ECharts的CDN或本地文件再写一个div作为图表容器然后通过jQuery的$.ajax请求刚才后端的Action。div idklineChart stylewidth: 100%; height: 600px;/div script src~/Scripts/echarts.min.js/script script src~/Scripts/jquery-3.6.0.min.js/script script $(function () { $.ajax({ url: Url.Action(GetKLineData, Home), type: GET, dataType: json, success: function (res) { initChart(res); }, error: function (xhr, status, error) { console.log(加载K线数据失败:, status, error); } }); }); /script这里有个小细节用Url.Action生成URL而不是写死路径这样不管项目部署在虚拟目录还是根路径下URL都不会错。很多人在本地调试没问题部署到IIS子应用后接口404就是路径写死了。3.2 核心option配置一步步讲拿到数据后初始化图表K线图的option配置也不算复杂但有几个点必须说清楚。function initChart(data) { var chart echarts.init(document.getElementById(klineChart)); var option { backgroundColor: #fff, legend: { data: [日K, 成交量], left: 10 }, tooltip: { trigger: axis, axisPointer: { type: cross } }, grid: [ { left: 60, right: 20, top: 30, height: 55% }, { left: 60, right: 20, top: 75%, height: 15% } ], xAxis: [ { type: category, data: data.categories, boundaryGap: false, axisLine: { lineStyle: { color: #999 } } }, { type: category, gridIndex: 1, data: data.categories, boundaryGap: false, axisLabel: { show: false } } ], yAxis: [ { scale: true, splitLine: { lineStyle: { color: #eee } } }, { gridIndex: 1, splitNumber: 2, axisLabel: { show: false }, splitLine: { show: false } } ], dataZoom: [ { type: inside, xAxisIndex: [0, 1], start: 50, end: 100 }, { type: slider, xAxisIndex: [0, 1], bottom: 10, height: 20 } ], series: [ { name: 日K, type: candlestick, data: data.klineData, itemStyle: { color: #ef232a, // 阳线填充色红涨 color0: #14b143, // 阴线填充色绿跌 borderColor: #ef232a, // 阳线边框 borderColor0: #14b143 // 阴线边框 } }, { name: 成交量, type: bar, xAxisIndex: 1, yAxisIndex: 1, data: data.volumeData.map(function (item) { return { value: item[1], itemStyle: { color: item[1] 0 ? #ef232a : #14b143 } }; }) } ] }; chart.setOption(option); window.addEventListener(resize, function () { chart.resize(); }); }展开讲几个关键点grid双面板布局上面放K线下面放成交量中间留间距。第一个grid的top:30, height:55%第二个grid的top:75%, height:15%相当于三块纵向区域K线占55%成交量占15%上下留白和间隔占剩余30%。这样布局比例比较协调。xAxis双轴对齐两个grid需要各自有一条x轴而且数据源都是日期数组。注意设置gridIndex: 1让第二条x轴绑定到第二个grid。boundaryGap: false很重要这样K线柱子和成交量柱子会从坐标轴起点开始紧密排列否则首尾会有多余留白K线看起来像悬空一样。dataZoom联动因为有两个grid、两根x轴缩放时必须同时控制两个x轴否则会出现K线缩放了成交量没跟着缩放上下就对不齐了。xAxisIndex: [0, 1]就是干这个的。我加了一个内置的滚轮缩放{type:inside}和一个底部的滑块缩放{type:slider}两种交互方式都保留。颜色问题ECharts默认是“绿涨红跌”这是欧美习惯。国内行情软件普遍是“红涨绿跌”所以要手动改candlestick的itemStyle。注意color是阳线收盘价开盘价颜色color0是阴线颜色borderColor和borderColor0也一样要改。很多人在页面上看到颜色不对只改了fill没改border结果柱子中间一个颜色、边框另一个颜色非常奇怪。3.3 tooltip显示优化K线图的tooltip建议用trigger: axis配合axisPointer: { type: cross }这样鼠标滑过时会出现十字准星方便查看某一天的开高低收。如果只是默认的trigger: item鼠标悬停在柱子上时只能看到一组模糊的信息。有些做行情系统的朋友还希望在tooltip里显示涨跌幅这需要给K线数据传入一个包含额外字段的对象而ECharts的candlestick默认只解析四个维度的数组。我的做法是单独再拉一份明细数据在tooltip的formatter里自行拼接。这个功能不是必须的但视觉效果会很专业。4. 排错经验与性能注意4.1 数据顺序导致K线柱子异常这是最常见的错误。K线图的series.data元素顺序是[open, close, lowest, highest]也就是“开、收、低、高”。如果你从数据库查出的字段顺序是date, open, high, low, close然后直接套用一个Listobject[]生成出来的JSON是[open, high, low, close]ECharts会把这个当成[open, close, lowest, highest]去解析高低价全反了每根柱子的上下影线都可能画到实体里面去看起来就是一团乱麻。我的排查方法是先在浏览器控制台打印data.klineData[0]确认数组四个元素的顺序然后对照ECharts文档中data的说明逐项检查。这个习惯帮我节省了大量调试时间。4.2 日期轴缺口问题如果直接用连续自然日作为x轴数据周末、节假日会以一条平线或空档存在。真实K线图是不显示非交易日的。两个办法前提是后端只返回交易日的数据xAxis.data就是交易日列表这种情况下ECharts的类目轴本来就是按数据项顺序排列不会额外插入空档。如果你混合了非交易日又不想在x轴显示它们那就用type: category它会老老实实按data数组顺序展示不会计算时间间隔。有些朋友用type: time类型做K线图想让ECharts自动识别时间间隔。实测下来一旦遇到非交易日time轴就会在缺失日期上留空视觉效果很滑稽。K线图用category轴是更稳妥的。4.3 MVC返回JSON的HttpStatusCode问题在Controller里直接return Json(...)默认返回200正常情况没事。但如果中间出现异常前端拿到的是500错误页HTML而不是JSONAJAX的error回调触发页面提示“数据加载失败”却不告诉你具体原因。建议在开发阶段给AJAX加上error: function (xhr) { console.log(xhr.responseText); }先看响应内容再定位后端异常。另外MVC的Json方法默认是JsonRequestBehavior.DenyGet当GET请求访问返回JSON的Action时会直接拒绝。解决方式是显式指定AllowGet或者改为POST请求。我个人偏爱改成POST因为K线图接口往往带股票代码、周期等参数POST传参不容易遇到URL长度限制也更语义化。4.4 大数据量K线渲染卡顿当你一次加载几千根K线数据时ECharts默认会全部渲染DOM节点非常重交互会明显变卡。处理办法接口层面做数据压缩只返回用户当前可视区间的数据配合dataZoom的4个事件动态请求后端。前端用ECharts的sampling: lttb在缩放时自动降采样视觉上几乎察觉不到区别但性能提升非常显著。关闭一些不必要的动画。大数据量下animation: false能让交互响应快很多。我实测下来3000根K线以上开启sampling和关闭动画后缩放和拖拽的流畅度提升非常明显建议在正式环境里默认就开。4.5 页面刷新后图表宽度塌缩这个问题比较隐蔽。图表初始化时机在AJAX成功回调里此时页面DOM其实已经渲染完成了一般不会出现宽度为0的情况。但如果页面里包含动态加载的侧边栏、折叠面板、弹窗图表容器在初始化时可能是隐藏的ECharts在隐藏元素上计算宽度会得到0图表就会变得扁扁的。等容器展开后记得手动调用一次chart.resize()。如果项目里用了Tab页签一个Tab里放图表切换到该Tab时才初始化这是最稳的。也可以用setTimeout等方式延迟初始化但治标不治本。5. 后续可以扩展的方向这个实例做完之后我后续实际还加了不少功能多周期切换日K/周K/月K、均线MA5/MA10/MA20叠加、MACD副图指标。这些在ECharts里都有现成方案但要注意的是如果需要展示均线就不能只返回klineData了还要后端提前算好每一条均线序列或者前端拿到数据后自行计算。我的经验是放在后端计算这样便于统一指标口径也方便以后做接口给其他客户端复用。如果只是做个后台图表看板不追求实时行情级体验这套方案已经完全够用了。本文还有配套的精品资源点击获取 C# MVC集成ECharts实现K线图完整实战指南
简介一份基于C# MVC框架的ECharts K线图实现资源面向需要在前端展示金融数据可视化的.NET开发者重点解决K线图各区块自定义颜色问题。资源包共519个文件包含项目源码、视图模板、JS脚本、配置文件及依赖库dll、js、cshtml、cs等压缩包大小36.31MB整体结构完整便于直接参考或集成到现有项目。已有1142人浏览学习适合正在学习ECharts或需要快速搭建K线图功能的开发者。内容覆盖ECharts库引入、candlestick类型配置、itemStyle颜色区分上涨与下跌K线以及通过C#控制器返回JSON数据动态填充图表的完整思路。资源内包含多个项目文件和NuGet包可对照源码理解前后端联动过程并按需调整颜色、数据源及图表样式。 做C# MVC项目时接了个需求后端管理后台要展示股票/基金的行情K线图。最初想着这还不简单前端找个图表库画一下就行结果真做起来才发现——C#后端出的数据格式和ECharts要的数据格式对不上、日期序列化出来一堆乱七八糟的格式、K线图出来全是错位的柱子光调试数据格式就折腾了半天。这篇博文我把完整的落地过程整理出来包含后端接口设计、ECharts核心配置、以及我踩过的坑给同样要做K线图展示的朋友一个可以直接抄作业的参考。适合的人群MVC项目里需要集成图表展示的C#开发者、刚接触ECharts想做K线图的前端/全栈朋友。下面内容偏实操尽量写清楚每一步牵扯到的关键点。1. 整体思路拆解与技术选型1.1 为什么K线图要用“C# MVC ECharts”这个组合先拆需求。K线图本质上是把一组OHLC数据Open开盘、High最高、Low最低、Close收盘按时间顺序画成蜡烛形态另外一般还会配成交量柱状图。它的核心难点不在“画”而在数据准备和数据格式转换。C# MVC的职责很纯粹从数据库或者第三方行情接口拿到数据组织成前端需要的结构通过HTTP接口吐给页面。ECharts则负责把数据渲染成交互图表。选这个组合的原因很简单C# MVC强类型模型天然适合定义K线数据结构Controller可以直接返回JsonResult前端拿到就是JSON。ECharts对K线图支持非常成熟candlestick系列类型就是专门干这个的内置tooltip、dataZoom、图例联动不需要自己造轮子。这套技术栈在传统企业级后台管理系统里非常普遍维护成本低组内其他同事接手也容易。如果你是纯静态页面项目当然也可以只写HTMLJS但一旦涉及权限控制、数据权限筛选、服务端计算就绕不开后端接口。MVC在这里的价值就是提供稳定、可控的数据服务。1.2 K线图数据结构和ECharts的映射关系这是整个实例里最容易翻车的地方。ECharts的candlestick系列data数组的每一项默认是一个数组[open, close, lowest, highest]。注意顺序不是我们习惯的OHLC而是先open再close再lowest再highest。顺序一错K线图就完全乱套。同时日期数据要单独弄一个数组放在xAxis里也就是说最终数据结构是“两个平行数组”xAxis.data [2025-01-01, 2025-01-02, ...]series.data [[开盘1, 收盘1, 最低1, 最高1], [开盘2, 收盘2, 最低2, 最高2], ...]这个设计很多新手容易不习惯觉得应该把日期和OHLC绑在一个对象里。ECharts之所以这么设计是为了减少每个数据点内部的属性解析开销在做大数据量渲染时性能更好。理解了这个设计后后端接口的返回结构也就清晰了。2. C# MVC端的数据准备与接口设计2.1 定义K线图数据模型在MVC项目里我习惯先建一个模型类对应ECharts需要的结构。注意日期用字符串不用DateTime这样能避开后面序列化格式的大坑。为什么用字符串因为DateTime在序列化时会根据服务端文化信息转换成各种格式前端拿到的可能是“/Date(1704067200000)/”这种带了时区偏移量的字符串解析起来非常烦。直接格式化成“yyyy-MM-dd”字符串ECharts拿过来就能直接当类目轴数据用。public class KLineChartModel { // 对应的日期数组 public Liststring categories { get; set; } // K线数据每一项 [open, close, lowest, highest] public Listobject[] klineData { get; set; } // 成交量数据可选 public Listobject[] volumeData { get; set; } }为什么data用Listobject[]而不是定义一个强类型类的集合因为ECharts的data格式是数组用object[]可以直接匹配[open, close, lowest, highest]的JSON结构序列化出来正好是嵌套数组。如果用强类型类序列化成对象的集合前端还得做一次map转换没必要。2.2 控制器里生成和返回数据在Controller里写一个Action模拟从数据源取数。真实业务中可能从数据库读也可能调用第三方行情接口这里为了演示我用一个生成模拟K线数据的方法来填充。核心是生成连续的日期和四条价格数据保证收盘价在开盘价附近波动最高价大于等于两者、最低价小于等于两者否则画出来的K线逻辑上就是错的。public ActionResult GetKLineData() { var model new KLineChartModel(); var random new Random(); var categories new Liststring(); var klineData new Listobject[](); var volumeData new Listobject[](); var basePrice 100.0; var startDate new DateTime(2025, 1, 1); for (int i 0; i 60; i) { var date startDate.AddDays(i); // 跳过周末K线图在交易日才显示 if (date.DayOfWeek DayOfWeek.Saturday || date.DayOfWeek DayOfWeek.Sunday) continue; categories.Add(date.ToString(yyyy-MM-dd)); var open basePrice (random.NextDouble() - 0.5) * 4; var close open (random.NextDouble() - 0.5) * 4; var high Math.Max(open, close) random.NextDouble() * 2; var low Math.Min(open, close) - random.NextDouble() * 2; var volume random.Next(1000, 10000); klineData.Add(new object[] { Math.Round(open, 2), Math.Round(close, 2), Math.Round(low, 2), Math.Round(high, 2) }); volumeData.Add(new object[] { i, volume }); // volume用索引和值 basePrice close; } model.categories categories; model.klineData klineData; model.volumeData volumeData; return Json(model, JsonRequestBehavior.AllowGet); }注意这里的几点细节跳过了周末因为真实行情只有交易日不跳过的话K线图日期间隙里会有一段平白无故的空档看起来像数据缺失。用Math.Round(..., 2)保留两位小数避免浮点数携带一长串尾数。返回Json(model, JsonRequestBehavior.AllowGet)MVC里GET请求返回JSON默认是禁止的不加这个参数会报错。2.3 JSON序列化中的日期格式陷阱这是C# MVC接ECharts最常见的坑之一。老版本MVC用JavaScriptSerializer序列化DateTime会出现/Date(1704067200000)/这样的格式用Newtonsoft.Json则默认输出ISO格式。问题在于前端如果直接把这个格式丢给ECharts类目轴日期会变成一串数字或者解析异常。解决办法有二数据库到DTO阶段就把DateTime全部格式化成字符串后面全程不再出现DateTime类型。在序列化设置里统一配置日期格式。推荐第一种方式因为后端就把数据结构固定住了前端拿到的一定是干净的yyyy-MM-dd格式无论在什么环境下部署都不受影响。如果你是在.NET Core或者现代版本的项目里用Newtonsoft.Json可以加一行services.AddControllers().AddNewtonsoftJson(options { options.SerializerSettings.DateFormatString yyyy-MM-dd HH:mm:ss; });但在老ASP.NET MVC.NET Framework环境里最稳妥的还是手动格式化成字符串。我实际开发中一直坚持“所有日期序列化前toString”少踩很多坑。3. 前端渲染ECharts K线图3.1 页面结构、脚本引入和AJAX请求前端部分我放在了MVC的View里。用普通Razor视图即可先引入ECharts的CDN或本地文件再写一个div作为图表容器然后通过jQuery的$.ajax请求刚才后端的Action。div idklineChart stylewidth: 100%; height: 600px;/div script src~/Scripts/echarts.min.js/script script src~/Scripts/jquery-3.6.0.min.js/script script $(function () { $.ajax({ url: Url.Action(GetKLineData, Home), type: GET, dataType: json, success: function (res) { initChart(res); }, error: function (xhr, status, error) { console.log(加载K线数据失败:, status, error); } }); }); /script这里有个小细节用Url.Action生成URL而不是写死路径这样不管项目部署在虚拟目录还是根路径下URL都不会错。很多人在本地调试没问题部署到IIS子应用后接口404就是路径写死了。3.2 核心option配置一步步讲拿到数据后初始化图表K线图的option配置也不算复杂但有几个点必须说清楚。function initChart(data) { var chart echarts.init(document.getElementById(klineChart)); var option { backgroundColor: #fff, legend: { data: [日K, 成交量], left: 10 }, tooltip: { trigger: axis, axisPointer: { type: cross } }, grid: [ { left: 60, right: 20, top: 30, height: 55% }, { left: 60, right: 20, top: 75%, height: 15% } ], xAxis: [ { type: category, data: data.categories, boundaryGap: false, axisLine: { lineStyle: { color: #999 } } }, { type: category, gridIndex: 1, data: data.categories, boundaryGap: false, axisLabel: { show: false } } ], yAxis: [ { scale: true, splitLine: { lineStyle: { color: #eee } } }, { gridIndex: 1, splitNumber: 2, axisLabel: { show: false }, splitLine: { show: false } } ], dataZoom: [ { type: inside, xAxisIndex: [0, 1], start: 50, end: 100 }, { type: slider, xAxisIndex: [0, 1], bottom: 10, height: 20 } ], series: [ { name: 日K, type: candlestick, data: data.klineData, itemStyle: { color: #ef232a, // 阳线填充色红涨 color0: #14b143, // 阴线填充色绿跌 borderColor: #ef232a, // 阳线边框 borderColor0: #14b143 // 阴线边框 } }, { name: 成交量, type: bar, xAxisIndex: 1, yAxisIndex: 1, data: data.volumeData.map(function (item) { return { value: item[1], itemStyle: { color: item[1] 0 ? #ef232a : #14b143 } }; }) } ] }; chart.setOption(option); window.addEventListener(resize, function () { chart.resize(); }); }展开讲几个关键点grid双面板布局上面放K线下面放成交量中间留间距。第一个grid的top:30, height:55%第二个grid的top:75%, height:15%相当于三块纵向区域K线占55%成交量占15%上下留白和间隔占剩余30%。这样布局比例比较协调。xAxis双轴对齐两个grid需要各自有一条x轴而且数据源都是日期数组。注意设置gridIndex: 1让第二条x轴绑定到第二个grid。boundaryGap: false很重要这样K线柱子和成交量柱子会从坐标轴起点开始紧密排列否则首尾会有多余留白K线看起来像悬空一样。dataZoom联动因为有两个grid、两根x轴缩放时必须同时控制两个x轴否则会出现K线缩放了成交量没跟着缩放上下就对不齐了。xAxisIndex: [0, 1]就是干这个的。我加了一个内置的滚轮缩放{type:inside}和一个底部的滑块缩放{type:slider}两种交互方式都保留。颜色问题ECharts默认是“绿涨红跌”这是欧美习惯。国内行情软件普遍是“红涨绿跌”所以要手动改candlestick的itemStyle。注意color是阳线收盘价开盘价颜色color0是阴线颜色borderColor和borderColor0也一样要改。很多人在页面上看到颜色不对只改了fill没改border结果柱子中间一个颜色、边框另一个颜色非常奇怪。3.3 tooltip显示优化K线图的tooltip建议用trigger: axis配合axisPointer: { type: cross }这样鼠标滑过时会出现十字准星方便查看某一天的开高低收。如果只是默认的trigger: item鼠标悬停在柱子上时只能看到一组模糊的信息。有些做行情系统的朋友还希望在tooltip里显示涨跌幅这需要给K线数据传入一个包含额外字段的对象而ECharts的candlestick默认只解析四个维度的数组。我的做法是单独再拉一份明细数据在tooltip的formatter里自行拼接。这个功能不是必须的但视觉效果会很专业。4. 排错经验与性能注意4.1 数据顺序导致K线柱子异常这是最常见的错误。K线图的series.data元素顺序是[open, close, lowest, highest]也就是“开、收、低、高”。如果你从数据库查出的字段顺序是date, open, high, low, close然后直接套用一个Listobject[]生成出来的JSON是[open, high, low, close]ECharts会把这个当成[open, close, lowest, highest]去解析高低价全反了每根柱子的上下影线都可能画到实体里面去看起来就是一团乱麻。我的排查方法是先在浏览器控制台打印data.klineData[0]确认数组四个元素的顺序然后对照ECharts文档中data的说明逐项检查。这个习惯帮我节省了大量调试时间。4.2 日期轴缺口问题如果直接用连续自然日作为x轴数据周末、节假日会以一条平线或空档存在。真实K线图是不显示非交易日的。两个办法前提是后端只返回交易日的数据xAxis.data就是交易日列表这种情况下ECharts的类目轴本来就是按数据项顺序排列不会额外插入空档。如果你混合了非交易日又不想在x轴显示它们那就用type: category它会老老实实按data数组顺序展示不会计算时间间隔。有些朋友用type: time类型做K线图想让ECharts自动识别时间间隔。实测下来一旦遇到非交易日time轴就会在缺失日期上留空视觉效果很滑稽。K线图用category轴是更稳妥的。4.3 MVC返回JSON的HttpStatusCode问题在Controller里直接return Json(...)默认返回200正常情况没事。但如果中间出现异常前端拿到的是500错误页HTML而不是JSONAJAX的error回调触发页面提示“数据加载失败”却不告诉你具体原因。建议在开发阶段给AJAX加上error: function (xhr) { console.log(xhr.responseText); }先看响应内容再定位后端异常。另外MVC的Json方法默认是JsonRequestBehavior.DenyGet当GET请求访问返回JSON的Action时会直接拒绝。解决方式是显式指定AllowGet或者改为POST请求。我个人偏爱改成POST因为K线图接口往往带股票代码、周期等参数POST传参不容易遇到URL长度限制也更语义化。4.4 大数据量K线渲染卡顿当你一次加载几千根K线数据时ECharts默认会全部渲染DOM节点非常重交互会明显变卡。处理办法接口层面做数据压缩只返回用户当前可视区间的数据配合dataZoom的4个事件动态请求后端。前端用ECharts的sampling: lttb在缩放时自动降采样视觉上几乎察觉不到区别但性能提升非常显著。关闭一些不必要的动画。大数据量下animation: false能让交互响应快很多。我实测下来3000根K线以上开启sampling和关闭动画后缩放和拖拽的流畅度提升非常明显建议在正式环境里默认就开。4.5 页面刷新后图表宽度塌缩这个问题比较隐蔽。图表初始化时机在AJAX成功回调里此时页面DOM其实已经渲染完成了一般不会出现宽度为0的情况。但如果页面里包含动态加载的侧边栏、折叠面板、弹窗图表容器在初始化时可能是隐藏的ECharts在隐藏元素上计算宽度会得到0图表就会变得扁扁的。等容器展开后记得手动调用一次chart.resize()。如果项目里用了Tab页签一个Tab里放图表切换到该Tab时才初始化这是最稳的。也可以用setTimeout等方式延迟初始化但治标不治本。5. 后续可以扩展的方向这个实例做完之后我后续实际还加了不少功能多周期切换日K/周K/月K、均线MA5/MA10/MA20叠加、MACD副图指标。这些在ECharts里都有现成方案但要注意的是如果需要展示均线就不能只返回klineData了还要后端提前算好每一条均线序列或者前端拿到数据后自行计算。我的经验是放在后端计算这样便于统一指标口径也方便以后做接口给其他客户端复用。如果只是做个后台图表看板不追求实时行情级体验这套方案已经完全够用了。本文还有配套的精品资源点击获取