标题echarts 在vue中使用时，resize方法不生效的3种情况分析及解决办法

情况一： 给ECharts的容器设置了固定的宽高

解决办法：宽度写百分比，高度写vh

//根据浏览器大小改变大小
window.onresize = () => {
	eCarts.resize();
	//如果有多个表变动在下方依次写下去就可以了
}

情况二： 首次加载之后，resize事件未生效，图表未自适应

异常描述：EChart 使用了一个组件，然后监听了resize事件，窗口发生变化的时候，resize事件执行了，页面一直在打印resize，但是图表的尺寸并没有发生变化，但是当我在代码中随便写一点，然后保存，页面上自动重绘的时候，resize就可以了

原因：首次加载的时候，创建了this.charts,但是在执行resize事件的时候，这个resize的主体this.charts可以找到，但是找到的并不是页面上的那一个

解决办法：重新对charts 定义

代码事例

// 原代码

window.addEventListener('resize',function(){
	this.charts &&  this.charts.resize()
})

// 解决后的代码

window.addEventListener('resize',function(){
   	// 重新定义charts
	this.charts = this.$refs.charts
	this.charts &&  this.charts.resize()
})

情况三： vue中同时引入两个以上echarts组件无法自适应图表，resize无效

异常描述：在父组件引入多个子组件（里面都是echarts图表）的时候window.onresize()方法只会对最后一个组件里的图表产生效果

原因：组件加载顺序导致的

解决办法：我们将window.onresize监听放到父组件去执行

代码事例

// 父组件

<div>
	<v-left-container ref="leftCharts"></v-left-container>
	 <v-middle-container ref="middleCharts"></v-middle-container>
</div>

 mounted(){
    const leftCharts = this.$refs.leftCharts
    const middleCharts = this.$refs.middleCharts
    window.addEventListener('resize',function(){
    	// 调用子组件的方法
        leftCharts.resetCharts()
        middleCharts.resetCharts();
    })
  },

// 子组件

methods:{
	resetCharts(){
      this.gdpECharts.resize();
      this.lawTeamECharts.resize();
      this.caseECharts.resize();
    }
}