echarts宽度错误问题

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


image-20210901213658903.png

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

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

image-20210901213918122.png

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


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

image-20210901214402133.png

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

你可能感兴趣的:(echarts宽度错误问题)