如何在React项目中使用Echarts

import * as echarts from "echarts";
import type { ECharts } from "echarts";
import { memo, useEffect, useRef } from "react";
import { CharBox, Chart } from "./style";

const LineChart = () => {
const chartRef = useRef<HTMLDivElement | null>(null);
const chartInstance = useRef<ECharts | null>(null);

useEffect(() => {
if (chartRef.current) {
chartInstance.current = echarts.init(chartRef.current);

chartInstance.current.setOption({
tooltip: {},
xAxis: {
data: [
"2026-01-01",
"2026-01-02",
"2026-01-29",
"2026-01-30",
],
},
yAxis: {},
series: [
{
name: "销量",
type: "line",
data: [5, 20, 10, 20],
smooth: true,
areaStyle: {
color: '#f00'
}
},
{
name: "销量2",
type: "line",
data: [10, 10, 20, 5, 20, 36, 10, 10, 20, 5, 10, 10, 20, 5, 20, 36, 10, 10, 20, 5, 10, 10, 20, 5, 20, 36, 10, 10, 20, 5],
smooth: true
},
],
});
}
}, [chartRef]);

useEffect(() => {
window.addEventListener("resize", resize);
return () => {
window.removeEventListener("resize", resize);
};
}, []);

const resize = () => {
chartInstance.current?.resize({
animation: { duration: 300 },
});
};

return (



);
};

export default memo(LineChart);