update pay function

src/components/StockChart/KLineChartModal.tsx

@@ -110,21 +110,32 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
 
   // 初始化图表
   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<KLineChartModalProps> = ({
 
   // 更新图表数据
   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<KLineChartModalProps> = ({
       ],
     };
 
-    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]);
 
   // 加载数据

src/components/StockChart/TimelineChartModal.tsx

@@ -109,21 +109,32 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
 
   // 初始化图表
   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<TimelineChartModalProps> = ({
 
   // 更新图表数据
   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<TimelineChartModalProps> = ({
       ],
     };
 
-    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]);
 
   // 加载数据