React项目echarts二次封装-只需传进对应的option

一、只需传入对应的option

const AutoChart = props => {
  const chartRef = useRef(null);
  const { option, width = '100%', height = '100%' } = props;

  const [chart, setChart] = React.useState();

  const handleResize = () => {
    return chart?.resize();
  };

  const init = () => {
    if (chart) {
      window.removeEventListener('resize', handleResize);
    }

    const mychart1 = echarts.init(chartRef.current);

    mychart1.setOption(option);
    window.addEventListener('resize', () => {
      mychart1.resize();
      mychart1.clear();
      mychart1.setOption(option);
    });
    setChart(mychart1);
  };

  React.useEffect(
    () => {
      init();
      return () => {
        window.removeEventListener('resize', handleResize);
      };
    },
    [option]
  );

  return <div ref={chartRef} style={{ height, width }} />;
};