echarts.js:2218 There is a chart instance already initialized on the dom
时间: 2023-11-17 13:56:40 浏览: 165
这个错误提示是因为在同一个 DOM 元素上重复初始化了 echarts 实例。解决方法是先销毁已有的实例,再重新初始化。
可以使用以下代码销毁已有的实例:
var chartDom = document.getElementById('chart');
var chartInstance = echarts.getInstanceByDom(chartDom);
if (chartInstance) {
chartInstance.dispose();
}
然后再重新初始化:
var myChart = echarts.init(chartDom);
相关问题
log.js:61 [ECharts] There is a chart instance already initialized on the dom.
这个警告提示是因为在代码中获取了两次DOM并进行了初始化,导致已经存在一个图表实例的DOM上再次进行初始化,从而引发警告。解决这个问题有两种方法:
删除重复的初始化代码:在
mounted()
生命周期钩子函数中,删除重复的初始化代码this.mychart = echarts.init(this.$refs.charts)
,即可解决警告问题。使用
echarts.getInstanceByDom()
方法:通过该方法可以获取图表实例的DOM容器上的实例,如果存在实例就直接使用已存在的实例进行编辑,如果不存在则创建新实例。可以修改代码如下:
mounted() {
// 先获取DOM上的实例
let myChart = echarts.getInstanceByDom(this.$refs.charts);
if (myChart == null) {
myChart = echarts.init(this.$refs.charts);
}
// 实时获取,离开销毁
let currentTimer = setInterval(() => {
console.log(this.maxList);
this.getByIdMax();
}, 1000);
this.$once("hook:beforeDestroy", () => {
clearInterval(currentTimer);
currentTimer = null;
console.log("高温预警卡片销毁了");
});
},
以上是两种解决问题的方法,你可以根据具体情况选择其中一种进行调整。
log.js:61 [ECharts] There is a chart instance already initialized on the dom.解决
这个错误提示是因为在同一个 DOM 元素上已经存在一个 ECharts 实例,需要先销毁原来的实例再重新初始化。可以使用 dispose()
方法销毁实例,例如:
var myChart = echarts.init(document.getElementById('myChart'));
// ...
myChart.dispose(); // 销毁实例
myChart = echarts.init(document.getElementById('myChart')); // 重新初始化