[React+Echarts]There is a chart instance already initialized on the dom.黄色警告

186 阅读1分钟

项目中使用了React + Echarts. 在userEffect初始化chart,因为图表比较复杂,做了分批请求接口数据。每次数据有变化会执行userEffect,所以会出现There is a chart instance already initialized on the dom.黄色警告。 解决方案是echarts.init之前先用echarts.getInstanceByDom判断是否已经创建该dom的实例

useEffect(() => {
    // 创建一个echarts实例,返回echarts实例。不能在单个容器中创建多个echarts实例
    let chart = echarts.getInstanceByDom(chartRef.current);
    if (!chart) {
      // 如果不存在则创建
      chart = echarts.init(chartRef.current);
    }
    
    ......
    // 先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据
    chart.setOption(option);

    // 组件卸载
    return () => {
      // myChart.dispose() 销毁实例。实例销毁后无法再被使用
      chart?.dispose();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedList]);

正常情况可以一直复用一个实例,但有些场景必须要销毁实例,例如多场景series下如果有增减,需要销毁再重新init才会生效,不然可能series不会重新绘制,echarts展示不出想要的效果。