65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import * as echarts from 'echarts/core';
|
|
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';
|
|
import { BarChart, LineChart, PieChart } from 'echarts/charts';
|
|
import { GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components';
|
|
|
|
echarts.use([
|
|
SVGRenderer,
|
|
BarChart,
|
|
LineChart,
|
|
PieChart,
|
|
GridComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
TitleComponent
|
|
]);
|
|
|
|
interface EchartWrapperProps {
|
|
option: any;
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
export default function EchartWrapper({ option, width, height }: EchartWrapperProps) {
|
|
const chartRef = useRef<any>(null);
|
|
const instanceRef = useRef<any>(null);
|
|
|
|
// Chart initialization and disposal
|
|
useEffect(() => {
|
|
let chart: any;
|
|
if (chartRef.current) {
|
|
chart = echarts.init(chartRef.current, 'light', {
|
|
renderer: 'svg',
|
|
width,
|
|
height,
|
|
});
|
|
instanceRef.current = chart;
|
|
if (option) {
|
|
chart.setOption(option, true);
|
|
}
|
|
}
|
|
|
|
return () => {
|
|
chart?.dispose();
|
|
instanceRef.current = null;
|
|
};
|
|
}, []);
|
|
|
|
// Update options when option prop changes
|
|
useEffect(() => {
|
|
if (instanceRef.current && option) {
|
|
instanceRef.current.setOption(option, true);
|
|
}
|
|
}, [option]);
|
|
|
|
// Handle dynamic resize
|
|
useEffect(() => {
|
|
if (instanceRef.current && width && height) {
|
|
instanceRef.current.resize({ width, height });
|
|
}
|
|
}, [width, height]);
|
|
|
|
return <SvgChart ref={chartRef} />;
|
|
}
|