1. 在指定的页面中引入特定js文件时

   useEffect(() => {  
   // 动态加载 china.js 脚本  
   const script = document.createElement('script');  
   script.src = '/js/echarts.min.js'; // 指定 echarts.min.js 的路径  
   script.async = true;  
   script.onload = () => {  
       // 确保 echarts.min.js 数据加载完成  
       console.log('echarts.min.js 已加载');  
       ...
   };  
   document.body.appendChild(script);  
   
   
   // 清理副作用：卸载时移除 script 标签  
   return () => {  
       document.body.removeChild(script);  
   };  
   }, []);
   

   需要在public目录下创建js目录，保证文件可通过WEB访问 2. 如果动态引入的文件依赖import引入的库文件，需要把import引入的库文件，注册在windows中

   import React, {useEffect, useRef} from 'react';
   import * as echarts from "echarts";  
   // 将 echarts 挂载到全局 window 对象上  
   if (typeof window !== 'undefined') {  
   window.echarts = echarts;  
   }  
   interface ChinaMapProps {  
   data?: any[];  
   }  
   function ChinaMap(props: ChinaMapProps) {  
   const chartRef = useRef(null); // 用于存储 ECharts 容器引用  
   useEffect(() => {  
       // 动态加载 china.js 脚本  
       const script = document.createElement('script');  
       script.src = '/js/china.js'; // 指定 china.js 的路径  
       script.async = true;  
       script.onload = () => {  
           // 确保 china.js 数据加载完成  
           console.log('china.js 已加载');  
           initChart(); // 初始化图表  
       };  
       document.body.appendChild(script);  
       // 清理副作用：卸载时移除 script 标签  
       return () => {  
           document.body.removeChild(script);  
       };  
   }, []);
   

由于windows中并不存在echarts属性，因此上面的代码注册时编译时会失败，需要在/src/global.d.ts文件加入属性

// global.d.ts  
declare global {  
    interface Window {  
        echarts: any; // 将 echarts 挂载到 window 对象上  
    }  
}  
  
export {}; // 防止该文件被当作模块处理