v-show echarts宽高问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了v-show echarts宽高问题相关的知识,希望对你有一定的参考价值。

参考技术A 将v-show改成 v-if

v-show控制的是display:none或者display:block,但是echarts这个div,是存在于结构里面的,所以,当用v-show控制隐藏时,canvas就是100px,当v-show控制显示的时候,也只是改变了display这个css属性而已,canvas的width也就维持了100px

v-if时,echarts这个div是不存在结构里的,当v-if控制显示的时候,echarts开始初始化,那么宽度就正常了

以上是关于v-show echarts宽高问题的主要内容,如果未能解决你的问题,请参考以下文章

echarts使用v-if或v-show不显示、加载一半的问题

echarts图表页面加载隐藏图表宽度失效问题

Vue中 实现 Echarts 图表宽高自适应

echarts超出父容器范围和自适应的解决办法

echarts如何实现动态自适应宽高

tabs切换tab页中的echart图变形,宽高仅100px问题