85 lines
2.1 KiB
JavaScript
85 lines
2.1 KiB
JavaScript
// 防抖函数：避免频繁触发 resize
|
||
function debounce(fn, delay = 100) {
|
||
let timer = null;
|
||
return function (...args) {
|
||
if (timer) clearTimeout(timer);
|
||
timer = setTimeout(() => {
|
||
fn.apply(this, args);
|
||
timer = null;
|
||
}, delay);
|
||
};
|
||
}
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 存储ResizeObserver实例
|
||
resizeObserver: null,
|
||
// 标记是否已初始化监听
|
||
isResizeListening: false
|
||
};
|
||
},
|
||
methods: {
|
||
/**
|
||
* 初始化尺寸监听
|
||
* @param {HTMLElement} container - 图表容器DOM（默认取this.$refs.chartContainer）
|
||
*/
|
||
initResizeListener(container) {
|
||
// 防止重复初始化
|
||
if (this.isResizeListening) return;
|
||
|
||
// 默认使用组件内的chartContainer作为监听目标
|
||
const target = container || this.$refs.chartContainer;
|
||
if (!target) {
|
||
console.warn('未找到图表容器，无法初始化尺寸监听');
|
||
return;
|
||
}
|
||
|
||
// 创建ResizeObserver实例
|
||
this.resizeObserver = new ResizeObserver(
|
||
debounce(entries => {
|
||
// 触发图表重绘
|
||
this.handleContainerResize(entries);
|
||
})
|
||
);
|
||
|
||
// 开始监听容器尺寸变化
|
||
this.resizeObserver.observe(target);
|
||
this.isResizeListening = true;
|
||
},
|
||
|
||
/**
|
||
* 处理容器尺寸变化
|
||
* @param {ResizeObserverEntry[]} entries - ResizeObserver回调参数
|
||
*/
|
||
handleContainerResize(entries) {
|
||
// 确保图表实例存在
|
||
if (this.chart && this.chart.resize) {
|
||
// 调用ECharts的resize方法重绘图表
|
||
this.chart.resize();
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 销毁尺寸监听
|
||
*/
|
||
destroyResizeListener() {
|
||
if (this.resizeObserver) {
|
||
this.resizeObserver.disconnect();
|
||
this.resizeObserver = null;
|
||
}
|
||
this.isResizeListening = false;
|
||
}
|
||
},
|
||
// 组件挂载后初始化监听
|
||
mounted() {
|
||
// 延迟初始化，确保DOM已渲染完成
|
||
this.$nextTick(() => {
|
||
this.initResizeListener();
|
||
});
|
||
},
|
||
// 组件销毁前清理监听
|
||
beforeDestroy() {
|
||
this.destroyResizeListener();
|
||
}
|
||
}; |