Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

<template>
　　<div id="myChart" :style="{width: '100%', height: '400px'}"></div>
</template>

// 基于准备好的dom，初始化echarts实例
drawMyChart(){
	let myChart = this.$echarts.init(document.getElementById("myChart"));
	let option={...};
	myChart.setOption(option);
}

mounted() {
    this.drawMyChart();
	this.resizefun = ()=>{
　　　　this.$echarts.init(document.getElementById('myChart')).resize();
　　　　//多个echarts则在此处添加
　　};
　　window.addEventListener('resize',this.resizefun);
}
//移除事件监听
beforeDestroy() {
　　window.removeEventListener('resize', this.resizefun);
　　this.resizefun = null
}

这样就会根据浏览器页面大小动态加载 echarts。
参考：
http://www.manongjc.com/detail/18-fslxgdrahydrwzp.html
https://www.cnblogs.com/moguzi12345/p/13322804.html