前言
在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组件获取不到高度和宽度
感悟
当遇到很多问题的时候,一定要相信可以解决,当长时间解决不了的时候,利用社交化学习,依靠团队的力量去解决,没有什么是不能解决的,加油!!
