adapt echarts

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;