agent功能开发增加MCP后端

src/components/ChatBot/EChartsRenderer.js

@@ -0,0 +1,72 @@
+// src/components/ChatBot/EChartsRenderer.js
+// ECharts 图表渲染组件
+
+import React, { useEffect, useRef } from 'react';
+import { Box, useColorModeValue } from '@chakra-ui/react';
+import * as echarts from 'echarts';
+
+/**
+ * ECharts 图表渲染组件
+ * @param {Object} option - ECharts 配置对象
+ * @param {number} height - 图表高度（默认 400px）
+ */
+export const EChartsRenderer = ({ option, height = 400 }) => {
+  const chartRef = useRef(null);
+  const chartInstance = useRef(null);
+  const bgColor = useColorModeValue('white', 'gray.800');
+
+  useEffect(() => {
+    if (!chartRef.current || !option) return;
+
+    // 初始化图表
+    if (!chartInstance.current) {
+      chartInstance.current = echarts.init(chartRef.current);
+    }
+
+    // 设置默认主题配置
+    const defaultOption = {
+      backgroundColor: 'transparent',
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      ...option,
+    };
+
+    // 设置图表配置
+    chartInstance.current.setOption(defaultOption, true);
+
+    // 响应式调整大小
+    const handleResize = () => {
+      chartInstance.current?.resize();
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      // chartInstance.current?.dispose(); // 不要销毁，避免重新渲染时闪烁
+    };
+  }, [option]);
+
+  // 组件卸载时销毁图表
+  useEffect(() => {
+    return () => {
+      chartInstance.current?.dispose();
+      chartInstance.current = null;
+    };
+  }, []);
+
+  return (
+    <Box
+      ref={chartRef}
+      width="100%"
+      height={`${height}px`}
+      bg={bgColor}
+      borderRadius="md"
+      boxShadow="sm"
+    />
+  );
+};