基于React和TypeScript的金融市场模拟器开发与模式分析-海口c网

基于React和TypeScript的金融市场模拟器开发与模式分析

article/2025/8/22 20:04:48

基于React和TypeScript的金融市场模拟器开发与模式分析

项目概述

本项目开发了一个基于React和TypeScript的金融市场模拟器，通过模拟订单流和价格发现机制，重现了真实市场的动态特性。该模拟器不仅提供了实时价格图表、订单簿和交易功能，还通过随机交易者行为模拟，展示了市场自发形成的各种技术分析模式。

网站: https://www.market-simulator.xyz/
代码: https://github.com/zhutoutoutousan/market-simulator

系统架构

数据流图

模式形成过程

技术栈

React + TypeScript
TradingView Lightweight Charts
TailwindCSS
Shadcn UI

核心实现

1. 订单流模拟

const simulateTraderActivity = useCallback(() => {if (!isSimulationRunning) returnconst shouldTrade = Math.random() < 0.5if (!shouldTrade) returnconst isBuy = Math.random() < 0.5const isMarketOrder = Math.random() < 0.8if (isMarketOrder) {// 市价单执行const quantity = Math.random() * 10 + 1if (isBuy && orderBook.asks.length > 0) {const bestAsk = orderBook.asks[0]const executedPrice = bestAsk.price// 更新订单簿和价格setCurrentPrice(executedPrice)// 记录交易const trade: Trade = {id: `trade-${Date.now()}`,price: executedPrice,quantity,timestamp: Date.now(),type: "buy",}setRecentTrades((prev) => [trade, ...prev.slice(0, 49)])}} else {// 限价单添加到订单簿const priceOffset = (Math.random() - 0.5) * 4const price = currentPrice + priceOffsetconst quantity = Math.random() * 5 + 1// 添加新订单const order: Order = {id: `order-${Date.now()}-${Math.random()}`,type: isBuy ? "buy" : "sell",price,quantity,timestamp: Date.now(),}}
}, [isSimulationRunning, orderBook, currentPrice])

2. K线数据生成

setCandleData((prev) => {// 按新时间间隔分组现有K线const groupedCandles = new Map<number, CandleData>()// 处理现有K线prev.forEach(candle => {const candleInterval = Math.floor(candle.timestamp / adjustedIntervalMs) * adjustedIntervalMsconst existingCandle = groupedCandles.get(candleInterval)if (existingCandle) {groupedCandles.set(candleInterval, {timestamp: candleInterval,open: existingCandle.open,high: Math.max(existingCandle.high, candle.high),low: Math.min(existingCandle.low, candle.low),close: candle.close,volume: existingCandle.volume + candle.volume,})} else {groupedCandles.set(candleInterval, { ...candle, timestamp: candleInterval })}})// 添加当前价格到对应区间const currentCandleInterval = Math.floor(now / adjustedIntervalMs) * adjustedIntervalMs// ... 更新K线数据
})