React18中使用echarts.警告：There is a chart instance already initialized on the dom.

在 React 中使用 echarts，我们一般会将图表封装成公共组件，如下我们封装成 Bar 组件：

// 封装图表 Bar 组件
import { useRef, useEffect } from "react";
import * as echarts from "echarts";

function Bar({ title, xData, yData, style }) {
  const domRef = useRef();
  // 执行初始化的函数
  useEffect(() => {
    const current = domRef.current;
    const chartInit = () => {
      const myChart = echarts.init(current);
      // 绘制图表
      myChart.setOption({
        title: {
          text: title,
        },
        tooltip: {},
        xAxis: {
          data: xData,
        },
        yAxis: {},
        series: [
          {
            name: "满意度",
            type: "bar",
            data: yData,
          },
        ],
      });
    };
    chartInit();
  }, [title, xData, yData]);

  return (
    <div>
      {/* 准备一个挂载节点 */}
      <div ref={domRef} style={style}></div>
    </div>
  );
}

export default Bar;

我们使用 useRef 这个 hooks 来获取当前的 dom，这里把它定义为 current，然后将 current 作为参数传入 echarts.init() 进行初始化。

这样写是可以运行的，但是控制台抛出了一个警告:

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

翻译过来就是 dom 上已经初始化了一个图表实例。

那么在重绘图表时，我们要把之前已经渲染好的图表清空。在 useEffect 中我们可以这样实现：

useEffect(() => {
    // 此处省略，和上面一样
    chartInit();
    return () => {
      echarts.dispose(current);
    };
  }, [title, xData, yData]);

useEffect 是可以 return 的，返回一个函数，这个函数称为清理函数。在这个函数中，我们使用echarts.dispose(current) 将实例移除。这样控制台警告就消失了。

通过这一特性我们可以模拟类式组件中 componentWillUnmount 这个钩子函数，当组件被销毁时执行清理函数。

• echarts官方文档：https://echarts.apache.org/zh/api.html#echarts.dispose