@363045841yyt/klinechart 0.1.2 → 0.1.4

package/README.md

@@ -1,14 +1,19 @@
 # kmap - 金融图表绘制库
 
-这是一个基于 Vue 3 和 Canvas 的金融图表绘制库，专注于提供高性能的 K 线图展示功能。该库支持横向滚动、移动平均线（MA）显示以及从多种数据源（包括 AKTools）获取金融数据。
+[English](README_EN.md) | 简体中文
+
+这是一个基于 Vue 3 和 Canvas 的金融图表绘制库，专注于提供高性能的 K 线图展示功能。该库支持横向滚动、移动平均线（MA）显示以及从多种数据源（包括 **BaoStock**、AKTools）获取金融数据。
+
+![](https://s2.loli.net/2026/01/25/LObQPXmoN4ZdFey.png)
 
 ## 功能特性
 
 - 📊 **K 线图绘制**：使用 Canvas 实现高性能的 K 线图绘制
+- 🎯 **TradingView 级别稳定**：物理像素控制缩放，影线完美居中，无累积偏移
 - 📈 **移动平均线**：支持 MA5、MA10、MA20 等多种移动平均线显示
 - ↔️ **横向滚动**：支持大量历史数据的横向滚动浏览
 - 🎨 **深色模式**：自动适配系统深色模式
-- 📱 **响应式设计**：适配不同屏幕尺寸
+- 📱 **响应式设计**：适配不同屏幕尺寸，支持所有设备像素比（DPR）
 - ⚡ **高性能**：使用 requestAnimationFrame 优化渲染性能
 
 ## 技术栈
@@ -17,7 +22,9 @@
 - [Vite](https://vite.dev/) - 下一代前端构建工具
 - [TypeScript](https://www.typescriptlang.org/) - JavaScript 类型检查
 - [Canvas API](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API) - 图形绘制
-- [AKTools](https://github.com/akfamily/aktools) - 开源金融数据接口库
+- [BaoStock](http://baostock.com/) - 开源金融数据接口（推荐）
+- [AKTools](https://github.com/akfamily/aktools) - 开源金融数据接口库（存在反爬限制）
+- [Vitest](https://vitest.dev/) - 单元测试框架
 
 ## 项目结构
 
@@ -25,141 +32,123 @@
 src/
 ├── api/                 # API 接口定义
 │   └── data/
-│       └── kLine.ts     # K 线数据接口
+│       ├── kLine.ts     # 东财/AKTools K 线数据接口
+│       └── baostock.ts  # BaoStock K 线数据接口（推荐）
 ├── components/          # 组件
 │   └── KLineChart.vue   # K 线图主组件
+├── core/               # 核心渲染引擎
+│   ├── chart.ts         # 图表控制器
+│   ├── draw/           # 像素对齐工具
+│   │   └── pixelAlign.ts
+│   ├── renderers/      # 渲染器
+│   │   ├── candle.ts   # K 线渲染器
+│   │   └── ...
+│   ├── scale/          # 缩放控制
+│   └── viewport/       # 视口管理
 ├── types/               # 类型定义
 │   ├── kLine.ts         # K 线类型定义
 │   └── price.ts         # 价格类型定义
 ├── utils/               # 工具函数
-│   ├── draw/            # 绘制工具
-│   │   ├── kLine.ts     # K 线绘制
-│   │   └── MA.ts        # 移动平均线绘制
-│   ├── mock/            # 模拟数据生成
-│   ├── logger.ts        # 日志工具
-│   └── priceToY.ts      # 价格转 Y 坐标
+│   ├── kLineDraw/       # K 线绘制工具
+│   ├── kline/           # K 线数据处理
+│   └── mock/            # 模拟数据生成
 ├── stores/              # 状态管理 (Pinia)
 └── assets/              # 静态资源
 ```
 
-## 数据接入
+## 数据源
 
-### AKTools 数据接入
+本项目支持多种数据源，通过统一接口实现无缝切换。
 
-AKTools 是一个开源的金融数据接口库，可以免费获取股票、期货、期权等金融产品的历史数据。
+| 数据源 | 稳定性 | 反爬限制 | 推荐场景 |
+|--------|--------|----------|----------|
+| [BaoStock](http://baostock.com/) | ⭐⭐⭐ 高 | 无 | 生产环境（推荐） |
+| [AKShare](https://github.com/akfamily/akshare) | ⭐⭐ 中 | 有 | 开发测试 |
 
-#### 安装 AKTools
+### BaoStock（推荐）
 
-使用 uv pip 安装:
+BaoStock 是免费开源的 Python 证券数据接口，提供稳定可靠的金融数据服务。
 
-```bash
-# 安装 uv（如果尚未安装）
-pip install uv
+- 官方文档：[http://www.baostock.com/mainContent?file=stockKData.md](http://www.baostock.com/mainContent?file=stockKData.md)
 
-# 使用 uv 安装 AKTools
-uv pip install aktools
-```
-
-或者直接使用 pip 安装:
+#### 快速开始
 
 ```bash
-pip install aktools
-```
-
-#### 启动 AKTools 数据服务
-
-方法一：使用 uv 直接运行 AKTools
+# 安装
+uv pip install baostock
 
-```bash
-uv run python -m aktools
-```
-
-方法一（推荐）：通过本项目脚本启动（会自动切换到上级目录的 `aktoolshttp/`）
-
-```bash
-pnpm aktools
+# 启动服务（需自行实现服务层或参考 BaoStock 文档）
+python your_baostock_server.py
 ```
 
-#### 手机访问本机（开发模式）并调用 AKTools API（推荐）
-
-如果你希望用手机浏览器访问本机正在运行的 `pnpm dev` 页面，同时前端还能调用本机的 AKTools API，推荐使用 **Vite 代理**（避免 CORS，且手机不需要直连 8080）。
+### AKShare
 
-本项目已在 `vite.config.ts` 配置：
+AKShare 基于 Python 的开源财经数据接口库，数据来源于东方财富等公开渠道。
 
-- dev server 监听 `0.0.0.0`
-- 代理转发：`/api` -> `http://127.0.0.1:8080`
+- GitHub：[https://github.com/akfamily/akshare](https://github.com/akfamily/akshare)
 
-启动步骤：
+> **⚠️ 注意：** 存在反爬机制，频繁请求可能导致 IP 被封禁
 
-1. 启动 AKTools（本机 8080）：
+#### 快速开始
 
-   ```bash
-   pnpm aktools
-   ```
-
-2. 启动前端 dev server（允许局域网访问）：
-
-   ```bash
-   pnpm dev:lan
-   ```
-
-3. 查找本机局域网 IP（例如 `192.168.1.23`），手机浏览器访问：
-
-   ```
-   http://192.168.1.23:5173
-   ```
-
-> 说明：前端请求路径保持 `VITE_API_PATH=/api/public/stock_zh_a_hist`，浏览器请求会先到 5173，再由 Vite 代理到本机 8080，因此通常不会遇到跨域问题。
-
-如果你之前在 `.env` 写死了 `VITE_API_BASE_URL=http://127.0.0.1:8080`，手机端会把 `127.0.0.1` 解析成“手机自己”，从而导致 API 连接失败。此时请把 `VITE_API_BASE_URL` 留空（或删除该行），让前端走相对路径并交给 Vite 代理。
+```bash
+# 安装
+uv pip install aktools
 
-方法二：创建自定义后端服务
-除了使用 AKTools 自带的服务外，你也可以根据需要创建自定义的后端服务来处理数据。
+# 启动服务
+uv run python -m aktools
 
-#### 配置前端环境变量
+# 或通过本项目脚本启动
+pnpm aktools
+```
 
-在项目根目录创建 `.env` 文件：
+### 数据接入配置
 
-```
-VITE_API_BASE_URL=http://127.0.0.1:8080
-VITE_API_PATH=/api/public/stock_zh_a_hist
-```
+#### Vite 代理配置
 
-然后在 [vite.config.ts](file:///d:/Code/kmap/kmap/vite.config.ts) 中确保环境变量被正确加载：
+本项目已配置双数据源代理：
 
 ```ts
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-export default defineConfig({
-  plugins: [vue()],
-  define: {
-    'process.env': process.env,
+// vite.config.ts
+proxy: {
+  '/api/stock': {          // BaoStock (端口 8000)
+    target: 'http://127.0.0.1:8000',
+    changeOrigin: true,
   },
-})
+  '/api/public': {         // AKTools (端口 8080)
+    target: 'http://127.0.0.1:8080',
+    changeOrigin: true,
+  },
+}
 ```
 
-### 数据格式
+#### 统一接口使用
 
-K 线数据需要包含以下字段：
+```vue
+<script setup lang="ts">
+import { fetchKLineData, type KLineDataSourceConfig } from '@/api/data'
 
-```ts
-interface KLineDailyDongCaiResponse {
-  日期: string // 日期
-  股票代码: string // 股票代码
-  开盘: number // 开盘价
-  收盘: number // 收盘价
-  最高: number // 最高价
-  最低: number // 最低价
-  成交量: number // 成交量
-  成交额: number // 成交额
-  振幅: number // 振幅
-  涨跌幅: number // 涨跌幅
-  涨跌额: number // 涨跌额
-  换手率: number // 换手率
+const DATA_SOURCE: 'baostock' | 'dongcai' = 'baostock'
+
+const config: KLineDataSourceConfig = {
+  symbol: '601360',        // 统一格式：纯代码
+  startDate: '2024-01-01', // 统一格式：YYYY-MM-DD
+  endDate: '2024-12-31',
+  period: 'daily',
+  adjust: 'qfq',
 }
+
+const data = await fetchKLineData(DATA_SOURCE, config)
+</script>
 ```
 
+#### 股票代码格式
+
+| 市场 | 格式 | 示例 |
+|------|------|------|
+| 沪市A股 | `sh.` | `sh.600000` |
+| 深市A股 | `sz.` | `sz.000001` |
+
 ## 使用方法
 
 ### 1. 安装依赖
@@ -176,6 +165,8 @@ pnpm dev
 
 ### 3. 在组件中使用 K 线图
 
+#### 方式一：使用 BaoStock 数据源（推荐）
+
 ```vue
 <template>
   <KLineChart
@@ -191,20 +182,57 @@ pnpm dev
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import KLineChart from '@/components/KLineChart.vue'
-import { getKlineDataDongCai } from '@/api/data/kLine'
-import { toKLineData, type KLineData } from '@/types/price'
+import { getKlineDataBaoStock } from '@/api/data/baostock'
+import type { KLineData } from '@/types/price'
+import { cache } from '@/utils/cache'
 
 const klineData = ref<KLineData[]>([])
 
+onMounted(async () => {
+  const params = {
+    symbol: 'sh.601360',      // 三六零股票代码（带市场前缀）
+    start_date: '2024-01-01', // YYYY-MM-DD 格式
+    end_date: '2024-12-31',
+    period: 'daily' as const,
+    adjust: 'qfq' as const,   // 前复权
+  }
+
+  // 缓存键
+  const cacheKey = `kline:${params.symbol}:${params.start_date}:${params.end_date}`
+
+  // 先尝试从缓存获取（1小时有效期）
+  const cached = cache.get<KLineData[]>(cacheKey)
+  if (cached) {
+    klineData.value = cached
+    return
+  }
+
+  // 从 API 获取
+  const data = await getKlineDataBaoStock(params)
+  klineData.value = data
+
+  // 存入缓存
+  cache.set(cacheKey, data)
+})
+</script>
+```
+
+#### 方式二：使用 AKTools 数据源
+
+```vue
+<script setup lang="ts">
+import { getKlineDataDongCai } from '@/api/data/kLine'
+import { toKLineData } from '@/types/price'
+
 onMounted(async () => {
   const raw = await getKlineDataDongCai({
-    symbol: '601360', // 三六零股票代码
+    symbol: '601360',
     period: 'daily',
-    start_date: '20250501',
+    start_date: '20250501',   // YYYYMMDD 格式
     end_date: '20251230',
-    adjust: 'qfq', // 前复权
+    adjust: 'qfq',
   })
-  klineData.value = toKLineData(raw) // 转换并排序数据
+  klineData.value = toKLineData(raw)
 })
 </script>
 ```
@@ -220,13 +248,6 @@ onMounted(async () => {
 | showMA            | MAFlags     | { ma5: true, ma10: true, ma20: true } | 是否显示移动平均线             |
 | autoScrollToRight | boolean     | true                                  | 数据更新后是否自动滚动到最右侧 |
 
-## 性能优化
-
-- 使用 `requestAnimationFrame` 优化渲染性能
-- 对于滚动等高频事件，使用 passive 模式提升响应性能
-- Canvas 绘制时使用设备像素比（devicePixelRatio）确保在高分屏上清晰显示
-- 通过路径重置（beginPath）避免路径污染
-
 ## 环境要求
 
 - Node.js: ^20.19.0 || >=22.12.0
@@ -250,25 +271,52 @@ pnpm preview
 
 ## API 接口说明
 
+### getKlineDataBaoStock
+
+从 BaoStock 获取 K 线数据（推荐）。
+
+**参数:**
+
+```ts
+interface BaoStockKLineRequest {
+  symbol: string              // 股票代码，格式：sh.600000 或 sz.000001
+  start_date: string          // 开始日期，格式：YYYY-MM-DD
+  end_date: string            // 结束日期，格式：YYYY-MM-DD
+  period?: 'daily' | 'weekly' | 'monthly' | '5' | '15' | '30' | '60'
+  adjust?: 'qfq' | 'hfq' | 'none'  // qfq: 前复权, hfq: 后复权, none: 不复权
+  timeout?: number            // 超时时间（秒）
+}
+```
+
+**返回值:**
+`Promise<KLineData[]>` - 已转换为标准格式的 K 线数据数组
+
+**特性:**
+- ✅ 支持 1 小时本地缓存
+- ✅ 无反爬限制
+- ✅ 数据自动按时间排序
+
 ### getKlineDataDongCai
 
-获取 K 线数据的异步函数。
+从 AKTools/东方财富获取 K 线数据。
+
+> **⚠️ 注意：** 此接口依赖 AKShare，存在反爬机制，频繁请求可能导致 IP 被封禁。
 
 **参数:**
 
 ```ts
 interface KLineDailyDongCaiRequest {
-  symbol: string // 股票代码
+  symbol: string              // 股票代码
   period: 'daily' | 'weekly' | 'monthly' // 周期
-  start_date: string // 开始日期，格式：YYYYMMDD
-  end_date: string // 结束日期，格式：YYYYMMDD
-  adjust?: 'qfq' | 'hfq' // 复权方式，qfq: 前复权, hfq: 后复权
-  timeout?: number // 超时时间（秒）
+  start_date: string          // 开始日期，格式：YYYYMMDD
+  end_date: string            // 结束日期，格式：YYYYMMDD
+  adjust?: 'qfq' | 'hfq'      // 复权方式，qfq: 前复权, hfq: 后复权
+  timeout?: number            // 超时时间（秒）
 }
 ```
 
 **返回值:**
-`Promise<KLineDailyDongCaiResponse[]>` - K 线数据数组
+`Promise<KLineDailyDongCaiResponse[]>` - K 线数据数组（需调用 `toKLineData()` 转换）
 
 ## 贡献
 
@@ -282,5 +330,8 @@ interface KLineDailyDongCaiRequest {
 
 - [Vue.js 官方文档](https://vuejs.org/guide/introduction.html)
 - [Vite 官方文档](https://vite.dev/guide/)
+- [BaoStock 官方文档](http://baostock.com/)
 - [AKTools 官方文档](https://github.com/akfamily/aktools)
+- [AKShare 官方文档](https://akshare.akfamily.xyz/)
 - [Canvas API MDN 文档](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)
+- [Vitest 官方文档](https://vitest.dev/)

package/dist/App.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/dist/api/data/baostock.d.ts

@@ -0,0 +1,86 @@
+import { KLineData } from '../../types/price';
+interface BaoStockKDataRequest {
+    /** 股票代码，如 `sh.600000`（沪市）、`sz.000001`（深市） */
+    stock_code: string;
+    /** 开始日期，格式 `YYYY-MM-DD` */
+    start_date: string;
+    /** 结束日期，格式 `YYYY-MM-DD` */
+    end_date: string;
+    /** 数据频率：`d`=日K, `w`=周K, `m`=月K, `5`=5分钟, `15`=15分钟, `30`=30分钟, `60`=60分钟 */
+    frequency?: 'd' | 'w' | 'm' | '5' | '15' | '30' | '60';
+    /** 复权类型：`1`=后复权, `2`=前复权, `3`=不复权 */
+    adjustflag?: '1' | '2' | '3';
+    timeout?: number;
+}
+interface BaoStockKDataItem {
+    /** 交易日期 */
+    date: string;
+    /** 股票代码 */
+    code: string;
+    /** 开盘价 */
+    open: string;
+    /** 最高价 */
+    high: string;
+    /** 最低价 */
+    low: string;
+    /** 收盘价 */
+    close: string;
+    /** 昨收价 */
+    preclose: string;
+    /** 成交量（股） */
+    volume: string;
+    /** 成交额（元） */
+    amount: string;
+    /** 复权状态 */
+    adjustflag: string;
+    /** 换手率 */
+    turn: string;
+    /** 交易状态 */
+    tradestatus: string;
+    /** 涨跌幅（%） */
+    pctChg: string;
+    /** 是否ST股 */
+    isST: string;
+}
+interface BaoStockKDataResponse {
+    /** 请求是否成功 */
+    success: boolean;
+    /** 股票代码 */
+    stock_code: string;
+    /** 查询开始日期 */
+    start_date: string;
+    /** 查询结束日期 */
+    end_date: string;
+    /** 数据条数 */
+    data_count: number;
+    /** K线数据列表 */
+    data: BaoStockKDataItem[];
+    /** 错误代码（失败时返回） */
+    error_code?: string;
+    /** 错误信息（失败时返回） */
+    error_msg?: string;
+}
+/**
+ * 从 baostock 获取股票K线数据
+ * @param param 请求参数
+ * @returns Promise<KLineData[]>
+ */
+export declare function getKlineDataBaoStock(param: {
+    symbol: string;
+    start_date: string;
+    end_date: string;
+    period?: 'daily' | 'weekly' | 'monthly' | '5' | '15' | '30' | '60';
+    adjust?: 'qfq' | 'hfq' | 'none';
+    timeout?: number;
+}): Promise<KLineData[]>;
+/**
+ * 快捷查询最近N天的数据
+ * @param param 请求参数
+ * @returns Promise<KLineData[]>
+ */
+export declare function queryKlineDataBaoStock(param: {
+    symbol: string;
+    days?: number;
+    timeout?: number;
+}): Promise<KLineData[]>;
+export type { BaoStockKDataRequest, BaoStockKDataResponse, BaoStockKDataItem };

package/dist/api/data/baostock.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/api/data/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * K线数据源统一入口
+ *
+ * 推荐使用方式：
+ * ```ts
+ * import { fetchKLineData, type KLineDataSourceConfig } from '@/api/data'
+ *
+ * const config: KLineDataSourceConfig = {
+ *   symbol: '600000',
+ *   startDate: '2024-01-01',
+ *   endDate: '2024-12-31',
+ *   period: 'daily',
+ *   adjust: 'qfq',
+ * }
+ *
+ * // 使用 BaoStock（推荐）
+ * const data = await fetchKLineData('baostock', config)
+ *
+ * // 或使用东财
+ * const data = await fetchKLineData('dongcai', config)
+ * ```
+ */
+export { fetchKLineData, DataSourceFactory } from './unified';
+export type { KLineDataSourceConfig, DataSourceType, IKLineDataSource, } from './unified';
+export { getKlineDataBaoStock, queryKlineDataBaoStock } from './baostock';
+export { getKlineDataDongCai } from './kLine';

package/dist/api/data/types.d.ts

@@ -0,0 +1,33 @@
+import { KLineData } from '../../types/price';
+/**
+ * 统一的数据源配置
+ */
+export interface KLineDataSourceConfig {
+    /** 股票代码（统一格式，如 600000、000001，不带市场前缀） */
+    symbol: string;
+    /** 开始日期（YYYY-MM-DD） */
+    startDate: string;
+    /** 结束日期（YYYY-MM-DD） */
+    endDate: string;
+    /** 数据周期 */
+    period: 'daily' | 'weekly' | 'monthly' | '5min' | '15min' | '30min' | '60min';
+    /** 复权方式 */
+    adjust: 'qfq' | 'hfq' | 'none';
+    /** 超时时间（秒） */
+    timeout?: number;
+}
+/**
+ * K线数据源统一接口
+ * 所有数据源实现此接口，调用方无感知切换
+ */
+export interface IKLineDataSource {
+    readonly name: string;
+    fetchKLineData(config: KLineDataSourceConfig): Promise<KLineData[]>;
+}
+/**
+ * 数据源工厂
+ */
+export type DataSourceType = 'baostock' | 'dongcai';
+export interface IDataSourceFactory {
+    create(type: DataSourceType): IKLineDataSource;
+}

package/dist/api/data/unified.d.ts

@@ -0,0 +1,33 @@
+import { KLineData } from '../../types/price';
+import { KLineDataSourceConfig, IKLineDataSource, DataSourceType } from './types';
+/**
+ * 数据源工厂
+ */
+declare class DataSourceFactory {
+    private static instances;
+    static create(type: DataSourceType): IKLineDataSource;
+}
+/**
+ * 获取 K 线数据（统一入口）
+ * @param type 数据源类型
+ * @param config 统一配置
+ * @returns Promise<KLineData[]>
+ *
+ * 使用示例：
+ * ```ts
+ * // 使用 BaoStock
+ * const data = await fetchKLineData('baostock', {
+ *   symbol: '600000',
+ *   startDate: '2024-01-01',
+ *   endDate: '2024-12-31',
+ *   period: 'daily',
+ *   adjust: 'qfq',
+ * })
+ *
+ * // 切换东财只需改第一个参数
+ * const data = await fetchKLineData('dongcai', { ... })
+ * ```
+ */
+export declare function fetchKLineData(type: DataSourceType, config: KLineDataSourceConfig): Promise<KLineData[]>;
+export { DataSourceFactory };
+export type { KLineDataSourceConfig, DataSourceType, IKLineDataSource };

package/dist/components/IndicatorSelector.vue.d.ts

@@ -0,0 +1,17 @@
+export interface Indicator {
+    id: string;
+    label: string;
+    name: string;
+}
+type __VLS_Props = {
+    /** 当前选中的指标列表 */
+    activeIndicators?: string[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    toggle: (indicatorId: string, active: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((indicatorId: string, active: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    scrollContainerRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/KLineChart.vue.d.ts

@@ -3,6 +3,8 @@ type MAFlags = {
     ma5?: boolean;
     ma10?: boolean;
     ma20?: boolean;
+    ma30?: boolean;
+    ma60?: boolean;
 };
 type __VLS_Props = {
     data: KLineData[];
@@ -17,6 +19,8 @@ type __VLS_Props = {
     rightAxisWidth?: number;
     /** 底部时间轴高度 */
     bottomAxisHeight?: number;
+    /** 价格标签额外宽度（用于显示涨跌幅，默认 60px） */
+    priceLabelWidth?: number;
     /** Pane 高度比例（主/副），默认 [0.85, 0.15] */
     paneRatios?: [number, number];
 };
@@ -34,13 +38,12 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
     bottomAxisHeight: number;
     minKWidth: number;
     maxKWidth: number;
+    priceLabelWidth: number;
     autoScrollToRight: boolean;
     paneRatios: [number, number];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;
     canvasLayerRef: HTMLDivElement;
-    plotCanvasRef: HTMLCanvasElement;
-    yAxisCanvasRef: HTMLCanvasElement;
     xAxisCanvasRef: HTMLCanvasElement;
-}, any>;
+}, HTMLDivElement>;
 export default _default;