tradingview-txkline

基于 lightweight-charts + Vue 3 的专业 K 线图组件库。

支持多周期切换、13 种技术指标、A 股分时图（含集合竞价）、买卖点标注、深色/浅色多主题，开箱即用。

安装

npm install tradingview-txkline lightweight-charts vue

快速开始

<template>
  <LightweightKlineChart
    stock-code="000001.SZ"
    :fetch-history="fetchHistory"
    theme="dark"
    style="height: 600px;"
  />
</template>

<script setup>
import { LightweightKlineChart } from 'tradingview-txkline'
import 'tradingview-txkline/style.css'

// fetchHistory 需返回 TradingView UDF 格式
async function fetchHistory({ symbol, resolution, from, to }) {
  const res = await fetch(`/api/kline?symbol=${symbol}&resolution=${resolution}&from=${from}&to=${to}`)
  return res.json()
  // 返回格式: { t: [...], o: [...], h: [...], l: [...], c: [...], v: [...] }
}
</script>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | stockCode | string | '000001.SZ' | 股票代码 | | fetchHistory | Function | — | 自定义数据获取函数，签名见下方 | | theme | 'light' \| 'dark' | 'light' | 主题模式 | | themeStyle | string | 'default' | 深色风格：default / black / dark-blue / dark-green / charcoal | | hideControls | boolean | false | 隐藏顶部控制栏 | | showGridLines | boolean | true | 显示网格线 | | showHorizontalLines | boolean | true | 显示等分线 | | subChartCountProp | number | — | 副图数量（0–3） | | mainIndicatorProp | string | — | 主图指标：none / ma / ema / boll / sar | | period | string | — | 初始周期，如 day_1 / min_5 / timeline | | chartStyleProp | string | — | K 线样式：candle_filled / candle_hollow / bar / line / area / baseline | | extraPeriods | {value, label}[] | [] | 额外的自定义周期 | | hiddenPeriods | string[] | [] | 隐藏的周期 | | previousClose | number | — | 昨收价（A 股分时图百分比 Y 轴用） | | priceLimitPercent | number | 20 | 涨跌幅限制：20 / 30 / 0（无限制） |

fetchHistory 签名

interface HistoryApiParams {
  symbol: string       // 股票代码
  resolution: string   // 周期：'1'/'5'/'15'/'30'/'60'/'D'/'W'/'M'
  from: number         // 起始时间戳（秒）
  to: number           // 结束时间戳（秒）
  countback?: number   // 请求条数
}

interface HistoryApiResult {
  t: number[]   // 时间戳数组
  o: number[]   // 开盘价
  h: number[]   // 最高价
  l: number[]   // 最低价
  c: number[]   // 收盘价
  v: number[]   // 成交量
  a?: number[]  // 成交额（可选）
}

右键菜单

组件内置右键菜单，支持：

• 主题设置：浅色/深色，深色多风格
• K 线样式：6 种样式 + 颜色自定义
• 周期切换：内置周期 + 自定义周期（增删管理）
• 周期显示管理：控制顶部按钮栏显示哪些周期
• 网格线设置：网格线 / 等分线开关
• 主图指标：MA / EMA / BOLL / SAR + 参数设置
• 副图数量：0–3 个副图，每图独立指标
• 分时模式（仅分时周期）：长分时（多日） / A 股分时（当日）

买卖点标注

通过 ref 获取组件实例后调用方法：

<template>
  <LightweightKlineChart ref="chartRef" ... />
</template>

<script setup>
import { ref } from 'vue'

const chartRef = ref()

// 设置标注
chartRef.value.setMarkers([
  {
    id: 'buy-1',
    time: '2024-01-15',
    price: 10.5,
    type: 'buy',
    text: '买入',
    tooltip: '突破均线买入'
  }
])

// 添加单个标注
chartRef.value.addMarker({ id: 'sell-1', time: '2024-01-20', price: 12.0, type: 'sell' })

// 清除所有标注
chartRef.value.clearMarkers()
</script>

标注类型

| type | 图标 | 颜色 | |--------|------|------| | buy | ▲ | 红色 | | sell | ▼ | 绿色 | | custom | ● | 蓝色 |

事件

| 事件 | 参数 | 说明 | |------|------|------| | chart-ready | IChartApi | 图表初始化完成 | | marker-click | KlineMarker | 点击买卖点标注 | | marker-hover | KlineMarker \| null | 悬停买卖点标注 | | theme-change | string | 右键菜单切换主题 | | theme-style-change | string | 右键菜单切换主题风格 |

工具函数

import {
  formatVolume,    // 格式化成交量（返回 "1.23亿" / "456.78万"）
  formatAmount,    // 格式化成交额
  calculateMA,     // 计算移动平均线
  calculateMACD,   // 计算 MACD
  calculateKDJ,    // 计算 KDJ
  calculateRSI,    // 计算 RSI
  calculateBOLL,   // 计算布林带
  mergeKlineData,  // 合并 K 线数据（懒加载用）
} from 'tradingview-txkline'

支持的技术指标

主图：MA（均线）、EMA（指数均线）、BOLL（布林带）、SAR（抛物线）

副图：VOL（成交量）、MACD、KDJ、RSI、CCI、WR（威廉指标）、ATR、OBV、DMI

周期格式

| 值 | 说明 | |----|------| | timeline | 分时图 | | min_1 / min_5 / min_15 / min_30 / min_60 | 分钟线 | | day_1 | 日线 | | week_1 | 周线 | | month_1 | 月线 | | custom_4_hour | 自定义周期示例（4小时） |

对等依赖

| 包 | 版本要求 | |----|---------| | vue | ^3.3.0 | | lightweight-charts | ^4.1.0 |

License

MIT