一个 prop 画出专业 K 线图,数据获取和指标计算全自动。
项目背景
需求很简单 —— 在一个 React 项目里加一个股票 K 线图,要能切周期、看指标、支持缩放拖拽。尝试过 TradingView 的 Lightweight Charts,但免费版功能有限且非 React 组件;npm 上搜索现成方案要么年久失修,要么是 demo 级别。因此决定自行开发通用组件。
项目概览
项目名叫 kline-charts-react,MIT 开源。

上手非常简单:
import { KLineChart } from 'kline-charts-react';
import 'kline-charts-react/style.css';
function App() {
return <KLineChart symbol="sh600519" height={600} />;
}
传一个股票代码,组件会自动拉取数据、计算技术指标、渲染出完整的 K 线图。
功能特性
对标主流金融交互,主要功能包括:
- 周期全覆盖:分时、五日分时、日 K、周 K、月 K,加上 1/5/15/30/60 分钟线。
- 15 种技术指标:MA、BOLL、MACD、KDJ、RSI、WR、BIAS、CCI、ATR、OBV、ROC、DMI、SAR、KC,全部前端实时计算。
- 丰富的交互:鼠标滚轮缩放、拖拽平移、十字准线、数据 Tooltip、缩放历史撤销/重做、全屏模式、导出图片。
- 主题切换:内置明暗两套主题,也接受自定义颜色对象。
- 复权处理:前复权、后复权、不复权,默认前复权。
数据层:stock-sdk
前端领域获取股票行情一直是个空白地带。为此开发了专门面向前端的股票数据 SDK:stock-sdk。
定位:让 JavaScript/TypeScript 开发者用最简单的方式获取股票行情和 K 线数据。


