解决 ECharts 组件中多个 ID 重复问题

在封装 ECharts 组件时，如果多个组件实例使用相同的 id="myChart" 会导致 DOM 冲突，ECharts 无法正确渲染。以下是几种解决方案：

方案1：使用动态ID（推荐）

// React 示例
function MyChartComponent() {
  const chartId = useRef(`chart-${Math.random().toString(36).substr(2, 9)}`);
  
  useEffect(() => {
    const chart = echarts.init(document.getElementById(chartId.current));
    // 配置和渲染图表
    chart.setOption({/*...*/});
    
    return () => chart.dispose(); // 组件卸载时销毁
  }, []);

  return 
;
}

方案2：通过 ref 直接引用DOM

function MyChartComponent() {
  const chartRef = useRef(null);
  
  useEffect(() => {
    const chart = echarts.init(chartRef.current);
    chart.setOption({/*...*/});
    
    return () => chart.dispose();
  }, []);

  return 
;
}

方案3：使用UUID库生成唯一ID

npm install uuid

import { v4 as uuidv4 } from 'uuid';

function MyChartComponent() {
  const [chartId] = useState(`chart-${uuidv4()}`);
  
  useEffect(() => {
    const chart = echarts.init(document.getElementById(chartId));
    // ...
  }, []);

  return 
;
}

方案4：通过父组件传递唯一ID

// 父组件
function Parent() {
  return (
    <>
      
      
    
  );
}

// 子组件
function MyChartComponent({ uniqueId }) {
  useEffect(() => {
    const chart = echarts.init(document.getElementById(uniqueId));
    // ...
  }, []);
  
  return 
;
}

最佳实践建议

1. 优先使用ref方案：避免直接操作DOM，更符合React/Vue的设计哲学
2. 组件卸载时销毁实例：防止内存泄漏
3. 响应式处理：添加resize事件监听

   useEffect(() => {
     const chart = echarts.init(chartRef.current);
     const handleResize = () => chart.resize();
     
     window.addEventListener('resize', handleResize);
     return () => {
       window.removeEventListener('resize', handleResize);
       chart.dispose();
     };
   }, []);
   

4. 封装成可复用组件：

   function EChart({ option, style }) {
     const chartRef = useRef(null);
     
     useEffect(() => {
       const chart = echarts.init(chartRef.current);
       chart.setOption(option);
       
       return () => chart.dispose();
     }, [option]);
     
     return 
   ;
   }
   

这些方案都能有效解决ID重复问题，选择哪种取决于你的具体需求和项目架构。