项目中使用了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展示不出想要的效果。