由于项目中二次封装了echarts折线图,并且选择不同时间,需要向后端请求不同数据,显示在折线图上,频繁切换会出现“There is a chart instance already initialized on the dom.”的警告,在csdn上找办法后,解决了这个问题。
这个问题的出现在于,在一张表上渲染不同数据,其实dom已经存在了,但是我们在每次数据发生改变的时间都重新进行了一次渲染,导致出现警告。
解决办法如下:
<template>
<div class="line-chart">
<!-- 折线图部分 -->
<div ref="lineChartRef" class="line-chart-box"></div>
</div>
</template>
methods: {
// 初始化图表
initChart() {
// 基于准备好的dom,初始化echarts实例
const lineRef = this.$refs.lineChartRef;
// const myChart = echarts.init(lineRef); // 原本代码
//检测是否已经存在echarts实例,如果不存在,则不再去初始化
let myChart = echarts.getInstanceByDom(lineRef);
//如果为空 则正常进行渲染 反之 不再进行初始化
if (myChart == null) {
myChart = echarts.init(lineRef);
}
// 绘制图表
meChart.setOption(this.option)
}
}
其中将原本的const myChart = echarts.init(lineRef);
换成下面的
//检测是否已经存在echarts实例,如果不存在,则不再去初始化
let myChart = echarts.getInstanceByDom(lineRef);
//如果为空 则正常进行渲染 反之 不再进行初始化
if (myChart == null) {
myChart = echarts.init(lineRef);
}
就ok了