vue中父组件向子组件传值，echarts子组件接收后打印为空，柱状图，饼状图宽高设置为rem百分比失真，图挤到一块。

vue中父组件向子组件传值，子组件接收后打印为空

博主今天在写项目时，由于项目是大数据展示页面，需要用到echarts中的地图，柱状图和饼状图，用过echarts的小同学们都知道如果在一个页面里面同时引入这三个图，数据处理起来烦杂不说，后期维护起来，更是给维护人员带来不可避免的麻烦。所以说将三个图封装到不同的组件里面，三者就可以不互相影响，在后期处理数据和维护的过程中，就能省去不必要的麻烦。

博主将页面封装成五个组件，分别是合同数量展示组件，合同数量排行组件，合同数据柱状图组件，地区合同总数组件，区域地区分类组件以及地图组件。
下面是页面中区域展示部分：
这是合同金额预警部分:

这是合同类型部分

然后页面的整体布局如下：

在页面进行整体渲染的时候，会在首页进行网络请求，将各个表的数据传到组件中：
这里用到的是 数据绑定，类似于

<QuYu_Rank :quRank='quRank'  ref="QuYu_Rank1" ></QuYu_Rank>

然后在QuYu_Rank这个子组件中用

props: ["quRank"],

进行接收，然后在子组件中再把数据渲染到柱状图，饼状图和面积图上面。
然后页面就出现了这种情况。

于是，我百思不得其解，从父组件向子组件传值的时候，打印了一下quRank的值，可以打印，在子组件打印出来也可以打印。
数据都有，后台也没有报错，但是图的样式却加载不出来了。
最后，尝试了各种方法，我也不知道怎么回事，就莫名其妙的解决掉了。
解决方法是这样：

<QuYu_Rank :quRank='quRank'  ref="QuYu_Rank1"   v-if="flag"></QuYu_Rank>

在组件上面加一个v-if，开始先设置flag属性为false，在父组件将数据传给子组件之后，并且子组件成功接收数据之后，将flag设置为true即可。这样问题就解决了。