vue中使用Echart，Echart自动获取宽高问题，以及Echart组件重复使用A页面样式切换到B页面样式不变的问题（scoped问题小结）！

最近公司在做一个项目，使用了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就不会出现样式不变的情况