What is the effect of vuejs v-show on the display of echarts?

specific requirements are as follows: (data space-time in option when mounting, and filling in during initialization)

clipboard.png

:

clipboard.png

:

clipboard.png

echarts

clipboard.png

"" "" ,

clipboard.png

clipboard.png

:<section id="myChart"></section>
May.22,2021

look at this

is it difficult for Baidu to take a look?


cause of the problem:
1. V-show controls the hiding and display attributes of elements, namely: display:none | block; For static elements and data that do not need to be re-rendered
2. V-if renders only when it is needed. This element does not exist in the page before rendering, and the various attributes of the corresponding element
3 and < section id= "myChart" > < / section > are also covered with a layer of div,. The div is controlled by v-if, so the echarts blank is displayed

when it is expanded again.

Summary: situations that cause echarts to hide and display switch div blanks:
1, such as: "uneven" links, that is, caused by highly incorrect acquisition;
2, not echarts bound v-if not re-rendered;
3, that is, in my case, caused by careless nesting of v-if and v-show;

Menu