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

2023-12-28 16:00:21

一、只需传入对应的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 }} />;
};

文章来源:https://blog.csdn.net/m0_53001289/article/details/135269671
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。