VUE中Echarts的resize事件报错和移除windows的事件

Echarts的resize事件报错

原因:echart的api只有在实例化之后才能调用,如果直接调用肯定会导致报错
解决方式:在调用resize的之前判断是否已经实例化

this.barchart = this.$echarts.init(dom) // 实例化Echarts对象
/****************/
if(this.barchart) { // 方法一
	this.syqchart.resize()
}
/****************/
this.syqchart && this.syqchart.resize() // 方法二
/****************/

移除windows的resize事件

一般在使用echart图表时都会去监听窗口大小的变化,以之来实现图表的重新绘制。但是当添加了window事件之后,离开了当前页面,也依然会继续监听并且执行事件的回调函数,这样就会导致浏览器CPU的占用,页面卡顿。
解决方式:

    resizeHandler(){ // methods中定义事件处理函数(必须将处理函数提取出来,这样在移除的时候就能通过指针找到该处理函数)
    	this.barchart && this.barchart.resize()
    	this.linechart && this.linechart.resize()
    }
    mounted() { // 页面加载注册事件
     	window.addEventListener('resize', this.resizeHandler, false)
  	}
  	beforeDestroy() { // 页面离开移除事件
    	window.removeEventListener('resize', this.resizeHandler)
  	}
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值