Echarts 如何防止内存泄漏
@
概述
在使用Echarts时是很容易产生内存泄漏的,产生内存泄漏的原因是实例化echarts报表后在销毁组件前没有对echarts的实例进行删除。
代码
// 此段代码建议写在mixin中,在使用echarts时调用即可
beforeDestroy() {
if (!this.chart) {
return
}
// 在组件销毁前调用dispose函数销毁报表
this.chart.dispose()
this.chart = null
}
完整代码
此代码直接使用mixin混入即可,封装了报表自适应和报表销毁功能,在每一个报表组件中引入就好。
import { debounce } from '@/utils/common'
export default {
data() {
return {
$_sidebarElm: null,
chart: null,
dataEmpty: false,
}
},
watch: {
data(newVal) {
if (!this.chart) {
this.$_init();
} else {
this.setData(newVal);
}
},
},
mounted() {
this.$nextTick(() => {
this.$_init();
});
this.$_initResizeEvent()
},
beforeDestroy() {
this.$_disposeChart()
this.$_destroyResizeEvent()
},
activated() {
this.$_initResizeEvent()
},
deactivated() {
this.$_destroyResizeEvent()
},
methods: {
/**
* 初始化数据
*/
$_init() {
if (this.data && this.data.length === 0) {
this.dataEmpty = true;
} else {
this.dataEmpty = false;
this.initChart();
this.setData(this.data);
}
},
$_resizeHandler() {
return debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)()
},
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler)
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler)
},
// 销毁报表
$_disposeChart() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
}
}
}
debounce函数
/**
* 防抖函数
* @param {Funciton} fn 函数
* @param {Number} wait 等待时间
* @param {immediate} Boolearn 是否立即执行
*/
export function debounce(fn, wait, immediate) {
let timer
return function() {
if (timer) clearTimeout(timer)
if (immediate) {
// 如果已经执行过,不再执行
var callNow = !timer
timer = setTimeout(() => {
timer = null
}, wait)
if (callNow) {
fn.apply(this, arguments)
}
} else {
timer = setTimeout(() => {
fn.apply(this, arguments)
}, wait)
}
}
}