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;
+
+    // 延迟初始化，确保 Modal 动画完成后 DOM 已经渲染
+    const timer = setTimeout(() => {
+      if (!chartRef.current) {
+        console.error('[KLineChartModal] DOM元素未找到，无法初始化图表');
+        return;
+      }
 
       console.log('[KLineChartModal] 初始化图表...');
 
       // 创建图表实例（不使用主题，直接在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,14 +143,17 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
 
   // 更新图表数据
   useEffect(() => {
-    if (!chartInstance.current || data.length === 0) {
+    if (data.length === 0) {
-      console.log('[KLineChartModal] 跳过图表更新:', {
+      console.log('[KLineChartModal] 无数据，跳过图表更新');
-        hasChart: !!chartInstance.current,
-        dataLength: data.length,
-      });
       return;
     }
 
+    const updateChart = () => {
+      if (!chartInstance.current) {
+        console.warn('[KLineChartModal] 图表实例不存在');
+        return false;
+      }
+
       console.log('[KLineChartModal] 开始更新图表，数据点:', data.length);
 
     const dates = data.map((d) => d.time);
@@ -368,12 +382,26 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
     };
 
       chartInstance.current.setOption(option);
+      console.log('[KLineChartModal] 图表option已设置');
 
       // 强制resize以确保图表正确显示
       setTimeout(() => {
         chartInstance.current?.resize();
-      console.log('[KLineChartModal] 图表已设置并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;
+
+    // 延迟初始化，确保 Modal 动画完成后 DOM 已经渲染
+    const timer = setTimeout(() => {
+      if (!chartRef.current) {
+        console.error('[TimelineChartModal] DOM元素未找到，无法初始化图表');
+        return;
+      }
 
       console.log('[TimelineChartModal] 初始化图表...');
 
       // 创建图表实例（不使用主题，直接在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,14 +142,18 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
 
   // 更新图表数据
   useEffect(() => {
-    if (!chartInstance.current || data.length === 0) {
+    if (data.length === 0) {
-      console.log('[TimelineChartModal] 跳过图表更新:', {
+      console.log('[TimelineChartModal] 无数据，跳过图表更新');
-        hasChart: !!chartInstance.current,
-        dataLength: data.length,
-      });
       return;
     }
 
+    // 如果图表还没初始化，等待200ms后重试（给图表初始化留出时间）
+    const updateChart = () => {
+      if (!chartInstance.current) {
+        console.warn('[TimelineChartModal] 图表实例不存在');
+        return false;
+      }
+
       console.log('[TimelineChartModal] 开始更新图表，数据点:', data.length);
 
     const times = data.map((d) => d.time);
@@ -360,12 +375,26 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
     };
 
       chartInstance.current.setOption(option);
+      console.log('[TimelineChartModal] 图表option已设置');
 
       // 强制resize以确保图表正确显示
       setTimeout(() => {
         chartInstance.current?.resize();
-      console.log('[TimelineChartModal] 图表已设置并resize');
+        console.log('[TimelineChartModal] 图表已resize');
       }, 100);
+
+      return true;
+    };
+
+    // 立即尝试更新，如果失败则重试
+    if (!updateChart()) {
+      console.log('[TimelineChartModal] 第一次更新失败，200ms后重试...');
+      const retryTimer = setTimeout(() => {
+        updateChart();
+      }, 200);
+
+      return () => clearTimeout(retryTimer);
+    }
   }, [data, stock]);
 
   // 加载数据