echarts宽度错误问题

今天在用echarts画图的时候,偶然间发现刷新后图的宽度直接溢出了设定好的Col的宽度,就像这样:


image-20210901213658903.png

右边是一个Rank的列表,这个图的宽度好像有自己的想法

但是,如果我切换一下页面,就发现图的宽度又正常了,于是我看了Elements,发现

image-20210901213918122.png

图像的width是一个固定值,导致宽度大于Col限定的范围,就溢出了父组件,猜测可能是因为echarts在没有拿到父组件的宽度时有了自己的想法,于是考虑给组件ve-line增加一个v-if来达到延迟渲染的目的

<ve-line v-if="show"></ve-line>

show初始值为false,当ve-line的数据全部计算完毕或是页面渲染完成后再将其置为true即可,问题解决!

image-20210901214402133.png

并且我还惊喜地发现,延迟渲染还同时解决了图是“闪出来”的,现在一开始也能有动态效果啦!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容