发布到线上后，刷新浏览器echarts空白

问题：

项目中用到echrts图表，在本地调试没有问题，刷新浏览器，echarts均可正常显示。
但是发布到线上后，从tab切换页面echarts可正常显示，在当前页刷新浏览器后echarts会空白，并且控制台无报错。

解决：

原因是当刷新浏览器时，echartsData改变后window.echarts还未加载完成。
此处添加相关判断，如果window.echarts未加载完成，则再次执行echartsInit函数。

注意：

echartsInit函数需使用setTimeout延迟操作，否则会导致递归操作报错 “Maximum call stack size exceeded”

useEffect(() => {
  const echartsInit = () => setTimeout(() => { // setTimeout重点
    if (window.echarts && document.getElementById('myChart')) {
      let myChart = window.echarts.init(document.getElementById('myChart'))
      myChart.clear();

      const legendData = echartsData ? echartsData.legendData : [];
      const seriesData = echartsData ? echartsData.seriesData  : [];

      let option = {
        title: {
          text: '雷达图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legendData,
          left: '3%',
          top: 'center',
          orient: 'vertical'
        },
        radar: {
          indicator: [
            { name: '最大值', color: '#666' },
            { name: '总运行台时', color: '#666' },
            { name: '出水流量', color: '#666' },
            { name: '次数', color: '#666' },
          ],
          center: ['50%', '50%'],
        },
        series: [
          {
            name: '',
            type: 'radar',
            label: {
              show: true,
            },
            data: seriesData
          }
        ]
      };

      setTimeout(myChart.setOption(option), 50); // 重点

      window.addEventListener('resize', () => {
        myChart && myChart.resize();
      });
      return () => {
        window.removeEventListener('resize', () => {
          myChart && myChart.resize();
        });
      }
    } else {
      echartsInit(); // 重点
    }
  }, 100);

  echartsInit();
        
}, [JSON.stringify(echartsData)])