When switching the TAB TAB,display is None, so width: 100% no inheritable items, cut to 100px by echarts’s own method. Checked a lot of information, summarized as follows;

1, You can use v-if to switch display, rerender rules (verified, yes)

2. If v-if is used to switch the display, it still cannot achieve 100% integration. Obtain the width and height of the parent and assign the value to the div of the Echart icon. Then use the resize() function, and that’s basically it (verified, ok)

eg:

<div :style={width: width, height: height}> <div ref="echart" class="echart-box"></div> </div> var mychart = null; this.$nextTick(() => { mychart = this.$refs.echart; mychart.style.width = width; Mychart. Style. Height = height; // The height of the outer div // then set echart's option.... mychart.resize(); })Copy the code

3. Add lazy to tag (not validated)

 <div :laze="true"> </div>
Copy the code