基于 Vue 3 + 原生 Canvas 2D 自研的 K 线图表引擎与组件库。支持蜡烛图 / 美国线 / 折线 / 面积四种图表形态、分时与 K 线双视图、16 种技术指标、24 种画线覆盖物(19 种手动绘制 + 5 种缠论图元)、实时追加、亮暗主题切换与 PC / 移动自适应。
图表特性:
1.图表形态:`candle`(蜡烛图)、`ohlc`(美国线)、`line`(折线图)、`area`(面积图)
2.三段式布局:主图 + 固定成交量副图 + 至多一个指标副图,面板间距与高度可配置,分隔条可拖拽
3.主图指标:MA(默认 5/10/30/60 四周期)、EMA、BOLL,可多选
4.副图指标:VOL 常驻,MACD / KDJ / RSI / BIAS / WR / PSY / CCI / MOM / STOCH / WMSR / KST / FASTK 单选
5.画线工具:21 种手绘覆盖物(趋势线、水平线、垂直线、射线、平行线、斐波那契回撤、矩形、文字标注、价格线、箭头、圆、三角、平行四边形、批注等)加 5 种缠论图元(笔 / 线段 / 中枢 / 分型 / 买卖点)
6.交互:滚轮缩放、拖拽平移、十字光标、触摸手势、全屏
7.信息层:跟随光标的 DOM 浮动提示框(边界自动翻转与夹取)、Canvas 绘制的固定文字栏、主图与副图图例
8.数据接口:`setData` 整段替换(同序列重复下发保留当前视图)、`appendData` 实时追加、`updateLast` 更新末根
9.国际化:内置 zh-CN(默认)与 en-US,数值单位随语言在「万/亿」与 `K/M/B` 之间联动
架构设计
1.集中式配置:ChartConfig为单一配置源,所有区域样式通过 engine.getChartConfig()运行期读写,支持update(patch)浅合并与 toJSON()/fromJSON() 序列化。
2.纯OOP区域类:渲染层拆分为 9 个独立区域类(src/renderer/region/),每个类持有自己的配置切片,不使用策略模式或工厂模式。
3.双 Canvas 分层:静态层(背景→网格→坐标轴→边框→主图→副图)+ 动态层(图例→信息栏→十字光标→覆盖物),HiDPI 自适应。
4.双引擎双视图:分时图与 K 线图各自拥有独立的ChartEngine实例和 canvas 元素,切换仅改变可见性,不污染状态。
5.Y轴宽度迭代收敛:渲染管线最多迭代3次,测量真实刻度文本宽度后修正布局,确保刻度标签不截断。