最近公司在做一个项目，使用了Echart，使用过过程中发现Echart以组件形式获取不到父组件的高度，宽度到时被获取到了！感觉有点奇葩，于是便在又写了一个style标签没有加scoped属性，发现还是获取不到高度，百度上搜了，没有找到自己想要的结果！并且好多无良前端复制粘贴成自己的文章也不署名出处，一翻一溜一样的文章！甚是烦躁！就自己摸索！接着正题！
问题1：获取不到高度就会在A页面引入后，出现趋势图不显示，控制台查看没高度！
解决如下：在A页面包裹Echart组件的div上加上class或者id，例如class=“Echarts”，style中.Echarts div:nth-of-type{宽和高设置一下}，就完美解决了vue中Echart子组件获取不到父组件的问题！
示例如下：
<div class="echartsall" v-if="!chartstatus">
<div class="temperature">
<span>{{timedata}}温度</span>
<temperature></temperature>
</div>
<div class="humidity">
<span>{{timedata}}湿度</span>
<humidity></humidity>
</div>
</div>
<style>
.humidity div:nth-of-type(1) {
width: 100%;
height: 300px;
}
.temperature div:nth-of-type(1) {
width: 100%;
height: 350px;
}
</style>
备注：有些时候搜索到的问题可能不对症，例如：什么重新调取Echart接口重新获取高度宽度，个人认为既然加scoped就是私有的，子组件根本就会获取不到当前父组件的像素宽度，所以在A页面直接控制下一页面宽度，是最好的方法！并且Echart既然带有自动获取宽高，你就算再调用十遍也获取不到宽高！设A页面置子组件B页面宽高，承上启下才能解决问题！
问题2：Echart多个页面使用，例如A页面完美展示完毕，切换到B页面时却出现还是A页面设置的宽高！
如图：A页面正常显示
B页面也同时引用这个组件样式却还是A页面的组件，
如图：
这肯定不是我们想要的结构。
解决方法如下：
查看A页面使用的class或者id和B页面class或者id是否同名！style上加了scoped使用同名id或者class会引起缓存的重复使用！造成样式不会改变！例如A页面使用id，B页面使用class就不会出现样式不变的情况