adapt echarts

client/pnpm-lock.yaml

@@ -53,6 +53,9 @@ dependencies:
   echarts:
     specifier: ^5.4.1
     version: registry.npmmirror.com/echarts@5.4.1
+  echarts-gl:
+    specifier: ^2.0.9
+    version: registry.npmmirror.com/echarts-gl@2.0.9(echarts@5.4.1)
   formidable:
     specifier: ^2.1.1
     version: registry.npmmirror.com/formidable@2.1.1
@@ -6338,6 +6341,12 @@ packages:
     version: 5.0.4
     dev: false
 
+  registry.npmmirror.com/claygl@1.3.0:
+    resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz}
+    name: claygl
+    version: 1.3.0
+    dev: false
+
   registry.npmmirror.com/client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/client-only/-/client-only-0.0.1.tgz}
     name: client-only
@@ -7271,6 +7280,19 @@ packages:
       safe-buffer: registry.npmmirror.com/safe-buffer@5.2.1
     dev: false
 
+  registry.npmmirror.com/echarts-gl@2.0.9(echarts@5.4.1):
+    resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz}
+    id: registry.npmmirror.com/echarts-gl/2.0.9
+    name: echarts-gl
+    version: 2.0.9
+    peerDependencies:
+      echarts: ^5.1.2
+    dependencies:
+      claygl: registry.npmmirror.com/claygl@1.3.0
+      echarts: registry.npmmirror.com/echarts@5.4.1
+      zrender: registry.npmmirror.com/zrender@5.4.1
+    dev: false
+
   registry.npmmirror.com/echarts@5.4.1:
     resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz}
     name: 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

-// 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

-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;

client/src/types/echarts-gl.d.ts

-declare module 'echarts-gl' {
-    export default echarts-gl
-  }
-