echarts容器的宽度根据父元素宽度变化进行自适应（页面侧边栏收缩）_echart 左侧收缩 resize

问题：

        页面侧边栏收缩时，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次，很容易在改变窗口大小时导致性能问题