```react
// 通用echarts图组件
import { Box } from '@mui/material';
import * as echarts from 'echarts';
import React, { useEffect, useRef } from 'react';
import { useResizeDetector } from 'react-resize-detector';
interface IProps {
option: echarts.EChartsOption;
height?: string;
}
const GeneralEchart: React.FC = ({ option, height = '100%' }) => {
const chartRef = useRef(null);
const chartInstanceRef = useRef<echarts.ECharts>();
const { width, height: boxHeight, ref } = useResizeDetector();
useEffect(() => {
if (!chartInstanceRef.current) {
chartInstanceRef.current = echarts.init(chartRef.current!);
}
const handleResize = () => {
chartInstanceRef.current?.resize();
};
chartInstanceRef.current.setOption(option);
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [option]);
useEffect(() => {
chartInstanceRef.current?.resize(); //监听父容器变化，重新渲染
}, [boxHeight, width]);
return (
<Box ref={ref} sx={{ height: height }}>
<Box sx={{ height: '100%' }} ref={chartRef} />
);
};
export default GeneralEchart;
```
