adapt echarts

client/src/components/ChatBox/index.tsx

@@ -519,7 +519,7 @@ const ChatBox = (
   return (
     <Flex flexDirection={'column'} h={'100%'}>
       <Box ref={ChatBoxRef} flex={'1 0 0'} h={0} w={'100%'} overflow={'overlay'} px={[4, 0]} pb={3}>
-        <Box maxW={['100%', '92%']} h={'100%'} mx={'auto'}>
+        <Box id="chat-container" maxW={['100%', '92%']} h={'100%'} mx={'auto'}>
           {showEmpty && <Empty />}
 
           {!!welcomeText && (

client/src/components/Markdown/img/EChartsCodeBlock.tsx

@@ -1,26 +1,64 @@
-// EChartsCodeBlock.tsx
-
-import React, { useMemo } from 'react';
-import EChartsRenderer from './EChartsRenderer';
+import React, { useEffect, useRef, useState } from 'react';
 import * as echarts from 'echarts';
+import type { ECharts } from 'echarts';
+import { Box, Skeleton } from '@chakra-ui/react';
 
+const EChartsCodeBlock = ({ code }: { code: string }) => {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const eChart = useRef<ECharts>();
+  const [option, setOption] = useState<any>();
+  const [width, setWidth] = useState(400);
 
-interface EChartsCodeBlockProps {
-  code: string;
-}
+  useEffect(() => {
+    const clientWidth = document.getElementById('chat-container')?.clientWidth || 500;
+    setWidth(clientWidth * 0.9);
+    setTimeout(() => {
+      eChart.current?.resize();
+    }, 100);
+  }, []);
 
-const EChartsCodeBlock: React.FC<EChartsCodeBlockProps> = ({ code }) => {
-  const getOption = useMemo(() => {
+  useEffect(() => {
+    let option;
     try {
-      const optionFunction = new Function("echarts",'"use strict";' + code + '; return getChartOption;');
-      return optionFunction(echarts); // 添加 echarts 参数
-    } catch (error) {
-      console.error('Error parsing ECharts code:', '\n', error, '\n', 'Code:', code);
-      return null;
+      option = JSON.parse(code.trim());
+      option = {
+        ...option,
+        toolbox: {
+          show: true,
+          feature: {
+            saveAsImage: {}
+          }
+        }
+      };
+      setOption(option);
+    } catch (error) {}
+
+    if (!option) return;
+
+    (async () => {
+      // @ts-ignore
+      await import('echarts-gl');
+    })();
+
+    if (chartRef.current) {
+      eChart.current = echarts.init(chartRef.current);
+      eChart.current.setOption(option);
+      eChart.current?.resize();
     }
+
+    return () => {
+      if (eChart.current) {
+        eChart.current.dispose();
+      }
+    };
   }, [code]);
 
-  return getOption ? <EChartsRenderer getOption={getOption} /> : null;
+  return (
+    <Box overflowX={'auto'}>
+      <Box h={'400px'} minW={'400px'} w={`${width}px`} ref={chartRef} />
+      {!option && <Skeleton isLoaded={true} fadeDuration={2} h={'400px'} w={`400px`}></Skeleton>}
+    </Box>
+  );
 };
 
 export default EChartsCodeBlock;

client/src/components/Markdown/img/EChartsRenderer.tsx

@@ -1,35 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import { ECharts } from 'echarts';
-
-interface EChartsRendererProps {
-  getOption: () => any;
-}
-
-
-const EChartsRenderer: React.FC<EChartsRendererProps> = ({ getOption }) => {
-  const chartRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    let chartInstance: ECharts | null = null;
-
-    (async () => {
-      const echarts = await import('echarts');
-      await import('echarts-gl');
-      if (chartRef.current) {
-        chartInstance = echarts.init(chartRef.current, { renderer: 'svg', ssr: true });
-        const option = getOption();
-        chartInstance.setOption(option);
-      }
-    })();
-
-    return () => {
-      if (chartInstance) {
-        chartInstance.dispose();
-      }
-    };
-  }, [getOption]);
-
-  return <div style={{ width: '100%', height: '400px', minWidth: '600px' }} ref={chartRef} />;
-};
-
-export default EChartsRenderer;