解决 React 中 ECharts 的 “There is a chart instance already initialized on the dom“ 警告-CSDN博客

本文链接：https://blog.csdn.net/wusandaofwy/article/details/146981195

问题描述

在 React 项目中使用 ECharts 时，你可能会遇到以下警告：

[ECharts] There is a chart instance already initialized on the dom. Error Component Stack

这个警告通常发生在组件重新渲染时，ECharts 检测到同一个 DOM 容器上已经存在一个图表实例。如果不正确处理，可能会导致内存泄漏或图表显示异常。

问题原因

在 React 中，这个警告通常由以下情况引起：

组件重新渲染：当组件 props 或 state 变化导致重新渲染时
未正确销毁旧实例：在重新初始化图表前没有销毁之前的实例
useEffect 依赖项处理不当：导致图表被重复初始化

解决方案

1. 基本解决方案 - 确保销毁旧实例

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

function EChartComponent({ options }) {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(() => {
    // 初始化图表
    if (chartRef.current) {
      // 如果已有实例，先销毁
      if (chartInstance.current) {
        chartInstance.current.dispose();
      }
      
      // 创建新实例
      chartInstance.current = echarts.init(chartRef.current);
      chartInstance.current.setOption(options);
    }

    // 清理函数
    return () => {
      if (chartInstance.current) {
        chartInstance.current.dispose();
        chartInstance.current = null;
      }
    };
  }, [options]); // 依赖项

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
}

export default EChartComponent;

2. 高级解决方案 - 使用自定义 Hook

我们可以创建一个可重用的自定义 Hook 来管理 ECharts 实例：

import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

function useEChart(chartRef, options) {
  const chartInstance = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      // 初始化或更新图表
      if (!chartInstance.current) {
        chartInstance.current = echarts.init(chartRef.current);
      }
      chartInstance.current.setOption(options);
    }

    // 处理窗口大小变化
    function handleResize() {
      chartInstance.current?.resize();
    }

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      chartInstance.current?.dispose();
      chartInstance.current = null;
    };
  }, [options, chartRef]);

  return chartInstance;
}

function EChartComponent({ options }) {
  const chartRef = useRef(null);
  useEChart(chartRef, options);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
}

export default EChartComponent;

3. 性能优化 - 避免不必要的重新渲染

如果 options 是复杂对象，可以使用 useMemo 来优化：

import React, { useEffect, useRef, useMemo } from 'react';
import * as echarts from 'echarts';

function EChartComponent({ data }) {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  // 使用 useMemo 优化 options 计算
  const options = useMemo(() => ({
    // 你的图表配置
    xAxis: {
      type: 'category',
      data: data.categories
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: data.values,
      type: 'line'
    }]
  }), [data]); // 只有当 data 变化时才重新计算

  useEffect(() => {
    if (chartRef.current) {
      if (chartInstance.current) {
        chartInstance.current.dispose();
      }
      chartInstance.current = echarts.init(chartRef.current);
      chartInstance.current.setOption(options);
    }

    return () => {
      chartInstance.current?.dispose();
    };
  }, [options]);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
}

常见问题解答

Q: 为什么需要手动销毁图表实例？

A: ECharts 实例会占用内存并监听事件，如果不销毁会导致内存泄漏。特别是在 React 组件卸载时，必须清理这些资源。

Q: 如何避免图表在每次 props 变化时都重新初始化？

A: 可以通过比较新旧 options 来决定是否需要重新初始化：

useEffect(() => {
  if (chartRef.current) {
    if (!chartInstance.current) {
      chartInstance.current = echarts.init(chartRef.current);
    }
    
    // 只有 options 真正变化时才更新
    if (!deepEqual(chartInstance.current.getOption(), options)) {
      chartInstance.current.setOption(options);
    }
  }
  
  // ...
}, [options]);

Q: 如何处理多个图表实例？

A: 可以为每个图表使用单独的 ref 和实例变量：

const chartRef1 = useRef(null);
const chartRef2 = useRef(null);
const chartInstance1 = useRef(null);
const chartInstance2 = useRef(null);

// 分别初始化和销毁