v-chart在模态框不显示的问题

前言

在vue的项目中,我做了一个按钮点击显示模态框,模态框显示数据分析的功能.数据分析用的是v-chart图表,但是模态框出来之后里边的图表不显示出来,等到一改变页面宽度的时候,模态框才会显示出来.
这个问题弄的我很头疼啊,这样的话,用户只能移动页面才显示,那用户体验一定是不好的呀,于是,我想一定是哪里出了问题.

尝试了很多的方法:

• 先进行赋值数据表的方法,再让模态框显示–失败x
• 点击事件触发时,先很小的修改一下页面的宽度,让v-chart一开始就感觉到宽度改变–失败x
• 添加监控事件,当模态框宽度改变的时候,触发重新加载的事件–失败x
• 给模态框设置宽度和高度–失败x
• 给v-chart控件设置setting属性,在属性里设置宽度和高度–成功√

成功代码展示:

 <ve-line :data="chartData" :settings="chartSettings" width="800px" height="400px"></ve-line>

错误原因是:把v-charts放在其他组件容器中了，v-charts组件获取不到高度和宽度

感悟

当遇到很多问题的时候,一定要相信可以解决,当长时间解决不了的时候,利用社交化学习,依靠团队的力量去解决,没有什么是不能解决的,加油!!