v-if switch el-tabs load ECharts error problem (1)

1. Project requirements:

        The el-tabs components of echarts and elementUI are used in the vue project; click the button on the same page, and load two different tabs (tabsA and tabsB) through v-if switching; the width of the div used for drawing in tabsA is 100% ;The width of the div used for drawing in tabsB is 50%

2. Description of the phenomenon:

        When switching from tabsA to tabsB, the size of the div changes, but the data of the Echarts graph inside the div changes, but the size of the graph is still the size before the switch.

3. Analysis:

        The two tabs components are switched, the Echart diagram and the data diagram are updated, but the div style wrapping the Echart diagram is not updated. The inspection element finds that the css is updated, but the page does not seem to be updated, and it is updated after refreshing again;

        Before refreshing, the dom element does not seem to be destroyed, which means that when two identical components are switched through v-if, the problem of component reuse and partial unloading will occur; the div used for drawing in the tab-pane is reused (EChart error) ;

Fourth, the solution:

  When creating multiple instances in the same dom, you need to destroy the previous one and create the latter one.

//1、销毁前一个实例   
this.$echarts.init(document.getElementById('echarts')).dispose();    
或 
this.$echarts.dispose(document.getElementById('echarts'));

//2、构建下一个实例
const myEcharts = this.$echarts.init(document.getElementById('echarts'));    

//3、然后对myEcharts进行setOption之类的操作就可以

For related questions, please see:

Next v-if switch el-tabs to load ECharts error problem (2)