echarts使用carousel走马灯显示问题

问题复现

<el-carousel :autoplay="autoplay" :loop="autoplay">
   <el-carousel-item v-for="(item, idx) in lineData" :key="'carouselLine' + idx">
      <span class="line-title">{{item.label}}</span>
      <my-line :line-data="item" :idx="idx"></my-line>
     </el-carousel-item>
   </el-carousel>

当我们使用el-carousel包含echarts时，循环展示的ecahrts图也只有100px宽度，无论echarts图有没有宽度，都限定了100px。如下图展示：

后面就想了一下会不会是宽度的问题，所以样式里面直接把canvas的宽度拉满，结果：

整个都模糊了。

问题原因

查阅了很多网上内容，发现当echarts拿不到页面的宽度的时候，会默认展示100px，所以到这里我想了一下，会不会是因为页面没有加载好。虽然我是把echarts初始化放在mounted里面的，按理说，是已经加载完成了。但后面发现父子组件加载顺序，子组件的mounted比父组件mounted先运行，所以也就造成了，父组件没加载好，子组件就渲染了。

解决

mounted() {
	// 子组件加个nextTick,确保是dom已经加载完成后再进行
    this.$nextTick(() => {
      this.initEachart()
    })
  },