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();
|
|||
|
|
}
|
|||
|
|
};
|