vue 单个页面中引用多个echarts实现自适应

最新推荐文章于 2024-09-29 21:30:28 发布

console.log( )

最新推荐文章于 2024-09-29 21:30:28 发布

阅读量2.7k

点赞数

分类专栏： # vue # echarts 文章标签： vue echarts

本文链接：https://blog.csdn.net/kingjordon/article/details/105994828

版权

vue 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

echarts

8 篇文章 0 订阅

订阅专栏

在vue某个数据展示页面，使用了多个echarts图表，使用onresize方法只能够让最后一个图表随着窗口大小自适应

在解决问题的过程中发现的一些问题

一、第一种

开始我在每个图表组件的方法里面定义myChart，如下


methods:{
    setchart(){
       const option{

             }
        let myChart = this.$echarts.init(document.getElementById('r-biao1'));
				myChart.setOption(option);
				window.onresize = function() {  
					myChart.resize();
				};
    }

}

上面的代码只有最后一个图表会刷新，将window.onresize改为下面的代码

window.addEventListener("resize",function(){
				    myChart.resize();
				})

正确代码

methods:{
    setchart(){
       const option{

             }
        let myChart = this.$echarts.init(document.getElementById('r-biao1'));
				myChart.setOption(option);
				window.addEventListener("resize",function(){
				    myChart.resize();
				})
    }

}

二、第二种

我把mychart在data里定义，用this调用

data() {
			return {
				myChart: null,
			}
		},

methods:{
    setchart(){
       const option{

             }
		this.myChart = this.$echarts.init(document.getElementById('r-biao3'));
		this.myChart.setOption(option);
		window.addEventListener("resize",function(){
			this.myChart.resize();
		})
    }

}

这个也是最后一个可自适应，最后发现是this的问题

正确代码

data() {
			return {
				myChart: null,
			}
		},

methods:{
    setchart(){
       const option{

             }
        const that=this
		this.myChart = this.$echarts.init(document.getElementById('r-biao3'));
		this.myChart.setOption(option);
		window.addEventListener("resize",function(){
			that.myChart.resize();
		})
    }

}

以上是我尝试出来可行的方法以及问题