Echarts图表大小的自适应与防抖处理

Echarts图表的大小自适应与防抖处理

目标

实现echarts图表的大小自适应

官网方法

官方文档提供的自适应方法，onresize 事件会在窗口或框架被调整大小时发生，然后调用 echartsInstance.resize 改变图表的大小。

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
</style>
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.onresize = function() {
    myChart.resize();
  };
</script>

新的问题

但这样有个问题，我的项目是后台管理系统，窗口中存在可放缩的侧边栏。缩小侧边栏时，图表主体容器变宽，但窗口没有发生改变，因此图表大小不能自适应改变。

解决方法

ResizeObserver可以监听到元素的边界框改变。

业务代码：

// 监听容器dom大小，改变图表大小
resizeChart() {
  this.resizeOb = new ResizeObserver(() => {
    const width = this.$refs.echartsRef.offsetWidth     // 获取元素的布局宽度(offsetWidth只读)
    this.chartInstance.resize({ width, height: "auto" })
  })
  this.resizeOb.observe(this.$refs.echartsRef)
},

// 在vue生命周期函数beforeDestroy中销毁监听
beforeDestroy() {
  this.resizeOb.unobserve(this.$refs.echartsRef)
  this.resizeOb = null
},

防抖处理：

// 监听窗口大小，改变图表大小
resizeChart() {
  this.resizeOb = new ResizeObserver(() => {
    if (this.resizeWaiter) clearTimeout(this.resizeWaiter)
    this.resizeWaiter = setTimeout(() => {
      const width = this.$refs.echartsRef.offsetWidth
      this.chartInstance.resize({ width, height: "auto" })
    }, 50)
  })
  this.resizeOb.observe(this.$refs.echartsRef)
},

参考：

www.yuque.com/dirackeeko/…

blog.csdn.net/weixin_5292…

Echarts5的API解决方式：

  const resizeOb = new ResizeObserver((entries) => {
    for (const entry of entries) {
      echarts.getInstanceByDom(entry.target).resize();
    }
  });
  resizeOb.observe(this.$refs.rankMain);