echarts容器的宽度根据父元素宽度变化进行自适应(页面侧边栏收缩)

问题:

        页面侧边栏收缩时,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次,很容易在改变窗口大小时导致性能问题
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值