使用echarts需要图表自适应，window.onresize方法失效解决办法

echarts图表自适应窗口大小，window.onresize方法失效

一、问题背景

在electron-vue开发环境下，使用echarts的折线图，使用window.onresize方法想要让折线图自适应窗口大小，但是试了多次都没用

代码如下：

在myChart.setOption(option)后添加window.onresize方法

drawLine(){ //生成图表函数
	var myChart = echarts.init(document.getElementById("myChart"))
    ...
    myChart.setOption(option);
    window.onresize = myChart.resize; //自适应方法
}
...复制

二、解决办法

1> 获取当前窗口宽高（document.body.clientWidth和document.body.clientHeight），存在data变量里，再将init后的myChart也存在data的变量里。

2> 在setOption前使用监听resize的方法（window.addEventListener(‘resize’,()=>{…})）获取当前窗口的宽高并赋值给window里的两个宽高变量（window.screenWidth和window.screenHeight），并更新data变量里的两个旧的窗口宽高。

3> 使用watch监听存在data变量里的两个宽高变量，当宽高更新后调用myChart.resize()方法进行echarts的图表更新

代码如下：

1>data中声明三个变量进行存储

export default{
	data(){
		return{
			...
			screenWidth:document.body.clientWidth,  //获取当前宽度并存储
			screenHeight:document.body.clientHeight, //获取当前高度并存储
			myChart:""  //存储init后生成的图表全部内容
		};	
	},
}复制

2>在生成图表方法里进行窗口大小改变的监听和当前窗口大小的获取并更新存储的宽高变量

methods:{
	drawLine(){  //绘图函数
		let that = this
		var myChart = echarts.init(document.getElementById("myChart"));
		this.myChart = myChart //将init后的存储到myChart变量中
		...
		...//此处省略图表配置代码
		window.addEventListener("resize",()=>{  //使用resize监听方法
			that.screenWidth = document.body.clientWidth  //给存储的变量screenWidth赋当前窗口的宽度
			window.screenWidth = that.screenWidth    
			that.screenHeight = document.body.clientHeight//给存储的变量screenHeight赋当前窗口的高度
			window.screenHeight = that.screenHeight
		})
		myChart.setOption(option)
	}
},
mounted(){
	this.drawLine()
}复制

3>监听存储的变量更新情况并调用resize()方法

watch:{
	screenWidth(){
		this.myChart.resize() //当监听到变量screenWidth更新后调用myChart的resize()方法
	},
	screenHeight(){
		this.myChart.resize()//当监听到变量screenHeight更新后调用myChart的resize()方法
	}
}复制