echarts自适应宽高

问题：当我们写完echarts后缩放浏览器窗口常常会出现图表超出指定范围，然后我们刷新页面图标又恢复到范围内。

解决方法：添加resize事件

作用：当浏览器窗口缩放时自动“刷新”echarts图标

写法一：

export default {
	data(){
		return {
			myChart:''
		}
	},
	methods:{
		getMap(){
			var that=this;
			that.myChart = that.$echarts.init(document.getElementById("map"));
			var option = {//配置项
				//geo3D: {
				//	map: 'china',
				//	roam: true
				//}
				//......
			};
			that.myChart.setOption(option);
			// 自适应
			window.addEventListener('resize', function () {
				that.myChart.resize()
			});
		}
	}
}

写法二：

export default {
	data(){
		return {
			myChart:''
		}
	},
	mounted(){
		// 自适应
		window.onresize = ()=>{
	    	this.myChart.resize();
	      	// ...可持续添加
	    }
	},
	methods:{
		getMap(){
			var that=this;
			that.myChart = that.$echarts.init(document.getElementById("map"));
			var option = {//配置项
				//geo3D: {
				//	map: 'china',
				//	roam: true
				//}
				//......
			};
			that.myChart.setOption(option);
		}
	}
}