解决vue项目中引用echarts出的现“There is a chart instance already initialized on the dom.”警告的问题
判断mychar是否已经实例化,如果已经实例化过了,则不必进行多次实例化。
·
使用Echarts插件的加载柱状图或折线图时候,当多次加载数据,进行数据更新渲染时,会出现There is a chart instance already initialized on the dom.的警告,意思是DOM上已经初始化了一个图表实例。
- 解决方法1:
在使用Echarts插件的方法外面定义一个全局变量(注意:一定得是全局变量),然后在插件使用的方法内,添加判断,调用eChart.dispose()方法先将图表销毁,然后再初始化就不会出现警告了。
let myChart;//全局变量
function rate_fold(comPany,dataMon,nowSeries){
if myChart!= null && myChart != "" && myChart != undefined) {
myChart.dispose();//销毁
}
myChart = echarts.init(document.getElementById('box1'));//初始化
let option = {title: {text: "大用户成功率"},tooltip: {trigger: 'axis'},
legend: {data: comPany,orient:'vertical',x: 'right',y: 'center'},
calculable: true,xAxis: [{type: 'category',boundaryGap: false,
data: dataMon,axisLabel: {rotate: 50}}],
yAxis: [{type: 'value',max: 100,min: 98,splitNumber:7}],
series: nowSeries};
myChart.setOption(option);
}
2.解决方法2:
判断mychar是否已经实例化,如果已经实例化过了,则不必进行多次实例化。
//检测是否已经存在echarts实例,如果不存在,则不再去初始化
let myChart = this.$echarts.getInstanceByDom(
this.$refs[this.chartObj.type]
);
if (myChart == null) {
myChart = this.$echarts.init(this.$refs[this.chartObj.type]);
}
myChart.setOption(this.option);
更多推荐
已为社区贡献6条内容
所有评论(0)