vue2項目中點擊按鈕實現echarts放大縮小動畫（Element.classList.add()方法和Element.classList.remove()方法）

1、html部分

<div id="productivities" class="em-vs-charts" style="margin-top:10px;">
	<div>
		<div>
		    <img style="margin:auto 15px;" src="../assets/venderstatisticsicons/icon_NengHao.png" alt="">
			<label style="font-size:21px;font-weight:bold;" for="">能耗分類統計</label>
		</div>
		<img @click="enlarge('scatter')" src="../assets/venderstatisticsicons/icon_enlarge .png" alt="">
	</div>
	<!-- 能耗分類統計散點圖 -->
	<div ref="productivitiesClassify" id="productivitiesClassify"></div>
</div>

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容器。