今天在用echarts画图的时候,偶然间发现刷新后图的宽度直接溢出了设定好的Col的宽度,就像这样:
右边是一个Rank的列表,这个图的宽度好像有自己的想法
但是,如果我切换一下页面,就发现图的宽度又正常了,于是我看了Elements,发现
图像的width是一个固定值,导致宽度大于Col限定的范围,就溢出了父组件,猜测可能是因为echarts在没有拿到父组件的宽度时有了自己的想法,于是考虑给组件ve-line
增加一个v-if
来达到延迟渲染的目的
<ve-line v-if="show"></ve-line>
show
初始值为false
,当ve-line
的数据全部计算完毕或是页面渲染完成后再将其置为true
即可,问题解决!
并且我还惊喜地发现,延迟渲染还同时解决了图是“闪出来”的,现在一开始也能有动态效果啦!