Chrome 报警告如下图:
产生原因
使用Echarts插件的时候,多次加载会出现There is a chart instance already initialized on the dom.的警告,表示DOM上已经初始化了一个图表实例。
解决方案
- 方案一
定义一个全局变量,在初始化之前先判断该实例是否存在,若存在,先销毁。
var myChart;//全局变量
function drawChart(){
if (myChart != null && myChart != "" && myChart != undefined) {
myChart.dispose();//销毁
}
myChart = echarts.init(document.getElementById('id'));//初始化
const option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
};
option && myChart.setOption(option);
}
- 方案二
在进行封装的时候,由于id一直在变化,不适合用方案一,于是有了以下方案。
function drawChart(id,data){
let myChart= echarts.getInstanceByDom(document.getElementById(id)); //有的话就获取已有echarts实例的DOM节点。
if (myChart== null) { // 如果不存在,就进行初始化。
myChart= echarts.init(document.getElementById(id));
}
//此处省略数据处理过程
const option = {}
option && myChart.setOption(option);
}
|