简介这份资源面向微信小程序开发者与股票行情应用爱好者提供沪深及港股K线图、走势图的完整实现方案并支持通达信语法解析适合具备一定前端基础、希望在小程序内搭建专业行情图表的开发者参考。压缩包共72个文件约1.14MB以JavaScript源码为主辅以WXML、WXSS、JSON等小程序页面与配置文件另含HTML、CSS演示页、PNG图标素材及字体文件结构覆盖行情模块用例、分时图、历史K线图与公式解析等核心部分。目前已有1078人学习下载热度较高。读者可从中获取小程序行情图表的目录组织方式、数据获取与处理思路、图表渲染与手势交互实现以及通达信指标公式的解析逻辑便于快速搭建或二次开发自己的股票分析小程序。1. 小程序里画沪深港股K线为什么HQChart是绕不开的选项做过行情类小程序的人多半有过这种经历产品经理丢过来一句“沪深和港股都要K线、分时、指标全上最好还能写通达信公式”你打开开发者工具发现Canvas画蜡烛图本身不难难的是后面那一长串——前复权除权缺口、港股半日市、指标公式解析、十字光标联动、双指缩放惯性。自己从零撸一套两周后大概率卡在“公式解析”和“性能”两个黑匣子里。HQChart这类方案之所以被反复提起就是因为它把行情图这块最难啃的部分做成了可配置的组件沪深、港股、美股、期货都能接还内置了一套接近通达信语法的公式引擎。这篇笔记就围绕“微信小程序 沪深/港股K线 通达信语法”这条线把选型理由、接入步骤、参数配置和踩过的坑讲清楚适合已经会写小程序、正准备接行情图的开发者也适合想评估这套方案值不值得投入的技术负责人。2. 拆开HQChart它到底替你做了哪些脏活2.1 行情图的三层结构与小程序的适配难点一套完整的行情图拆开看是三层数据层负责K线、分时、盘口、指标数据的获取与缓存渲染层负责把数据画成蜡烛、均线、成交量柱交互层负责缩放、拖动、十字光标、长按查看。自己写的话渲染层用小程序Canvas 2D勉强能扛但交互层在移动端要做惯性滚动和双指缩放帧率很容易掉到30以下。HQChart把这套东西封装成组件内部用离屏Canvas做预渲染把静态部分和动态部分分开滚动时只重绘变化区域。它同时支持Web和小程序两套渲染后端小程序端走的是Canvas 2D接口避开了旧版Canvas的诸多限制。这意味着你不需要自己去处理设备像素比、滚动惯性、边界回弹这些琐碎但极耗时间的细节。2.2 通达信语法引擎公式不是字符串替换那么简单很多人以为“支持通达信语法”就是把公式里的MA、EMA替换成JS函数实际远不止。通达信公式有一套自己的执行模型变量按周期逐根计算REF、HHV、LLV这类函数依赖历史序列跨周期引用还要处理数据对齐。HQChart的公式引擎把这些函数做成了内置算子你传入公式字符串它解析成语法树后按K线序列逐根求值。常见指标如MACD、KDJ、BOLL都有内置实现自定义公式则通过配置项挂载。这里有个关键点公式里的参数如MA的周期需要你在配置里声明引擎不会自动推断。港股和沪深在交易日历上不同公式计算时如果数据序列有缺口结果会偏所以数据源必须保证连续性。2.3 沪深与港股的数据结构差异沪深和港股在K线数据上最明显的差异是交易时段和复权方式。沪深有集合竞价、连续竞价、午休港股还有半日市和台风休市。HQChart本身不提供数据它只负责画数据要你自己从行情源拉。常见做法是后端统一转成它要求的格式每根K线包含时间、开、高、低、收、成交量、成交额时间戳用毫秒。港股数据要注意时区建议统一转成UTC8再传入否则十字光标显示的时间会错位。复权方面前复权数据需要你在后端算好HQChart不做复权计算它只按你给的价格画。如果你传的是不复权数据除权日会出现巨大缺口用户一眼就能看出来。3. 在小程序里跑通第一张K线图从引入到渲染3.1 工程结构与组件引入HQChart在小程序里的接入方式通常有两种一种是把源码包里的dist目录拷贝到小程序工程用require引入另一种是把它封装成自定义组件在页面json里注册。我一般用后者因为组件化后页面逻辑更干净。假设你已经拿到了源码包解压后找到小程序专用的构建产物目录结构大致是hqchart.js、hqchart.wxss和一个示例页面。把js和wxss放到工程的utils或components目录下然后在页面json里声明组件。注意小程序对包体积有限制主包超过2M会报错所以建议把行情图放在分包里或者用分包异步化加载。// page.json { usingComponents: { hq-chart: /components/hqchart/hqchart } }这段配置的作用是把HQChart注册为当前页面可用的自定义组件。路径要和你实际存放的位置一致大小写敏感。如果组件内部还依赖其他文件比如公式引擎的worker脚本要确保这些文件也被拷贝进来否则运行时会报模块找不到。3.2 初始化配置沪深与港股的关键参数初始化是接入过程中最容易翻车的一步因为参数多且默认值不一定适合你的场景。下面是一份我常用的配置骨架覆盖了沪深和港股的基本需求。// page.js const config { // 类型0表示K线1表示分时 type: 0, // 市场沪深用0港股用1具体以源码包内枚举为准 market: 0, // 复权0不复权1前复权2后复权 right: 1, // 周期0日线1周线2月线3分钟线等 period: 0, // 指标窗口可多个 windows: [ { index: MA, name: 均线 }, { index: MACD, name: MACD } ], // 是否显示成交量 showVolume: true, // 十字光标 crossCursor: { show: true }, // 缩放 zoom: { enable: true, max: 10, min: 1 } };这里每个参数都影响最终呈现。market决定内部交易日历和涨跌停颜色规则港股默认是绿涨红跌和沪深相反如果你不设置用户会以为颜色错了。right控制复权前复权适合看历史走势后复权适合算收益。period决定数据粒度分钟线需要你的数据源支持。windows里的index是公式引擎的内置指标名写错会静默失败图上是空的。crossCursor和zoom是交互开关移动端建议都开。3.3 喂数据K线数组的格式与更新时机HQChart不主动拉数据它通过回调或方法调用让你把数据塞进去。常见做法是在页面onLoad时先请求一批历史K线渲染出图然后通过WebSocket或轮询更新最后一根。数据格式要求是数组每项包含时间、开高低收、量额。下面是一个构造示例。// 构造K线数据 function buildKLineData(rawList) { return rawList.map(item ({ time: item.timestamp, // 毫秒时间戳 open: item.open, high: item.high, low: item.low, close: item.close, volume: item.volume, amount: item.amount || 0 })); } // 页面中调用 const chart this.selectComponent(#hqChart); chart.setData(buildKLineData(historyList));时间戳必须是毫秒秒级时间戳会导致时间轴错乱。volume和amount单位要统一港股有的数据源给的是股数有的是手数传错会导致成交量柱高度异常。更新最后一根K线时不要重新setData整个数组HQChart提供了updateLastData之类的方法只更新最后一根性能差别很大。如果数据源返回的K线时间不是连续的比如停牌日缺失HQChart会按索引画不会自动补缺口所以后端最好补齐或前端做映射。4. 通达信公式接入从写公式到挂到指标窗口4.1 公式引擎的调用方式与参数声明HQChart的公式引擎通常通过一个全局对象暴露比如HQChart.Formula或类似命名。你传入公式字符串和参数对象它返回计算后的序列。下面是一个自定义均线的例子。// 自定义公式两条均线 const formula MA1:MA(CLOSE, N1); MA2:MA(CLOSE, N2);; const params { N1: 5, N2: 20 }; const result HQChart.Formula.Calculate(formula, kLineData, params); // result.MA1 和 result.MA2 是计算后的数组公式里的N1、N2必须在params里声明否则引擎会当成未定义变量计算结果全是NaN。公式末尾的分号不能少多行公式用分号分隔。返回的结果是按K线顺序的数组长度和输入数据一致。如果公式里用了REF、HHV这类依赖历史的函数前几根K线可能返回空值这是正常的画图时跳过即可。4.2 把公式挂到指标窗口算出来的指标要显示在图上需要配置到windows里。HQChart支持两种方式一种是直接用内置指标名比如MACD、KDJ另一种是传入自定义公式。自定义时windows的配置项要带上公式字符串和参数。const customWindow { index: CUSTOM, name: 我的均线, formula: MA1:MA(CLOSE, N1); MA2:MA(CLOSE, N2);, params: { N1: 5, N2: 20 }, // 画线样式 lineStyle: [ { color: #FF0000, width: 1 }, { color: #0000FF, width: 1 } ] };index写CUSTOM表示自定义name是显示在窗口标题上的文字。formula和params要和前面计算时一致否则图上显示的和实际算的对不上。lineStyle数组的顺序对应公式里输出的顺序MA1用第一个样式MA2用第二个。如果公式输出的是柱状图比如MACD的柱需要额外配置drawType为柱状。4.3 港股公式计算的注意事项港股和沪深在公式计算上最大的差异是数据序列的连续性。港股有半日市下午只有两小时交易如果你按固定根数取数据半日市那天的K线根数会少导致均线值偏移。解决办法是在后端把半日市的数据补齐到正常交易时段或者在前端计算时按交易日历对齐。另外港股的收盘价有时会有竞价后的调整如果你用的数据源在收盘后更新了最后一根K线公式结果会变所以建议在收盘后固定一个时间点再算指标避免盘中频繁重算。5. 避坑与排查那些让我加班到凌晨的细节5.1 图表白屏或只显示一半现象是页面加载后图表区域空白或者只画了左边一半。原因通常是Canvas尺寸没拿到或者初始化时机太早。小程序的Canvas 2D需要等节点查询完成后再操作如果在onLoad里直接初始化节点还没挂载宽高是0。解决方法是把初始化放到onReady里或者用SelectorQuery拿到节点后再调chart.init。另一个原因是容器样式没给高度HQChart按容器高度算画布高度为0自然画不出来。5.2 十字光标时间显示错位移动端长按出现十字光标但显示的时间比实际K线时间差了几个小时。这是时区问题。沪深数据一般给的是本地时间港股数据可能给的是UTC或带时区的时间戳。HQChart内部按时间戳画但显示时用的是本地时区。解决办法是统一在传入前把时间转成UTC8的毫秒时间戳或者配置时区偏移参数。如果数据源给的是字符串时间先转成Date再取getTime不要直接parse不同设备对字符串解析结果不一致。5.3 公式计算结果全是NaN自定义公式挂上去后指标窗口一片空白控制台没有报错。原因通常是参数没声明或者公式里用了引擎不支持的函数。先检查params里是否包含了公式里所有变量再检查函数名大小写通达信函数一般是大写但引擎可能只实现了部分。如果用了未来函数比如ZIG引擎可能直接返回空。排查方法是先用一个最简单的公式MA(CLOSE,5)测试能出结果再逐步加复杂度。5.4 港股颜色反了港股默认绿涨红跌和沪深相反。如果你没设置market参数HQChart按沪深规则画用户看到涨是红色会以为数据错了。解决方法是初始化时把market设为港股对应的枚举值或者在配置里单独指定涨跌颜色。有些版本还支持自定义颜色数组但要注意数组顺序是涨在前还是跌在前不同版本可能不一样最好查一下源码包里的示例。5.5 包体积超限导致上传失败小程序主包限制2MHQChart的完整包加上公式引擎可能接近这个数。如果你还引入了其他库很容易超。解决办法是把行情图相关代码放到分包用分包预下载或异步加载。另外可以裁剪掉不需要的市场和指标源码包里通常有构建脚本可以只打包沪深和港股去掉美股期货。如果还是超检查有没有重复引入的polyfill小程序环境不需要那么多兼容代码。6. 进阶让K线图更接近专业终端6.1 多指标叠加与窗口联动专业终端里主图叠加均线和BOLL副图放MACD和KDJ窗口之间十字光标联动。HQChart支持多窗口配置windows数组即可。联动需要开启crossCursor的link属性这样在一个窗口移动光标其他窗口会同步显示同一时间点的值。实现上你需要在配置里把link设为true并确保所有窗口的数据长度一致。如果某个窗口数据短了联动会错位。6.2 用公式做条件选股与标记通达信公式不仅能画线还能做条件判断。比如你想在图上标记金叉点可以写一个返回0和1的公式然后在HQChart里配置成标记点。常见做法是公式输出一个序列值为1时画图标。HQChart支持自定义绘制回调你可以在回调里根据公式结果画三角形或圆点。这个功能适合做回测可视化但要注意性能标记点太多会拖慢渲染。6.3 性能调优数据量与帧率K线根数超过2000根后滚动会开始掉帧。优化手段有几个一是限制返回的K线数量一般看盘500到1000根足够需要更多时用分页加载二是关闭不必要的动画比如缩放时的缓动三是用HQChart提供的setOption动态调整渲染精度比如滚动时降低采样停止后再恢复。我一般会在配置里把maxDataCount设为1000超过就截断用户往回拖时再请求更早的数据。6.4 一个我常备的排查习惯每次接入新数据源我会先写一个最小页面只画20根K线不带任何指标确认渲染和交互正常后再逐步加公式和窗口。这样出问题时能快速定位是数据格式、配置还是引擎本身。另外HQChart的源码包里通常有示例页面遇到不确定的参数直接翻示例比查文档快。最后提醒一句行情数据有延迟展示时最好在角落标一下数据时间避免用户误判。希望帮到你。本文还有配套的精品资源点击获取