569 lines
24 KiB
JavaScript
569 lines
24 KiB
JavaScript
// src/components/StockChart/StockChartModal.js - 统一的股票图表组件
|
||
import React, { useState, useEffect, useRef } from 'react';
|
||
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Button, ButtonGroup, VStack, HStack, Text, Badge, Box, Flex, CircularProgress } from '@chakra-ui/react';
|
||
import ReactECharts from 'echarts-for-react';
|
||
import * as echarts from 'echarts';
|
||
import moment from 'moment';
|
||
import { stockService } from '../../services/eventService';
|
||
import { logger } from '../../utils/logger';
|
||
import RiskDisclaimer from '../RiskDisclaimer';
|
||
|
||
const StockChartModal = ({
|
||
isOpen,
|
||
onClose,
|
||
stock,
|
||
eventTime,
|
||
isChakraUI = true, // 是否使用Chakra UI，默认true；如果false则使用Antd
|
||
size = "6xl"
|
||
}) => {
|
||
const chartRef = useRef(null);
|
||
const chartInstanceRef = useRef(null);
|
||
const [chartType, setChartType] = useState('timeline');
|
||
const [loading, setLoading] = useState(false);
|
||
const [chartData, setChartData] = useState(null);
|
||
const [preloadedData, setPreloadedData] = useState({});
|
||
|
||
// 预加载数据
|
||
const preloadData = async (type) => {
|
||
if (!stock || preloadedData[type]) return;
|
||
|
||
try {
|
||
let adjustedEventTime = eventTime;
|
||
if (eventTime) {
|
||
try {
|
||
const eventMoment = moment(eventTime);
|
||
if (eventMoment.isValid() && eventMoment.hour() >= 15) {
|
||
const nextDay = eventMoment.clone().add(1, 'day');
|
||
nextDay.hour(9).minute(30).second(0).millisecond(0);
|
||
adjustedEventTime = nextDay.format('YYYY-MM-DD HH:mm');
|
||
}
|
||
} catch (e) {
|
||
logger.warn('StockChartModal', '事件时间解析失败', {
|
||
eventTime,
|
||
error: e.message
|
||
});
|
||
}
|
||
}
|
||
|
||
const response = await stockService.getKlineData(stock.stock_code, type, adjustedEventTime);
|
||
setPreloadedData(prev => ({...prev, [type]: response}));
|
||
} catch (err) {
|
||
logger.error('StockChartModal', 'preloadData', err, {
|
||
stockCode: stock?.stock_code,
|
||
type
|
||
});
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (isOpen && stock) {
|
||
// 预加载两种图表类型的数据
|
||
preloadData('timeline');
|
||
preloadData('daily');
|
||
|
||
// 清理图表实例
|
||
return () => {
|
||
if (chartInstanceRef.current) {
|
||
window.removeEventListener('resize', chartInstanceRef.current.resizeHandler);
|
||
chartInstanceRef.current.dispose();
|
||
chartInstanceRef.current = null;
|
||
}
|
||
};
|
||
}
|
||
}, [isOpen, stock, eventTime]);
|
||
|
||
useEffect(() => {
|
||
if (isOpen && stock) {
|
||
loadChartData(chartType);
|
||
}
|
||
}, [chartType, isOpen, stock]);
|
||
|
||
const loadChartData = async (type) => {
|
||
if (!stock) return;
|
||
|
||
try {
|
||
setLoading(true);
|
||
|
||
// 先尝试使用预加载的数据
|
||
let response = preloadedData[type];
|
||
|
||
if (!response) {
|
||
// 如果预加载数据不存在，则立即请求
|
||
let adjustedEventTime = eventTime;
|
||
if (eventTime) {
|
||
try {
|
||
const eventMoment = moment(eventTime);
|
||
if (eventMoment.isValid() && eventMoment.hour() >= 15) {
|
||
const nextDay = eventMoment.clone().add(1, 'day');
|
||
nextDay.hour(9).minute(30).second(0).millisecond(0);
|
||
adjustedEventTime = nextDay.format('YYYY-MM-DD HH:mm');
|
||
}
|
||
} catch (e) {
|
||
logger.warn('StockChartModal', '事件时间解析失败', {
|
||
eventTime,
|
||
error: e.message
|
||
});
|
||
}
|
||
}
|
||
|
||
response = await stockService.getKlineData(stock.stock_code, type, adjustedEventTime);
|
||
}
|
||
|
||
setChartData(response);
|
||
|
||
// 初始化图表
|
||
if (chartRef.current && !chartInstanceRef.current) {
|
||
const chart = echarts.init(chartRef.current);
|
||
chart.resizeHandler = () => chart.resize();
|
||
window.addEventListener('resize', chart.resizeHandler);
|
||
chartInstanceRef.current = chart;
|
||
}
|
||
|
||
if (chartInstanceRef.current) {
|
||
const option = generateChartOption(response, type, eventTime);
|
||
chartInstanceRef.current.setOption(option, true);
|
||
}
|
||
} catch (err) {
|
||
logger.error('StockChartModal', 'loadChartData', err, {
|
||
stockCode: stock?.stock_code,
|
||
chartType: type
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const generateChartOption = (data, type, originalEventTime, adjustedEventTime) => {
|
||
if (!data || !data.data || data.data.length === 0) {
|
||
return { title: { text: '暂无数据', left: 'center', top: 'center', textStyle: { color: '#999', fontSize: 16 } } };
|
||
}
|
||
|
||
const stockData = data.data;
|
||
const tradeDate = data.trade_date;
|
||
|
||
// 分时图
|
||
if (type === 'timeline') {
|
||
const times = stockData.map(item => item.time);
|
||
const prices = stockData.map(item => item.close || item.price);
|
||
const avgPrices = stockData.map(item => item.avg_price);
|
||
const volumes = stockData.map(item => item.volume);
|
||
|
||
// 获取昨收盘价作为基准
|
||
const prevClose = data.prev_close || (prices.length > 0 ? prices[0] : 0);
|
||
|
||
// 计算涨跌幅数据
|
||
const changePercentData = prices.map(price => ((price - prevClose) / prevClose * 100));
|
||
const avgChangePercentData = avgPrices.map(avgPrice => ((avgPrice - prevClose) / prevClose * 100));
|
||
|
||
const currentPrice = prices[prices.length - 1];
|
||
const currentChange = ((currentPrice - prevClose) / prevClose * 100);
|
||
const isUp = currentChange >= 0;
|
||
const lineColor = isUp ? '#ef5350' : '#26a69a';
|
||
|
||
// 计算事件标记线位置
|
||
let eventMarkLineData = [];
|
||
if (originalEventTime && times.length > 0) {
|
||
const eventMoment = moment(originalEventTime);
|
||
const eventDate = eventMoment.format('YYYY-MM-DD');
|
||
const eventTime = eventMoment.format('HH:mm');
|
||
|
||
if (eventDate === tradeDate) {
|
||
// 找到最接近的时间点
|
||
let nearestIdx = 0;
|
||
const eventMinutes = eventMoment.hour() * 60 + eventMoment.minute();
|
||
|
||
for (let i = 0; i < times.length; i++) {
|
||
const [h, m] = times[i].split(':').map(Number);
|
||
const timeMinutes = h * 60 + m;
|
||
const currentDiff = Math.abs(timeMinutes - eventMinutes);
|
||
const nearestDiff = Math.abs(
|
||
(times[nearestIdx].split(':').map(Number)[0] * 60 + times[nearestIdx].split(':').map(Number)[1]) - eventMinutes
|
||
);
|
||
if (currentDiff < nearestDiff) {
|
||
nearestIdx = i;
|
||
}
|
||
}
|
||
|
||
eventMarkLineData = [{
|
||
name: '事件发生',
|
||
xAxis: nearestIdx,
|
||
label: {
|
||
formatter: '事件发生',
|
||
position: 'middle',
|
||
color: '#FFD700',
|
||
fontSize: 12
|
||
},
|
||
lineStyle: {
|
||
color: '#FFD700',
|
||
type: 'solid',
|
||
width: 2
|
||
}
|
||
}];
|
||
}
|
||
}
|
||
|
||
return {
|
||
title: {
|
||
text: `${stock.stock_name || stock.stock_code} - 分时图`,
|
||
left: 'center',
|
||
textStyle: { fontSize: 16, fontWeight: 'bold' }
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'cross' },
|
||
formatter: function(params) {
|
||
if (!params || params.length === 0) return '';
|
||
const point = params[0];
|
||
const idx = point.dataIndex;
|
||
const priceChangePercent = ((prices[idx] - prevClose) / prevClose * 100);
|
||
const avgChangePercent = ((avgPrices[idx] - prevClose) / prevClose * 100);
|
||
const priceColor = priceChangePercent >= 0 ? '#ef5350' : '#26a69a';
|
||
const avgColor = avgChangePercent >= 0 ? '#ef5350' : '#26a69a';
|
||
|
||
return `时间：${times[idx]}<br/>现价：<span style="color: ${priceColor}">¥${prices[idx]?.toFixed(2)} (${priceChangePercent >= 0 ? '+' : ''}${priceChangePercent.toFixed(2)}%)</span><br/>均价：<span style="color: ${avgColor}">¥${avgPrices[idx]?.toFixed(2)} (${avgChangePercent >= 0 ? '+' : ''}${avgChangePercent.toFixed(2)}%)</span><br/>昨收：¥${prevClose?.toFixed(2)}<br/>成交量：${Math.round(volumes[idx]/100)}手`;
|
||
}
|
||
},
|
||
grid: [
|
||
{ left: '10%', right: '10%', height: '60%', top: '15%' },
|
||
{ left: '10%', right: '10%', top: '80%', height: '15%' }
|
||
],
|
||
xAxis: [
|
||
{ type: 'category', data: times, gridIndex: 0, boundaryGap: false },
|
||
{ type: 'category', data: times, gridIndex: 1, axisLabel: { show: false } }
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
gridIndex: 0,
|
||
scale: false,
|
||
position: 'left',
|
||
axisLabel: {
|
||
formatter: function(value) {
|
||
return (value >= 0 ? '+' : '') + value.toFixed(2) + '%';
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#f0f0f0'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
gridIndex: 0,
|
||
scale: false,
|
||
position: 'right',
|
||
axisLabel: {
|
||
formatter: function(value) {
|
||
return (value >= 0 ? '+' : '') + value.toFixed(2) + '%';
|
||
}
|
||
}
|
||
},
|
||
{ type: 'value', gridIndex: 1, scale: true, axisLabel: { formatter: v => Math.round(v/100) + '手' } }
|
||
],
|
||
dataZoom: [
|
||
{ type: 'inside', xAxisIndex: [0, 1], start: 0, end: 100 },
|
||
{ show: true, xAxisIndex: [0, 1], type: 'slider', bottom: '0%' }
|
||
],
|
||
series: [
|
||
{
|
||
name: '分时价',
|
||
type: 'line',
|
||
xAxisIndex: 0,
|
||
yAxisIndex: 0,
|
||
data: changePercentData,
|
||
smooth: true,
|
||
showSymbol: false,
|
||
lineStyle: { color: lineColor, width: 2 },
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: isUp ? 'rgba(239, 83, 80, 0.3)' : 'rgba(38, 166, 154, 0.3)' },
|
||
{ offset: 1, color: isUp ? 'rgba(239, 83, 80, 0.05)' : 'rgba(38, 166, 154, 0.05)' }
|
||
])
|
||
},
|
||
markLine: {
|
||
symbol: 'none',
|
||
data: [
|
||
// 昨收盘价基准线 (0%)
|
||
{
|
||
yAxis: 0,
|
||
lineStyle: {
|
||
color: '#666',
|
||
type: 'dashed',
|
||
width: 1.5,
|
||
opacity: 0.8
|
||
},
|
||
label: {
|
||
show: true,
|
||
formatter: '昨收盘价',
|
||
position: 'insideEndTop',
|
||
color: '#666',
|
||
fontSize: 12
|
||
}
|
||
},
|
||
...eventMarkLineData
|
||
],
|
||
animation: false
|
||
}
|
||
},
|
||
{
|
||
name: '均价线',
|
||
type: 'line',
|
||
xAxisIndex: 0,
|
||
yAxisIndex: 1,
|
||
data: avgChangePercentData,
|
||
smooth: true,
|
||
showSymbol: false,
|
||
lineStyle: { color: '#FFA500', width: 1 }
|
||
},
|
||
{
|
||
name: '成交量',
|
||
type: 'bar',
|
||
xAxisIndex: 1,
|
||
yAxisIndex: 2,
|
||
data: volumes,
|
||
itemStyle: { color: '#b0c4de', opacity: 0.6 }
|
||
}
|
||
]
|
||
};
|
||
}
|
||
|
||
// 日K线
|
||
if (type === 'daily') {
|
||
const dates = stockData.map(item => item.time || item.date);
|
||
const klineData = stockData.map(item => [item.open, item.close, item.low, item.high]);
|
||
const volumes = stockData.map(item => item.volume);
|
||
|
||
// 计算事件标记线位置（重要修复）
|
||
let eventMarkLineData = [];
|
||
if (originalEventTime && dates.length > 0) {
|
||
const eventMoment = moment(originalEventTime);
|
||
const eventDate = eventMoment.format('YYYY-MM-DD');
|
||
|
||
// 找到事件发生日期或最接近的交易日
|
||
let targetIndex = -1;
|
||
|
||
// 1. 先尝试找到完全匹配的日期
|
||
targetIndex = dates.findIndex(date => date === eventDate);
|
||
|
||
// 2. 如果没有完全匹配，找到第一个大于等于事件日期的交易日
|
||
if (targetIndex === -1) {
|
||
for (let i = 0; i < dates.length; i++) {
|
||
if (dates[i] >= eventDate) {
|
||
targetIndex = i;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 3. 如果事件日期晚于所有交易日，则标记在最后一个交易日
|
||
if (targetIndex === -1 && eventDate > dates[dates.length - 1]) {
|
||
targetIndex = dates.length - 1;
|
||
}
|
||
|
||
// 4. 如果事件日期早于所有交易日，则标记在第一个交易日
|
||
if (targetIndex === -1 && eventDate < dates[0]) {
|
||
targetIndex = 0;
|
||
}
|
||
|
||
if (targetIndex >= 0) {
|
||
let labelText = '事件发生';
|
||
let labelPosition = 'middle';
|
||
|
||
// 根据事件时间和交易日的关系调整标签
|
||
if (eventDate === dates[targetIndex]) {
|
||
if (eventMoment.hour() >= 15) {
|
||
labelText = '事件发生\n(盘后)';
|
||
} else if (eventMoment.hour() < 9 || (eventMoment.hour() === 9 && eventMoment.minute() < 30)) {
|
||
labelText = '事件发生\n(盘前)';
|
||
}
|
||
} else if (eventDate < dates[targetIndex]) {
|
||
labelText = '事件发生\n(前一日)';
|
||
labelPosition = 'start';
|
||
} else {
|
||
labelText = '事件发生\n(影响日)';
|
||
labelPosition = 'end';
|
||
}
|
||
|
||
eventMarkLineData = [{
|
||
name: '事件发生',
|
||
xAxis: targetIndex,
|
||
label: {
|
||
formatter: labelText,
|
||
position: labelPosition,
|
||
color: '#FFD700',
|
||
fontSize: 12,
|
||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||
padding: [4, 8],
|
||
borderRadius: 4
|
||
},
|
||
lineStyle: {
|
||
color: '#FFD700',
|
||
type: 'solid',
|
||
width: 2
|
||
}
|
||
}];
|
||
}
|
||
}
|
||
|
||
return {
|
||
title: {
|
||
text: `${stock.stock_name || stock.stock_code} - 日K线`,
|
||
left: 'center',
|
||
textStyle: { fontSize: 16, fontWeight: 'bold' }
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'cross' },
|
||
formatter: function(params) {
|
||
if (!params || params.length === 0) return '';
|
||
const kline = params[0];
|
||
const volume = params[1];
|
||
if (!kline || !kline.data) return '';
|
||
|
||
let tooltipHtml = `日期: ${kline.axisValue}<br/>开盘: ¥${kline.data[0]}<br/>收盘: ¥${kline.data[1]}<br/>最低: ¥${kline.data[2]}<br/>最高: ¥${kline.data[3]}`;
|
||
|
||
if (volume && volume.data) {
|
||
tooltipHtml += `<br/>成交量: ${Math.round(volume.data/100)}手`;
|
||
}
|
||
|
||
return tooltipHtml;
|
||
}
|
||
},
|
||
grid: [
|
||
{ left: '10%', right: '10%', height: '60%' },
|
||
{ left: '10%', right: '10%', top: '75%', height: '20%' }
|
||
],
|
||
xAxis: [
|
||
{ type: 'category', data: dates, scale: true, boundaryGap: true, gridIndex: 0 },
|
||
{ type: 'category', data: dates, gridIndex: 1, axisLabel: { show: false } }
|
||
],
|
||
yAxis: [
|
||
{ scale: true, splitArea: { show: true }, gridIndex: 0 },
|
||
{ scale: true, gridIndex: 1, axisLabel: { formatter: (value) => Math.round(value/100) + '手' } }
|
||
],
|
||
dataZoom: [
|
||
{ type: 'inside', xAxisIndex: [0, 1], start: 70, end: 100 },
|
||
{ show: true, xAxisIndex: [0, 1], type: 'slider', bottom: '0%', start: 70, end: 100 }
|
||
],
|
||
series: [
|
||
{
|
||
name: 'K线',
|
||
type: 'candlestick',
|
||
yAxisIndex: 0,
|
||
data: klineData,
|
||
markLine: {
|
||
symbol: 'none',
|
||
data: eventMarkLineData,
|
||
animation: false
|
||
},
|
||
itemStyle: {
|
||
color: '#ef5350',
|
||
color0: '#26a69a',
|
||
borderColor: '#ef5350',
|
||
borderColor0: '#26a69a'
|
||
}
|
||
},
|
||
{
|
||
name: '成交量',
|
||
type: 'bar',
|
||
xAxisIndex: 1,
|
||
yAxisIndex: 1,
|
||
data: volumes.map((volume, index) => ({
|
||
value: volume,
|
||
itemStyle: {
|
||
color: stockData[index].close >= stockData[index].open ? '#ef5350' : '#26a69a'
|
||
}
|
||
}))
|
||
}
|
||
]
|
||
};
|
||
}
|
||
|
||
return {};
|
||
};
|
||
|
||
if (!stock) return null;
|
||
|
||
return (
|
||
<Modal isOpen={isOpen} onClose={onClose} size={size}>
|
||
<ModalOverlay />
|
||
<ModalContent maxW="90vw" maxH="90vh" overflow="hidden">
|
||
<ModalHeader pb={4}>
|
||
<VStack align="flex-start" spacing={2}>
|
||
<HStack>
|
||
<Text fontSize="lg" fontWeight="bold">
|
||
{stock.stock_name || stock.stock_code} ({stock.stock_code}) - 股票详情
|
||
</Text>
|
||
{chartData && (
|
||
<Badge colorScheme="blue">{chartData.trade_date}</Badge>
|
||
)}
|
||
</HStack>
|
||
<ButtonGroup size="sm">
|
||
<Button
|
||
variant={chartType === 'timeline' ? 'solid' : 'outline'}
|
||
onClick={() => setChartType('timeline')}
|
||
colorScheme="blue"
|
||
>
|
||
分时线
|
||
</Button>
|
||
<Button
|
||
variant={chartType === 'daily' ? 'solid' : 'outline'}
|
||
onClick={() => setChartType('daily')}
|
||
colorScheme="blue"
|
||
>
|
||
日K线
|
||
</Button>
|
||
</ButtonGroup>
|
||
</VStack>
|
||
</ModalHeader>
|
||
<ModalCloseButton />
|
||
<ModalBody p={0} overflowY="auto" maxH="calc(90vh - 120px)">
|
||
<Box h="400px" w="100%" position="relative">
|
||
{loading && (
|
||
<Flex
|
||
position="absolute"
|
||
top="0" left="0" right="0" bottom="0"
|
||
bg="rgba(255, 255, 255, 0.7)"
|
||
zIndex="10"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
>
|
||
<VStack spacing={4}>
|
||
<CircularProgress isIndeterminate color="blue.300" />
|
||
<Text>加载图表数据...</Text>
|
||
</VStack>
|
||
</Flex>
|
||
)}
|
||
<div ref={chartRef} style={{ height: '100%', width: '100%', minHeight: '500px' }} />
|
||
</Box>
|
||
|
||
{stock?.relation_desc && (
|
||
<Box p={4} borderTop="1px solid" borderTopColor="gray.200">
|
||
<Text fontSize="sm" fontWeight="bold" mb={2}>关联描述:</Text>
|
||
<Text fontSize="sm" color="gray.600">{stock.relation_desc}</Text>
|
||
</Box>
|
||
)}
|
||
|
||
{/* 风险提示 */}
|
||
<Box px={4} pb={4}>
|
||
<RiskDisclaimer variant="default" />
|
||
</Box>
|
||
|
||
{process.env.NODE_ENV === 'development' && chartData && (
|
||
<Box p={4} bg="gray.50" fontSize="xs" color="gray.600">
|
||
<Text fontWeight="bold">调试信息:</Text>
|
||
<Text>数据条数: {chartData.data ? chartData.data.length : 0}</Text>
|
||
<Text>交易日期: {chartData.trade_date}</Text>
|
||
<Text>图表类型: {chartType}</Text>
|
||
<Text>原始事件时间: {eventTime}</Text>
|
||
</Box>
|
||
)}
|
||
</ModalBody>
|
||
</ModalContent>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default StockChartModal; |