vue2项目中点击按钮实现echarts放大缩小动画（Element.classList.add()方法和Element.classList.remove()方法）

1、html部分

	

		

		    
			能耗分类统计
		
		
	
	
	

2、css部分

.em-vs-enlarge {
	z-index: 9;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	padding: 40px;
	background-color: rgba(9, 9, 9, 0.9);
}

3、js部分

    enlarge(chart) {
			this.enlarged = !this.enlarged
			let mainContainer = document.getElementById('mainContainer')
			let productivities = document.getElementById('productivities')
			if(this.enlarged) {
				productivities.classList.add('em-vs-enlarge')
			    let timer = setTimeout(() => {
					this.productivitiesClassify.resize()
					clearTimeout(timer)
				}, 1100);
			} else {
				productivities.classList.remove('em-vs-enlarge')
				let timer = setTimeout(() => {
					this.productivitiesClassify.resize()
					clearTimeout(timer)
				}, 1100);
			}
		}
	},

4、使用定时器说明

动画完成需要1秒，因此需要在动画完成之后，即echarts散点图的容器div高度定型后，再去resize一下，不然生成的echarts散点图不会铺满整个div容器。