大屏项目(三)

在清理函数里必须及时销毁图表实例

import * as echarts from "echarts";
const Box1 = () => {
  const chartRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    if (chartRef.current) {
      const chart = echarts.init(chartRef.current);
      const options = {};
      chart.setOption(options);
      return () => {
        // 清理图表实例
        chart.dispose();
      };
    }
  }, []);
  return (
    <div className="box">
      <BorderBox1>
        <div
          ref={chartRef}
          className="chart-container"
          style={{ width: "100%", height: "100%" }}
        ></div>
      </BorderBox1>
    </div>
  );
};

export default Box1;