react封装Echarts

import * as echarts from "echarts";
import { EChartsOption } from "echarts";
import React, { useEffect, useRef } from "react";

export default function EchartsBox(props: { options: EChartsOption }) {
  const { options } = props;
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const myChart = echarts.init(ref.current as HTMLDivElement);
    myChart.setOption(options, true);

    const resize = () => myChart.resize();
    window.addEventListener("resize", resize);

    return () => {
      resize && window.removeEventListener("resize", resize);
    };
  }, [options]);
  return <div ref={ref} style={{ width: "100%", height: "100%" }}></div>;
}

使用

 <EchartsBox options={qmOptions(props.treeData)}