在对echart进行二次封装时,以下几个api函数很有用。
首先是,init 和 dispose,我们在创建页面及页面卸载时可以使用,让echart的资源能在组件卸载时被释放。
this.chart = echarts.init(this.$refs.echart);
this.$once('hook:beforeDestroy', () => { this.chart.dispose(); });
其次是,clear 与 setOption,我们在修改echart数据就需要用到
this.chart?.clear();
this.chart?.setOption()
最后是 resize,让 echart 能跟着浏览器缩放而变化
this.__resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize();
}
}, 100);
window.addEventListener('resize', this.__resizeHandler);
/**
* @param {Function} func
* @param {number} wait
* @param {boolean} immediate
* @return {*}
*/
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result;
const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp;
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
// 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function(...args) {
context = this;
timestamp = +new Date();
const callNow = immediate && !timeout;
// 如果延时不存在,重新设定延时
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
}
标签:context,echart,函数,args,chart,api,timeout,wait
From: https://www.cnblogs.com/zhangdezheng/p/17413028.html