html +eacher 根据浏览器大小自适应宽度

最新推荐文章于 2024-03-18 09:39:30 发布

TortyE

最新推荐文章于 2024-03-18 09:39:30 发布

阅读量106

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/TortyE/article/details/134217990

版权

文章介绍了在Vue项目中如何通过监听窗口resize事件并调用Echarts的resize方法，实现在页面宽度变化时动态调整柱状图、折线图和饼状图的大小，达到图表的自适应效果。

摘要由CSDN通过智能技术生成

我们使用vue做项目的时候，常常需要做到echarts图表的自适应，一般是根据页面的宽度做对应的适应。本文记录一下设置echarts图表的自适应的步骤。

修改后

mounted(){
			//柱状
			this.columnar()
			//折线
			this.line()
			//饼状
			this.pie(),
			// 在页面加载渲染的时候执行echarts画图方法
			this.drawEcharts()
		},
methods:{
			drawEcharts() {
				
				//，在页面初始化加载的时候绑定页面resize事件监听。补充resize事件：resize事件是在浏览器窗口大小改变时，会触发。
				//        如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。
				//        我们一般使用这个事件去做窗口大小与对应元素的大小适配
				window.addEventListener('resize', () => {
					setTimeout(() => {
						//柱状
						var chartmain = document.getElementById("chartmain");
						var myChart1 = echarts.init(chartmain,);
						//折线
						var chartmain_zhe = document.getElementById("chartmain_zhe");
						var myChart2 = echarts.init(chartmain_zhe,);
						var chartmain_bing = document.getElementById("chartmain_bing");
						var myChart3 = echarts.init(chartmain_bing,);
						// 执行echarts自带的resize方法，即可做到让echarts图表自适应
						myChart1.resize()
						myChart2.resize()
						myChart3.resize()
					})
					
				
				})
			},
}