mounted(){
window.addEventListener('resize',this.selfAdaption);
},
methods: {
//echarts自适应
selfAdaption () {
var myChart1 = ECharts.init(this.$refs.xxxxxxxx)
var myChart2 = ECharts.init(this.$refs.xxxxxxxx)
var myChart3 = ECharts.init(this.$refs.xxxxxxxx)
myChart1.resize();
myChart2.resize();
myChart3.resize();
},
}
beforeDestroy() {//离开路由.vue跳转路由后还会继续执行,所以取消
window.removeEventListener("resize",this.selfAdaption);//取消echarts自适应
},
vue ECharts 宽度自适应
最新推荐文章于 2024-03-05 18:19:07 发布
本文介绍了如何在Vue应用中使用ECharts实现图表组件的自适应布局,通过addEventListener监听窗口大小变化,实时调用resize方法更新图表尺寸。在组件销毁时,会移除resize事件监听,确保资源释放。
摘要由CSDN通过智能技术生成