简介：基于HQChart-master的微信小程序股票图表开发源码包，面向需要在小程序中实现沪深/港股K线图、实时走势图及通达信语法指标解析的开发者。压缩包共72个文件，大小仅1.14MB，以js逻辑代码为主，辅以wxml/wxss界面文件、html演示页面、png图标素材及json配置数据，可快速定位图表渲染、数据请求与样式调整相关模块。内容覆盖小程序行情模块完整用例，包含历史/分钟K线、横竖屏适配、通达信公式编译与指标计算、行情数据接口对接等关键实现，并附有API说明文档，适合具备一定小程序与JavaScript基础的开发者参考学习，可直接移植或二次扩展。目前已有1076人学习下载，对于需要快速搭建股票图表功能的项目具有较高参考价值。 做小程序选行情图表库那阵子，我差不多把主流的开源方案翻了个遍。微信小程序里画沪深/港股K线图、走势图，又要带通达信语法解析，筛到最后基本就剩HQChart值得认真研究。这个项目名字里的“master.zip”可能让很多人以为是随便down下来的某段历史版本，实际用下来发现，它就是一套可以塞进小程序原生工程的前端行情图表方案，源码、Demo、文档都有，关键在于你会不会用。这篇文章把我的落地过程、踩坑经历和几个关键设计思路完整写下来，给同样要在这个需求上折腾的人省点时间。
1. 为什么是小程序里画K线，我最终选了HQChart
先说选型。小程序里画行情图，市面上的路子说多不多，说少不少：ECharts有小程序版mpvue-echarts，uCharts主打轻量，KLineChart专攻K线，HQChart属于全能型选手。ECharts的问题是包体积大、Canvas绘制在低端机上掉帧；uCharts画基础饼图柱状图很顺手，但金融场景的复合指标、十字光标、分时叠加这些细节做得比较浅；KLineChart交互手感好，可它不支持“指标公式自定义”，而通达信语法恰恰是这个项目里绕不开的需求。真正定下来用HQChart，是因为它把“行情图”和“公式解析”两件事都做了。
从项目性质看，沪深和港股的数据结构相似但细节不同，港股的小数位精度、停牌处理、涨跌幅限制都和A股有差异，需要的是能通过数据驱动灵活渲染的图表层，而不是写死在代码里的绘制逻辑。HQChart以JSON配置驱动图形渲染，数据源可以自由切换，天然适合多市场适配。再加上它原生支持H5和小程序两套环境，同一个核心能在两端复用，这在做跨端产品时是巨大的优势。
还有一点容易被忽略：HQChart的社区活跃度和文档完整度在同类项目里算靠前的。项目作者对问题响应很快，微信小程序遇到的canvas兼容问题、手势冲突问题，在issues里基本都能找到解决办法。对于需要快速交付的团队来说，这比技术栈炫不炫重要得多。
2. 把HQChart塞进微信小程序的正确姿势
2.1 从压缩包到工程目录：第一步别放错位置
标题里的“HQChart-master.zip”下载解压之后，真正要用的不是整个仓库，而是里面的hqchart目录。这个目录包含核心JS库和样式文件，是整个图表引擎的主体。官方推荐的做法是把hqchart原样拷贝到小程序项目的根目录下，和pages、utils平级。不要自作主张把里面的文件按自己的习惯重新整理，它内部的相对引用路径是写好的，乱动会引发一堆找不到模块的报错。
另外一个容易踩的坑：小程序开发者工具默认只编译项目内的文件，如果你把hqchart放在项目外部再通过npm引用，会碰到构建配置的问题。我的建议是直接copy目录，不要走npm包管理，虽然看起来“不够工程化”，但在小程序这种构建链路下最稳，省掉一堆配置折腾。
2.2 页面配置：Canvas是核心载体
HQChart在小程序里是纯Canvas绘制，所以每个要展示行情图的页面，WXML里需要放置对应的canvas组件。需要注意的是，新版小程序基础库建议使用type="2d"的Canvas 2D接口，HQChart新版本已经兼容了这套接口。如果你是老项目，还在用旧版Canvas接口，建议升级，因为新版接口在iOS和Android上的渲染一致性、触摸事件响应都好很多。
WXML结构大概这样：
<view class="chart-container"> <canvas type="2d" id="klineChart" class="chart-canvas"></canvas> </view>CSS部分要给canvas明确的宽高，建议用百分比或者rpx做适配，不要用固定px写死。HQChart内部会根据canvas的实际像素尺寸绘制图形，如果你的容器尺寸不对，最常见的表现就是画出来的图被裁切或者整片空白。
2.3 初始化时机：别在onLoad里急着画图
我第一次接入的时候，在onLoad里就直接创建图表实例，结果有一部分真机白屏，开发工具却正常。后来定位到原因：onLoad阶段页面还没完成首屏布局，canvas的尺寸信息是0，图表画了个寂寞。正确的做法是在onReady回调里初始化，或者用wx.createSelectorQuery()拿到canvas节点并且等节点尺寸就绪之后再调用init。
这是从普通Web页面开发转到小程序时最容易犯的惯性错误。Web里DOM解析完就能画，小程序里组件的生命周期和布局完成是两回事。如果你在onReady里还是偶尔白屏，再加一个小延迟或者用wx.nextTick包一层，基本能解决问题。
3. 跑通第一根K线：核心代码与页面组织
3.1 图表类型与数据结构：先搞懂HQChart的抽象模型
HQChart对行情图表的抽象很清晰：图上承载的是K线图、分时图、柱状图这些类型，每种类型由对应的数据源和指标逻辑驱动。K线图的每个数据点核心字段是date、open、high、low、close，另外可以带vol成交量、yclose昨收等扩展字段。
一个标准的K线数据点：
{ date: '2024-06-03', open: 3125.50, high: 3150.20, low: 3108.80, close: 3142.70, vol: 482000000, yclose: 3105.30 }HQChart本身不关心数据从哪里来，你从行情接口拉也好、本地模拟也好，只要按这个结构喂给它，它就能画。这也是它做多市场适配的基础：沪深和港股本质上都是同一套OHLC结构，差异在业务层面而不是图形层面。
3.2 初始化图表实例
K线图的初始化逻辑，核心代码如下：
const JSCommon = require('../../hqchart/utils/JSCommon'); const JSKLine = require('../../hqchart/core/JSKLine'); const { JSChart } = require('../../hqchart/core/JSChart'); // 创建K线图实例 let chart = null; const chartContainer = this.selectComponent('#klineChart'); const initChart = () => { const query = wx.createSelectorQuery(); query.select('#klineChart').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node; const width = res[0].width; const height = res[0].height; const option = { type: 'kline', // 图表类型：kline 或 minute canvas: canvas, width: width, height: height, windows: [ { index: 0, label: 'MA', data: [5, 10, 20] }, // 主图均线 { index: 1, label: 'VOL', data: [] }, { index: 2, label: 'MACD', data: [] } ], isUpdate: false, // 首屏全量绘制 isShowRightY: true, isShowTooltip: true, isShowCrossCursor: true }; chart = new JSChart(option); chart.LoadData(klineData); }); };这里有几个重要参数仔细说一下。
windows表示图表面板上要显示几个子图，第0个是主图，后面的都是副图。主图画K线，副图画成交量、MACD这类指标指标。这个数组的顺序和个数就决定了最终界面的上下布局，别小看这个设置，很多复杂看板需求就是靠堆副图实现的。
isUpdate这个参数很关键。如果true表示增量更新，用于盘中刷新；如果false表示全量重绘，用于首次加载和切换周期。首屏数据几百上千条，全量绘制没问题；盘中每3秒拉一次最新数据，就必须用增量更新，否则重绘频繁会导致掉帧卡顿。
isShowCrossCursor是十字光标，用户长按图表时显示横竖两条参考线，同时提示当前点的OHLC数值。这个交互在股票App里几乎是标配，HQChart是开箱支持的，不用自己写手势。
3.3 分时走势图的接入差异
分时图相对于K线图，数据结构和参数都不同。分时数据点核心字段是date、price、average，分别代表时间、当前价、均价线：
const minuteOption = { type: 'minute', canvas: canvas, width: width, height: height, windows: [ { index: 0, label: '', data: [] } ], isShowRightY: true, isShowTooltip: true }; chart.LoadData(minuteData);分时图的主图默认会绘制两条线：价格线和均价线。均价线的计算是当日累计成交额除以成交量，很多行情源会直接把average字段给出来，如果没有自己算也可以，HQChart只认字段不关心你怎么算出来的。
4. 沪深/港股数据格式：别让行情源卡住你
4.1 多市场适配的本质是数据源适配
HQChart本身不管你是沪深还是港股，因为图形引擎只认数据结构。真正的适配工作发生在数据源接入层。我在这块踩过最大的坑是：A股行情接口返回的字段是open、high、low、close这种英文，而港股的某些接口返回的是OPEN、HIGH、LOW、CLOSE大写，或者干脆是中文开盘、最高、最低这种自定义命名。如果直接把原始字段丢给HQChart，它会因为找不到open等字段而画不出K线。
解决方案是写一个轻量的数据适配层，把不同行情源的返回统一映射成HQChart的标准格式。这个适配层不需要多复杂，一个normalizeKLineRow函数就够了：
function normalizeKLineRow(raw) { return { date: raw.date || raw.DATE || raw['时间'], open: raw.open || raw.OPEN || raw['开盘'], high: raw.high || raw.HIGH || raw['最高'], low: raw.low || raw.LOW || raw['最低'], close: raw.close || raw.CLOSE || raw['收盘'], vol: raw.vol || raw.VOL || raw['成交量'] }; }这种防御性写法虽然看起来有点啰嗦，但在对接多个数据源时非常省心，谁也不知道下一个行情接口会返回什么字段命名。
4.2 港股的特殊处理：精度和复权
港股和A股有几个明显差异需要在数据适配层处理。价格精度：港股很多股票的价格是三位小数，A股是两位小数。这个不需要专门处理，HQChart绘制时直接用原始数值，显示的时候按需格式化即可，但如果你在业务层做了价格舍入，反而会丢失精度。
复权问题是大坑。A股行情源一般会提供前复权、后复权或不复权数据；港股同样有复权概念。HQChart不会自动帮你计算复权因子，它画的就是你给的数据。如果你直接拿不复权数据画长周期K线，遇到除权除息日会出现跳空，这在技术分析里会造成均线失真。
我的做法是：在数据层统一使用前复权数据，这样长周期图上均线更平滑，更贴近技术分析的习惯。盘中临时拉最新价看实时盘口，才用不复权价格。
4.3 成交量数值：手还是股要提前统一
成交量字段vol的单位在不同数据源里可能不一样，有的是手，有的是股。A股一般习惯用“手”，港股一些接口给的是“股”。如果不做换算直接画，柱状图的量级会差很多。建议在适配层全部统一成“股”，显示时再根据标的类型决定展示单位。
4.4 指数和个股的差异
指数没有open、high、low、close以外的复杂字段，但成交量极值很大，需要特殊处理量级。HQChart的副图VOL默认是线性比例，如果你画的标的是上证指数这种全市场合成指数，成交量柱可能长得太高，把其他子图挤得看不清楚。遇到这种情况可以调整副图的高度比例，或者状语从句：在适配层对成交量做对数/缩放处理。不过绝大多数场景下，线性就够用了，真做全市场大屏另说。
5. 通达信语法在HQChart里能做什么
5.1 “通达信语法”不是让你写公式编辑器
很多人在标题里看到“通达信语法”，第一反应是可以在小程序里写一个通达信公式编辑器，让用户输入指标公式动态生成曲线。实际上HQChart对通达信语法的支持是另一个层次：它内置了一套公式解析引擎，能识别并执行用通达信语言编写的指标表达式，从而动态计算指标数值。
举例说，你在配置里写一条自定义指标规则，它能解析MA(CLOSE,5)这种形式，并把它转换成均线数值。这让分析师或量化用户可以直接把PC端通达信里的指标公式文本粘贴过来用，而不需要在代码里重新实现一遍。
5.2 自定义指标的接入方式
HQChart里自定义指标的基本思路是扩展或覆盖指标逻辑。官方源码里自带了一批常用指标实现，如MA、MACD、KDJ、BOLL、RSI等，这些可以直接通过windows配置引用。如果你要加一个自定义指标，需要注册指标计算函数。简单示例：
// 假设要新增一个 DMA 指标（平行线差） JSIndicator.AddExternalCalculate({ Name: 'DMA' }, (data, args) => { const close = data.close || []; const vol = data.vol || []; const n1 = args[0] || 10; const n2 = args[1] || 50; const dma = []; const ama = []; let sum1 = 0; let sum2 = 0; for (let i = 0; i < close.length; i++) { sum1 += close[i]; if (i >= n1) sum1 -= close[i - n1]; let dmaVal = (i + 1 < n1) ? close[i] : sum1 / n1; if (i + 1 >= n1) dma[i] = sum1 / n1; // AMA 为 DMA 的移动平均 ... } return [dma, ama]; });实际开发中，并不是每个指标都要自己写。HQChart已实现的指标基本覆盖了90%的需求，真正需要自定义的往往是比较小众的机构内部因子。这时候通达信语法解析就能派上用场——直接把公式文本解析成指标逻辑，比手写一遍循环要省事得多，也更不容易出错。
5.3 指标面板的组织技巧
图表上的主图和副图是这个交互逻辑里比较重要的部分。主图一般放MA均线或者BOLL布林带，副图放VOL、MACD、KDJ等。你可以在运行时动态修改windows数组并刷新图表，以实现“点击指标按钮切换显示”的效果——这是PC行情软件里很常见的交互，搬到小程序里做也不难。
需要注意的细节是，指标计算是O(n)的量级，几百根K线计算一次耗时不过几毫秒，但如果数据量到了日线几千根还要在每帧滚动时重新计算，就需要做结果缓存。HQChart内部对已算指标有缓存机制，但如果你频繁切换指标参数，最好自己维护一个参数到结果的缓存映射，避免拖动时卡顿。
6. 从白屏到刷不出数据：我踩过的几个实坑
6.1 白屏最大嫌疑：canvas尺寸没就绪
前面提到过onLoad里初始化会白屏，但还有一种白屏是canvas节点尺寸为0导致的。小程序里canvas组件的尺寸由CSS决定，如果你用了flex: 1这种自适应布局，在首次布局完成前拿到的高度可能是0。用wx.createSelectorQuery()拿尺寸时一定要检查res[0].width和res[0].height大于0再初始化，否则直接return等下一轮。
6.2 分时图只显示一条线：average字段缺失
分时图正常应该显示两条线，一条价格线一条均价线。我遇到过只显示一条线的情况，排查半天发现是数据里没有average字段。HQChart对缺失字段的处理很保守，不会报错，只是不画那条线。所以如果你发现分时图“少了一根线”，先检查数据字段有没有给全。
6.3 setData与Canvas性能：别把高频数据塞进视图层
小程序里数据更新走setData，但setData是把数据从逻辑层传到视图层，有序列化开销和通信开销。如果你每分钟刷新一次K线数据，每次setData塞几千根K线的数组，页面会肉眼可见地卡顿。
我的优化策略是：行情数据更新时只传增量，图形刷新通过HQChart的增量绘制接口完成。也就是说，setData只更新最新的那一个数据点，剩下的绘制工作交给图表引擎的UpdateData方法。这个区别在低端安卓机上尤其明显，能直接决定你的页面是流畅滚动还是PPT式掉帧。
6.4 真机调试看不见图，开发者工具正常
这种问题多半是Canvas类型不匹配。老项目用旧版canvas，HQChart新版本默认走type="2d"接口，两边对不上就会出现工具正常、真机白屏的现象。解决方案：统一升级到type="2d"，并且基础库版本放到2.9.0以上。如果你的项目因为历史原因锁了基础库版本，那就只能选对应老版本HQChart，但后续维护会比较痛苦。
6.5 手势冲突：页面滚动和十字光标打架
K线图通常要求在小程序页面上既能上下滚动页面，又能在图表区域左右滑动查看历史K线。HQChart默认在canvas上绑定触摸事件，如果你在页面外层还绑定了滚动，会冲突。处理思路是：判断触摸起点是否落在图表区域落在内，落在图内就阻止页面滚动，落在图外就放行。通过catchtouchmove配合自定义逻辑可以实现，不算复杂但要专门处理，否则用户操作体验很分裂。
6.6 切换周期时图表闪烁
日线切周线、周线切月线，如果每次切换都重新LoadData全量重绘，视觉上有一个明显的白屏闪烁。解决方法是先拉新周期数据，等数据到位后再一次性刷新图表，中间用loading状态遮盖。不要让图表清空再等数据，那个过程当前端用户看就是闪了一下。HQChart的LoadData在数据量不大时是同步完成的，这个闪烁更多是网络延迟造成的空窗期。
7. 一个更贴近实战的封装思路
如果你只是需要在单个页面上画一张图，直接用官方Demo代码就够了。但真实项目里，一屏很可能要展示分时图、日K、副图指标、五档盘口多个模块，甚至还要支持切换不同的股票标的。这时候建议把图表管理封装成一个单例或者服务类。
我封装的做法是建一个ChartManager，维护当前页面所有图表实例的映射，对外暴露init、update、switchStock、destroy等方法。切换股票时调用switchStock，内部统一处理：销毁旧实例、创建新实例、拉数据、渲染。这样页面的业务代码只需要关注交互逻辑，不需要关心图表引擎的细节。
封装的好处不只是代码整洁。当出现“切换标的之后图表尺寸不对”这种问题，你只需要在ChartManager里统一处理尺寸重计算，不用每个页面各查一遍。
8. 顺手聊几句性能调优
对于行情页这种高频率刷新、数据量大的场景，还建议大家注意几个性能策略。
数据懒加载：进入行情页时先拉最近30根日K，用户往回拖动到边界时再加载更早的数据。HQChart支持在滚动到最左侧时触发回调，你可以在回调里拉历史数据然后拼接到原数组前部。这样首屏加载快，内存占用也小。
canvas离屏绘制：如果是比较复杂的多指标叠加合成场景，可以提前把静态部分（比如背景网格）绘制到离屏canvas上，滚动时只重绘动态部分。这个技巧在小程序里实现起来略繁琐，但收益明显，适合对性能要求极高的场景。
指标预计算：数据从接口下来后，在写入图表前先批量计算好常用指标数值并缓存，避免图表每次重绘都重新算一遍。特别是MACD这类有递推关系的指标，重复计算虽然不至于报错，但效率和体验都会受影响。
页面级防抖：如果用户快速滑动切换不同的股票，每次都会触发数据请求，低端机上会卡顿。加一个简单的防抖策略，只在用户停止操作500毫秒后才发起请求，体验会顺畅很多。
9. 最后分享几个定位问题的技巧
如果你接入HQChart后遇到奇奇怪怪的问题，有几个通用的定位思路。
排除法：先用官方Demo自带的示例数据跑一遍，如果官方数据正常、你的数据不正常，问题基本在数据格式层面；如果官方数据也画不出来，那是环境或集成问题。
看console：HQChart在开发模式下会输出比较详细的日志，包括数据解析阶段、指标计算阶段、canvas绘制阶段。日志里一般能看到是哪一步异常了。我在排查成交量少了十倍这种问题时，就是靠日志确认了数据单位的问题。
看issues：HQChart的issues仓库里沉淀了很多小程序端的常见问题。很多你遇到的问题别人早就踩过，直接搜关键词往往比看文档更快。比如“小程序 白屏”、“Canvas type=2d”、“真机不显示”都有现成答案。
至于最终的方案选型，如果项目只是要展示几张简单图表，其实用不着上HQChart这种重武器，ECharts或者uCharts就够了。但如果你像我一样要做完整的行情看板，要支持沪深港股切换、要跑通达信公式指标、要兼顾周期切换和增量刷新，那HQChart确实是目前小程序生态里最值得投入时间研究的方案。用顺手之后，它给你的自由度远超预期。
本文还有配套的精品资源，点击获取
