diff --git a/src/components/StockChart/KLineChartModal.tsx b/src/components/StockChart/KLineChartModal.tsx index a5605826..6eb35d47 100644 --- a/src/components/StockChart/KLineChartModal.tsx +++ b/src/components/StockChart/KLineChartModal.tsx @@ -110,21 +110,32 @@ const KLineChartModal: React.FC = ({ // 初始化图表 useEffect(() => { - if (!chartRef.current || !isOpen) return; + if (!isOpen) return; - console.log('[KLineChartModal] 初始化图表...'); + // 延迟初始化,确保 Modal 动画完成后 DOM 已经渲染 + const timer = setTimeout(() => { + if (!chartRef.current) { + console.error('[KLineChartModal] DOM元素未找到,无法初始化图表'); + return; + } - // 创建图表实例(不使用主题,直接在option中配置背景色) - chartInstance.current = echarts.init(chartRef.current); + console.log('[KLineChartModal] 初始化图表...'); - // 监听窗口大小变化 - const handleResize = () => { - chartInstance.current?.resize(); - }; - window.addEventListener('resize', handleResize); + // 创建图表实例(不使用主题,直接在option中配置背景色) + chartInstance.current = echarts.init(chartRef.current); + + console.log('[KLineChartModal] 图表实例创建成功'); + + // 监听窗口大小变化 + const handleResize = () => { + chartInstance.current?.resize(); + }; + window.addEventListener('resize', handleResize); + }, 100); // 延迟100ms等待Modal完全打开 return () => { - window.removeEventListener('resize', handleResize); + clearTimeout(timer); + window.removeEventListener('resize', () => {}); chartInstance.current?.dispose(); chartInstance.current = null; }; @@ -132,15 +143,18 @@ const KLineChartModal: React.FC = ({ // 更新图表数据 useEffect(() => { - if (!chartInstance.current || data.length === 0) { - console.log('[KLineChartModal] 跳过图表更新:', { - hasChart: !!chartInstance.current, - dataLength: data.length, - }); + if (data.length === 0) { + console.log('[KLineChartModal] 无数据,跳过图表更新'); return; } - console.log('[KLineChartModal] 开始更新图表,数据点:', data.length); + const updateChart = () => { + if (!chartInstance.current) { + console.warn('[KLineChartModal] 图表实例不存在'); + return false; + } + + console.log('[KLineChartModal] 开始更新图表,数据点:', data.length); const dates = data.map((d) => d.time); const klineData = data.map((d) => [d.open, d.close, d.low, d.high]); @@ -367,13 +381,27 @@ const KLineChartModal: React.FC = ({ ], }; - chartInstance.current.setOption(option); + chartInstance.current.setOption(option); + console.log('[KLineChartModal] 图表option已设置'); - // 强制resize以确保图表正确显示 - setTimeout(() => { - chartInstance.current?.resize(); - console.log('[KLineChartModal] 图表已设置并resize'); - }, 100); + // 强制resize以确保图表正确显示 + setTimeout(() => { + chartInstance.current?.resize(); + console.log('[KLineChartModal] 图表已resize'); + }, 100); + + return true; + }; + + // 立即尝试更新,如果失败则重试 + if (!updateChart()) { + console.log('[KLineChartModal] 第一次更新失败,200ms后重试...'); + const retryTimer = setTimeout(() => { + updateChart(); + }, 200); + + return () => clearTimeout(retryTimer); + } }, [data, stock]); // 加载数据 diff --git a/src/components/StockChart/TimelineChartModal.tsx b/src/components/StockChart/TimelineChartModal.tsx index ca1aa4d5..8d9698b3 100644 --- a/src/components/StockChart/TimelineChartModal.tsx +++ b/src/components/StockChart/TimelineChartModal.tsx @@ -109,21 +109,32 @@ const TimelineChartModal: React.FC = ({ // 初始化图表 useEffect(() => { - if (!chartRef.current || !isOpen) return; + if (!isOpen) return; - console.log('[TimelineChartModal] 初始化图表...'); + // 延迟初始化,确保 Modal 动画完成后 DOM 已经渲染 + const timer = setTimeout(() => { + if (!chartRef.current) { + console.error('[TimelineChartModal] DOM元素未找到,无法初始化图表'); + return; + } - // 创建图表实例(不使用主题,直接在option中配置背景色) - chartInstance.current = echarts.init(chartRef.current); + console.log('[TimelineChartModal] 初始化图表...'); - // 监听窗口大小变化 - const handleResize = () => { - chartInstance.current?.resize(); - }; - window.addEventListener('resize', handleResize); + // 创建图表实例(不使用主题,直接在option中配置背景色) + chartInstance.current = echarts.init(chartRef.current); + + console.log('[TimelineChartModal] 图表实例创建成功'); + + // 监听窗口大小变化 + const handleResize = () => { + chartInstance.current?.resize(); + }; + window.addEventListener('resize', handleResize); + }, 100); // 延迟100ms等待Modal完全打开 return () => { - window.removeEventListener('resize', handleResize); + clearTimeout(timer); + window.removeEventListener('resize', () => {}); chartInstance.current?.dispose(); chartInstance.current = null; }; @@ -131,15 +142,19 @@ const TimelineChartModal: React.FC = ({ // 更新图表数据 useEffect(() => { - if (!chartInstance.current || data.length === 0) { - console.log('[TimelineChartModal] 跳过图表更新:', { - hasChart: !!chartInstance.current, - dataLength: data.length, - }); + if (data.length === 0) { + console.log('[TimelineChartModal] 无数据,跳过图表更新'); return; } - console.log('[TimelineChartModal] 开始更新图表,数据点:', data.length); + // 如果图表还没初始化,等待200ms后重试(给图表初始化留出时间) + const updateChart = () => { + if (!chartInstance.current) { + console.warn('[TimelineChartModal] 图表实例不存在'); + return false; + } + + console.log('[TimelineChartModal] 开始更新图表,数据点:', data.length); const times = data.map((d) => d.time); const prices = data.map((d) => d.price); @@ -359,13 +374,27 @@ const TimelineChartModal: React.FC = ({ ], }; - chartInstance.current.setOption(option); + chartInstance.current.setOption(option); + console.log('[TimelineChartModal] 图表option已设置'); - // 强制resize以确保图表正确显示 - setTimeout(() => { - chartInstance.current?.resize(); - console.log('[TimelineChartModal] 图表已设置并resize'); - }, 100); + // 强制resize以确保图表正确显示 + setTimeout(() => { + chartInstance.current?.resize(); + console.log('[TimelineChartModal] 图表已resize'); + }, 100); + + return true; + }; + + // 立即尝试更新,如果失败则重试 + if (!updateChart()) { + console.log('[TimelineChartModal] 第一次更新失败,200ms后重试...'); + const retryTimer = setTimeout(() => { + updateChart(); + }, 200); + + return () => clearTimeout(retryTimer); + } }, [data, stock]); // 加载数据