解决vue+ Echarts的 resize()方法，在多个echarts图标下window.onresize，只有一个图表自适应生效

1 问题：在页面上使用echarts有多个图标 resize 缩放只有最后一个有效。2 解决改变原来官方写法1） html里<div id="container" style="height: 400px;"></div>// 2)methods里drawLine(){//记得在return里定义好 myChart 字段。this.myChart = echarts.i

weixin_43138882

1947人浏览 · 2021-11-18 15:32:31

weixin_43138882 · 2021-11-18 15:32:31 发布

1 问题：在页面上使用echarts有多个图标 resize 缩放只有最后一个有效。
2 解决改变原来官方写法

  1） html里  
   <div id="container" style="height: 400px;"></div>

 // 2)  methods里
  drawLine(){
  		//  记得在  return里定义好 myChart 字段。
   		this.myChart = echarts.init(document.getElementById('container'));
   		 this.myChart.setOption({  
			// 图表所需要的内容 简略掉了
		}） 
  }

// 3)   mounted 里加载调用  使用到 addEventListener
 		this.drawLine();
 		window.addEventListener('resize', () => {
			this.myChart.resize();
			//  如果是多个 在次里加你所需要的就行
		})

这样就解决了多个图表是缩放只有最后一个管用的问题。