由于项目中二次封装了echarts折线图,并且父组件通过选择不同时间,像后端请求不同数据,显示在折线图上,频繁切换会出现“There is a chart instance already initialized on the dom.”的警告,在网络上找办法后,解决了这个问题。
这个问题的出现在于,在一张表上渲染不同数据,其实dom已经存在了,但是我们在每次数据发生改变的时间都重新进行了一次渲染,导致出现警告
解决办法如下:
<template>
<div ref="myEchart"></div>
</template>
<script setup>
const myEchart = ref(null);
// 初始化Echarts
const init = () => {
// 判断当前echarts是否存在
let myChart = echarts.getInstanceByDom(myEchart.value);
if (myChart == null) {
myChart = echarts.init(myEchart.value);
}
var option;
option = {
......
};
option && myChart.setOption(option);
};
onMounted(() => {
init();
});
</script>