Echarts大屏卡顿优化

背景

最近做大屏,当数据量大抑或是频繁对echarts进行setOption都会导致页面非常的卡。我也是找了一些资料,实践后发现性能提升程度肉眼可见。下面直接上代码,我是vue项目

原先的写法

export default {
	data() {
		chart: null
	},
	mounted(){
		this.update()
	},
	method: {
		update(){
			const option = {}
			this.chart.setOption(option)
		}
	}
}

尽管这个option是局部变量,但还是很卡

优化后的写法

let chart = null
export default {
	mounted(){
		this.update()
	},
	method: {
		update(){
			const option = {}
			chart.setOption(option)
		}
	}
}

这样的写法,vue不需要管理data,流畅度的提升肉眼可见

Logo

前往低代码交流专区

更多推荐