问题:
页面侧边栏收缩时,echart图片的宽度没有随侧边栏收缩而改变
解决办法:
onMounted(() => {
setTimeout(() => {
// this.myCharts();
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(followUpEchart.value);
});
});
ResizeObserver (具体监听哪一个)
监听某一个DOM节点的变化,这种变化包括但不仅限于:
- 某个节点的出现和隐藏
- 某个节点的大小变化
语法
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
//写入要监听的内容
//echarts.getInstanceByDom(entry.target).resize();
}
});
//传入需要监听的DOM元素
resizeOb.observe(followUpEchart.value);
//取消监听某个DOM节点
unobserve()
//例如 1 秒后取消
setTimeout(() => {
resizeOb.unobserve(followUpEchart.value);
}, 1000);
//取消对所有节点的监听
disconnect()
//例如 1 秒后取消
setTimeout(() => {
resizeOb.disconnect(followUpEchart.value);
}, 1000);
tips:
- window.resize(监听所有且只有window对象才有resize事件)事件监听每一个元素大小变化,但是reize事件会在一秒内触发将近60次,很容易在改变窗口大小时导致性能问题