一、问题描述
最近使用v-if的时候操作echarts的时候出现了一个奇怪的问题,问题的效果图如下:
本来想弄的效果是,点击true按钮的时候显示圆环图,然后点击false按钮的时候显示一个柱状图,页面初始化的时候,圆环图没有任何问题,但是在点击false显示柱状图之后再点true按钮显示圆环图的时候,就会出现上面的问题。
代码是这样的:
// 两个按钮
<div style="flex: 1">
<el-button-group>
<el-button size="small" type="" @click="openUseAmount">true</el-button>
<el-button size="small" type="" @click="openUseMoney">false</el-button>
</el-button-group>
</div>
// 柱状图和圆环图
<div v-if="visible">
<div id="main_pie" style="width: 100%; height: 298px"></div>
</div>
<div v-else>
<div id="main_bar" style="width: 100%; height: 298px"></div>
</div>
二、出现原因
一开始以为是v-if的问题,后面才发现是echarts的问题,也可以说是自己操作的问题。因为echarts的官方文档写了下面这样一句话。唉!学艺不精啊!!!!!一开始都没怎么注意这句话,直到出现问题之后,后面回头才发现这句话。看文档还是要仔细啊!!!!!
因为我操作两个echarts的时候,初始的方法是各有一个,会分别生成两个实例,然后因为echarts在一个标签里面操作,两个实例都是在同一个canvas上面,就会导致出现上面的情况。
三、解决方法
解决的办法也挺多的。
①使用echarts提供的方法dispose()对实例进行销毁,这个是比较推荐的。就像下面这样。
openUseAmount() {
this.visible = true;
this.pieChart?.dispose();
this.initPie();
},
openUseMoney() {
this.visible = false;
this.barChart?.dispose();
this.initBar();
},
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('main_pie'));
this.pieChart = myChart;
pieChart和barChart都是echarts实例,每次重新调用初始化echarts的方法之前都对实例进行一下销毁。echarts网址:图表容器及大小 - 概念篇 - Handbook - Apache ECharts
②不使用v-if方法操作,使用v-show方法对echarts方法进行操作,v-if和v-show的操作原理是不一样的,v-show会直接将display置为none。也能避免上面的问题,但只能说治标不治本。
当然还有很多其他的方法可以避免上面的问题,也就不一一叙述了。如果有更好的方法,欢迎大家在评论区探讨。