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

Logo

前往低代码交流专区

更多推荐