由于项目中二次封装了echarts折线图,并且父组件通过选择不同时间,像后端请求不同数据,显示在折线图上,频繁切换会出现“There is a chart instance already initialized on the dom.”的警告,在网络上找办法后,解决了这个问题。
这个问题的出现在于,在一张表上渲染不同数据,其实dom已经存在了,但是我们在每次数据发生改变的时间都重新进行了一次渲染,导致出现警告
解决办法如下:
两种都可以:
1、id绑定
// 检测是否已经存在echarts实例,如果不存在,则不再去初始化
this.event_chart = echarts.getInstanceByDom(
document.getElementById('eventTrend')
)
// 如果为空 则正常进行渲染 反之 不再进行初始化
if (this.event_chart == null) {
this.event_chart = echarts.init(document.getElementById('eventTrend'))
}
2、ref绑定
this.cake_chart = echarts.getInstanceByDom(
this.$refs.riskLevel
)
// 如果为空 则正常进行渲染 反之 不再进行初始化
if (this.cake_chart == null) {
this.cake_chart = echarts.init(this.$refs.riskLevel)
}