如何在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);