Echarts 自适应报表
@
概述
在单个echarts报表实例中使用resize来进行自适应,多个报表就不能这么使用了。
代码
$_resizeHandler() {
return debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)()
}
完整代码
此代码直接使用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)
}
}
}