Initial commit

components/EchartWrapper.tsx

@@ -0,0 +1,64 @@
+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} />;
+}