1.关键数据结构
// 未聚合的原始WebSocket数据缓存
unaggregatedData: []
// 当前图表显示的数据
currentChartData: null
// 图表更新定时器
chartUpdateTimer: null
// 定时器更新间隔（毫秒）
updateInterval: 1000
// 当日累计数据跟踪
dailyCumulativeVolume: 0 // 当日累计成交量
dailyCumulativeAmount: 0 // 当日累计成交额
2. 增量更新流程
2.1 数据接收与预处理
WebSocket数据处理 ( handleWebSocketData 方法)
// 1. 接收WebSocket原始数据并解析JSON
// 2. 根据合约代码匹配目标数据
// 3. 提取关键字段：最新价、成交量、持仓量、最高价、最低价等
// 4. 格式化时间戳（YYYY/MM/DD HH:mm:ss）
// 5. 计算当日累计成交量和成交额
// 6. 计算当日均价
// 7. 计算涨跌幅数据
// 8. 构造完整数据点并添加到unaggregatedData缓存
2.2 定时数据聚合
定时器机制 ( startChartUpdateTimer 方法)
// 设置每秒执行一次的定时器
this.chartUpdateTimer = setInterval(() => {
this.processAndUpdateChart();
}, this.updateInterval);
2.3 数据聚合与合并
数据处理与聚合 ( processAndUpdateChart 方法)
// 1. 检查是否有未聚合数据和有效图表实例
// 2. 调用aggregateDataByMinute进行分钟级聚合
// 3. 清空未聚合数据缓存
// 4. 将聚合后的数据与现有图表数据合并：
// - 若分钟数据已存在，更新该分钟数据
// - 若分钟数据不存在，添加新数据点
// 5. 更新图表显示
分钟级数据聚合 ( aggregateDataByMinute 方法)
// 1. 按分钟时间戳分组（YYYY/MM/DD HH:mm）
// 2. 对每组数据计算：
// - open: 该分钟第一笔成交价格
// - close: 该分钟最后一笔成交价格
// - high: 该分钟最高价
// - low: 该分钟最低价
// - volume: 该分钟总成交量
// - position: 该分钟最新持仓量
// - totalAmount: 该分钟总成交额
// - avgPrice: 该分钟均价（totalAmount/volume）
// 3. 返回聚合后的分钟级数据数组
2.4 图表更新
图表渲染 ( updateChartWithCurrentData 方法)
// 1. 处理当前图表数据
// 2. 生成完整时间序列（包含原数据 + 当前年月日15:00）
// 3. 将数据映射到完整时间序列
// 4. 计算涨跌幅数据
// 5. 调用echarts的setOption更新图表显示
3. 业务特点与优化
3.1 数据处理优化
- 批量处理 ：避免每次WebSocket数据到达都更新图表，而是缓存后定时批量处理
- 增量更新 ：只更新变化的数据点，减少不必要的计算和渲染
- 数据完整性 ：确保时间序列完整，自动补充到15:00的时间点
3.2 交易日期处理
- 自动检测新的交易日
- 新交易日开始时重置累计成交量和成交额
3.3 错误处理
- WebSocket数据解析错误处理
- 图表实例有效性检查
- 数据缺失时的默认值处理
4. 关键流程图
WebSocket数据 → handleWebSocketData → unaggregatedData缓存
↓
定时器触发(每秒) → processAndUpdateChart
↓
aggregateDataByMinute(分钟级聚合) → 合并到currentChartData
↓
updateChartWithCurrentData → 图表渲染更新
5. 技术实现要点
- 实时数据处理 ：使用WebSocket接收实时行情数据
- 数据聚合策略 ：采用分钟级聚合，平衡数据精度与性能
- 定时更新机制 ：1秒更新间隔，确保实时性与性能平衡
- 图表库集成 ：使用ECharts实现高性能图表渲染
- 数据完整性保障 ：自动补充时间序列，确保图表显示完整 这个增量更新机制确保了分时图能够高效、实时地反映市场变化，同时通过数据聚合和批量处理优化了性能表现。
