73 lines
1.7 KiB
JavaScript
73 lines
1.7 KiB
JavaScript
// 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"
|
||
/>
|
||
);
|
||
};
|