@363045841yyt/klinechart 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -92
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,28 +4,33 @@
|
|
|
4
4
|
|
|
5
5
|
这是一个基于 Vue 3 和 Canvas 的金融图表绘制库,专注于提供高性能的 K 线图展示功能。该库支持横向滚动、移动平均线(MA)显示以及从多种数据源(包括 **BaoStock**、AKTools)获取金融数据。
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
<img src="https://s2.loli.net/2026/02/01/7j9uHWIvrAGxFBC.png" alt="示例图片" style="border-radius: 8px;">
|
|
8
|
+
|
|
8
9
|
|
|
9
10
|
## 功能特性
|
|
10
11
|
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
- ↔️ **横向滚动**:支持大量历史数据的横向滚动浏览
|
|
15
|
-
- 🎨 **深色模式**:自动适配系统深色模式
|
|
16
|
-
- 📱 **响应式设计**:适配不同屏幕尺寸,支持所有设备像素比(DPR)
|
|
17
|
-
- ⚡ **高性能**:使用 requestAnimationFrame 优化渲染性能
|
|
12
|
+
- **基于 Canvas**:使用 Canvas 实现高性能的 K 线图绘制
|
|
13
|
+
- **响应式设计**:适配不同屏幕尺寸,支持所有设备像素比(DPR),不同 DPR 下绘制清晰
|
|
14
|
+
- **框架无关**:核心逻辑完全独立,不依赖特定框架
|
|
18
15
|
|
|
19
16
|
## 技术栈
|
|
20
17
|
|
|
21
18
|
- [Vue 3](https://vuejs.org/) - 渐进式 JavaScript 框架
|
|
22
|
-
- [Vite](https://vite.dev/) -
|
|
23
|
-
- [TypeScript](https://www.typescriptlang.org/)
|
|
24
|
-
- [Canvas API](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)
|
|
25
|
-
- [BaoStock](http://baostock.com/) - 开源金融数据接口(推荐)
|
|
26
|
-
- [AKTools](https://github.com/akfamily/aktools) - 开源金融数据接口库(存在反爬限制)
|
|
19
|
+
- [Rolldown Vite](https://cn.vite.dev/guide/rolldown) - 下一代前端构建工具,极速构建
|
|
20
|
+
- [TypeScript](https://www.typescriptlang.org/)
|
|
21
|
+
- [Canvas API](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)
|
|
27
22
|
- [Vitest](https://vitest.dev/) - 单元测试框架
|
|
28
23
|
|
|
24
|
+
## 数据源
|
|
25
|
+
- [BaoStock](http://baostock.com/) - 开源金融数据接口,每日支持十万次 API 调用
|
|
26
|
+
- [AKTools](https://github.com/akfamily/aktools) - 开源金融数据接口库(可能存在反爬限制)
|
|
27
|
+
|
|
28
|
+
## 使用 NPM 安装组件库
|
|
29
|
+
```bash
|
|
30
|
+
npm i @363045841yyt/klinechart
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
|
|
29
34
|
## 项目结构
|
|
30
35
|
|
|
31
36
|
```
|
|
@@ -36,15 +41,15 @@ src/
|
|
|
36
41
|
│ └── baostock.ts # BaoStock K 线数据接口(推荐)
|
|
37
42
|
├── components/ # 组件
|
|
38
43
|
│ └── KLineChart.vue # K 线图主组件
|
|
39
|
-
├── core/
|
|
44
|
+
├── core/ # 核心渲染引擎
|
|
40
45
|
│ ├── chart.ts # 图表控制器
|
|
41
|
-
│ ├── draw/
|
|
46
|
+
│ ├── draw/ # 像素对齐工具
|
|
42
47
|
│ │ └── pixelAlign.ts
|
|
43
|
-
│ ├── renderers/
|
|
44
|
-
│ │ ├── candle.ts
|
|
48
|
+
│ ├── renderers/ # 渲染器
|
|
49
|
+
│ │ ├── candle.ts # K 线渲染器
|
|
45
50
|
│ │ └── ...
|
|
46
|
-
│ ├── scale/
|
|
47
|
-
│ └── viewport/
|
|
51
|
+
│ ├── scale/ # 缩放控制
|
|
52
|
+
│ └── viewport/ # 视口管理
|
|
48
53
|
├── types/ # 类型定义
|
|
49
54
|
│ ├── kLine.ts # K 线类型定义
|
|
50
55
|
│ └── price.ts # 价格类型定义
|
|
@@ -56,18 +61,9 @@ src/
|
|
|
56
61
|
└── assets/ # 静态资源
|
|
57
62
|
```
|
|
58
63
|
|
|
59
|
-
## 数据源
|
|
60
|
-
|
|
61
|
-
本项目支持多种数据源,通过统一接口实现无缝切换。
|
|
62
|
-
|
|
63
|
-
| 数据源 | 稳定性 | 反爬限制 | 推荐场景 |
|
|
64
|
-
|--------|--------|----------|----------|
|
|
65
|
-
| [BaoStock](http://baostock.com/) | ⭐⭐⭐ 高 | 无 | 生产环境(推荐) |
|
|
66
|
-
| [AKShare](https://github.com/akfamily/akshare) | ⭐⭐ 中 | 有 | 开发测试 |
|
|
67
|
-
|
|
68
64
|
### BaoStock(推荐)
|
|
69
65
|
|
|
70
|
-
BaoStock 是免费开源的 Python 证券数据接口,提供稳定可靠的金融数据服务。
|
|
66
|
+
BaoStock 是免费开源的 Python 证券数据接口,提供稳定可靠的金融数据服务。
|
|
71
67
|
|
|
72
68
|
- 官方文档:[http://www.baostock.com/mainContent?file=stockKData.md](http://www.baostock.com/mainContent?file=stockKData.md)
|
|
73
69
|
|
|
@@ -76,9 +72,14 @@ BaoStock 是免费开源的 Python 证券数据接口,提供稳定可靠的金
|
|
|
76
72
|
```bash
|
|
77
73
|
# 安装
|
|
78
74
|
uv pip install baostock
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
由于 BaoStock 未提供 AkTools 的后端接口,需要自行搭建 FastAPI 服务:
|
|
78
|
+
```bash
|
|
79
|
+
git clone https://github.com/363045841/stockbao.git
|
|
79
80
|
|
|
80
|
-
#
|
|
81
|
-
python
|
|
81
|
+
# 启动服务
|
|
82
|
+
python server.py
|
|
82
83
|
```
|
|
83
84
|
|
|
84
85
|
### AKShare
|
|
@@ -87,7 +88,7 @@ AKShare 基于 Python 的开源财经数据接口库,数据来源于东方财
|
|
|
87
88
|
|
|
88
89
|
- GitHub:[https://github.com/akfamily/akshare](https://github.com/akfamily/akshare)
|
|
89
90
|
|
|
90
|
-
> **⚠️ 注意:**
|
|
91
|
+
> **⚠️ 注意:** 该库采取直连API,容易触发反爬机制,频繁请求可能导致 IP 被封禁
|
|
91
92
|
|
|
92
93
|
#### 快速开始
|
|
93
94
|
|
|
@@ -102,7 +103,7 @@ uv run python -m aktools
|
|
|
102
103
|
pnpm aktools
|
|
103
104
|
```
|
|
104
105
|
|
|
105
|
-
###
|
|
106
|
+
### 后端数据源配置
|
|
106
107
|
|
|
107
108
|
#### Vite 代理配置
|
|
108
109
|
|
|
@@ -130,9 +131,10 @@ import { fetchKLineData, type KLineDataSourceConfig } from '@/api/data'
|
|
|
130
131
|
|
|
131
132
|
const DATA_SOURCE: 'baostock' | 'dongcai' = 'baostock'
|
|
132
133
|
|
|
134
|
+
// AKshare要求日期为YYYYMMDD格式, BaoStock要求日期为YYYY-MM-DD格式
|
|
133
135
|
const config: KLineDataSourceConfig = {
|
|
134
|
-
symbol: '601360',
|
|
135
|
-
startDate: '2024-01-01',
|
|
136
|
+
symbol: '601360',
|
|
137
|
+
startDate: '2024-01-01',
|
|
136
138
|
endDate: '2024-12-31',
|
|
137
139
|
period: 'daily',
|
|
138
140
|
adjust: 'qfq',
|
|
@@ -142,13 +144,6 @@ const data = await fetchKLineData(DATA_SOURCE, config)
|
|
|
142
144
|
</script>
|
|
143
145
|
```
|
|
144
146
|
|
|
145
|
-
#### 股票代码格式
|
|
146
|
-
|
|
147
|
-
| 市场 | 格式 | 示例 |
|
|
148
|
-
|------|------|------|
|
|
149
|
-
| 沪市A股 | `sh.` | `sh.600000` |
|
|
150
|
-
| 深市A股 | `sz.` | `sz.000001` |
|
|
151
|
-
|
|
152
147
|
## 使用方法
|
|
153
148
|
|
|
154
149
|
### 1. 安装依赖
|
|
@@ -253,7 +248,7 @@ onMounted(async () => {
|
|
|
253
248
|
- Node.js: ^20.19.0 || >=22.12.0
|
|
254
249
|
- pnpm: 包管理器
|
|
255
250
|
- Python: 用于运行 AKTools 服务(可选)
|
|
256
|
-
- uv: Python
|
|
251
|
+
- uv: Python 包管理器
|
|
257
252
|
|
|
258
253
|
## 构建与部署
|
|
259
254
|
|
|
@@ -269,55 +264,6 @@ pnpm build
|
|
|
269
264
|
pnpm preview
|
|
270
265
|
```
|
|
271
266
|
|
|
272
|
-
## API 接口说明
|
|
273
|
-
|
|
274
|
-
### getKlineDataBaoStock
|
|
275
|
-
|
|
276
|
-
从 BaoStock 获取 K 线数据(推荐)。
|
|
277
|
-
|
|
278
|
-
**参数:**
|
|
279
|
-
|
|
280
|
-
```ts
|
|
281
|
-
interface BaoStockKLineRequest {
|
|
282
|
-
symbol: string // 股票代码,格式:sh.600000 或 sz.000001
|
|
283
|
-
start_date: string // 开始日期,格式:YYYY-MM-DD
|
|
284
|
-
end_date: string // 结束日期,格式:YYYY-MM-DD
|
|
285
|
-
period?: 'daily' | 'weekly' | 'monthly' | '5' | '15' | '30' | '60'
|
|
286
|
-
adjust?: 'qfq' | 'hfq' | 'none' // qfq: 前复权, hfq: 后复权, none: 不复权
|
|
287
|
-
timeout?: number // 超时时间(秒)
|
|
288
|
-
}
|
|
289
|
-
```
|
|
290
|
-
|
|
291
|
-
**返回值:**
|
|
292
|
-
`Promise<KLineData[]>` - 已转换为标准格式的 K 线数据数组
|
|
293
|
-
|
|
294
|
-
**特性:**
|
|
295
|
-
- ✅ 支持 1 小时本地缓存
|
|
296
|
-
- ✅ 无反爬限制
|
|
297
|
-
- ✅ 数据自动按时间排序
|
|
298
|
-
|
|
299
|
-
### getKlineDataDongCai
|
|
300
|
-
|
|
301
|
-
从 AKTools/东方财富获取 K 线数据。
|
|
302
|
-
|
|
303
|
-
> **⚠️ 注意:** 此接口依赖 AKShare,存在反爬机制,频繁请求可能导致 IP 被封禁。
|
|
304
|
-
|
|
305
|
-
**参数:**
|
|
306
|
-
|
|
307
|
-
```ts
|
|
308
|
-
interface KLineDailyDongCaiRequest {
|
|
309
|
-
symbol: string // 股票代码
|
|
310
|
-
period: 'daily' | 'weekly' | 'monthly' // 周期
|
|
311
|
-
start_date: string // 开始日期,格式:YYYYMMDD
|
|
312
|
-
end_date: string // 结束日期,格式:YYYYMMDD
|
|
313
|
-
adjust?: 'qfq' | 'hfq' // 复权方式,qfq: 前复权, hfq: 后复权
|
|
314
|
-
timeout?: number // 超时时间(秒)
|
|
315
|
-
}
|
|
316
|
-
```
|
|
317
|
-
|
|
318
|
-
**返回值:**
|
|
319
|
-
`Promise<KLineDailyDongCaiResponse[]>` - K 线数据数组(需调用 `toKLineData()` 转换)
|
|
320
|
-
|
|
321
267
|
## 贡献
|
|
322
268
|
|
|
323
269
|
欢迎提交 Issue 和 Pull Request 来改进这个项目。
|