增加对echarts图表的支持 (#249)

* 增加对echarts图表的支持

* 增加对echarts的支持

client/package.json

@@ -25,6 +25,7 @@
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "formidable": "^2.1.1",
     "framer-motion": "^9.0.6",
     "hyperdown": "^2.4.29",

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

@@ -0,0 +1,26 @@
+// EChartsCodeBlock.tsx
+
+import React, { useMemo } from 'react';
+import EChartsRenderer from './EChartsRenderer';
+import * as echarts from 'echarts';
+
+
+interface EChartsCodeBlockProps {
+  code: string;
+}
+
+const EChartsCodeBlock: React.FC<EChartsCodeBlockProps> = ({ code }) => {
+  const getOption = useMemo(() => {
+    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;
+    }
+  }, [code]);
+
+  return getOption ? <EChartsRenderer getOption={getOption} /> : null;
+};
+
+export default EChartsCodeBlock;

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

@@ -0,0 +1,35 @@
+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/components/Markdown/index.tsx

@@ -14,6 +14,7 @@ import CodeLight from './CodeLight';
 const MermaidCodeBlock = dynamic(() => import('./img/MermaidCodeBlock'));
 const MdImage = dynamic(() => import('./img/Image'));
 const ChatGuide = dynamic(() => import('./chat/Guide'));
+const EChartsCodeBlock = dynamic(() => import('./img/EChartsCodeBlock'));
 
 function Code({ inline, className, children }: any) {
   const match = /language-(\w+)/.exec(className || '');
@@ -26,7 +27,9 @@ function Code({ inline, className, children }: any) {
   if (codeType === 'guide') {
     return <ChatGuide text={String(children)} />;
   }
-
+  if (codeType === 'echarts') {
+    return <EChartsCodeBlock code={String(children)} />;
+  }
   return (
     <CodeLight className={className} inline={inline} match={match}>
       {children}

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

@@ -0,0 +1,4 @@
+declare module 'echarts-gl' {
+    export default echarts-gl
+  }
+