首页 前端知识 使用echarts需要图表自适应,window.onresize方法失效解决办法

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

2024-03-21 15:03:46 前端知识 前端哥 92 461 我要收藏

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.clientWidthdocument.body.clientHeight),存在data变量里,再将init后的myChart也存在data的变量里。

2> 在setOption前使用监听resize的方法(window.addEventListener(‘resize’,()=>{…}))获取当前窗口的宽高并赋值给window里的两个宽高变量(window.screenWidthwindow.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()方法
	}
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4045.html
标签
electron
评论
发布的文章

jQuery和CSS选择器的使用

2024-04-15 09:04:55

HTML前端表单校验的方法

2024-04-15 09:04:46

使用jQuery写一个注册界面

2024-04-15 09:04:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!