Vue2项目使用ResizeObserve刷新echarts

需求：后台管理系统，有左侧边栏，可以收起打开，此操作不导致页面刷新，故原本的myChart.resize不生效。

myChart.resize不生效

只有在窗口大小改变时才生效

mounted(){
      var myChart = echarts.init(document.getElementById('one'));
      let option = {)
      myChart.setOption(option);

      window.addEventListener('resize',function() {
        myChart.resize();
      })
    },

在Vue2中使用ResizeObserve

官方文档： Resize Observer API

Vue 2 中没有直接支持ResizeObserver，因此需要使用Polyfill来填补这一功能。

Polyfill是一种用于填补浏览器对新标准特性支持不完整的情况下的技术手段。

npm install resize-observer-polyfill

 mounted(){
      // 组件尺寸改变时的回调函数
      const resizeObserver = new ResizeObserver((entries)=>{
        myChart.resize();
      })

      var myChartOne = echarts.init(document.getElementById('one'));
      let option = {...}
      myChart.setOption(option);
      
      // 保留原本的resize
      window.addEventListener('resize',function() {
        myChart.resize();
      })
      
      // 绑定监听组件
      resizeObserver.observe(this.$refs.elementToObserve);
  },

在这段代码中，我们将ResizeObserver的逻辑放在了Vue组件的mounted钩子函数中，并通过this.$refs.elementToObserve获取了需要观察大小变化的DOM元素。

需要注意的是，在Vue中使用原生的DOM操作时，通常会在mounted钩子函数中进行，确保DOM元素已经被渲染到页面上。

官方示例解读

resize-observer-border-radius.html：一个带有绿色框的简单示例，其大小为视口大小的百分比。更改视口大小时，框的圆角将根据框的大小成比例地变化。我们可以通过 border-radius 的百分比来实现，但这很快就会导致丑陋的椭圆形角，而上述解决方案为你提供了随盒子大小缩放的漂亮的圆角。

const resizeObserver = new ResizeObserver((entries) => {
  const calcBorderRadius = (size1, size2) =>
    `${Math.min(100, size1 / 10 + size2 / 10)}px`;

  for (const entry of entries) {
    if (entry.borderBoxSize) {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.borderBoxSize[0].inlineSize,
        entry.borderBoxSize[0].blockSize,
      );
    } else {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.contentRect.width,
        entry.contentRect.height,
      );
    }
  }
});

resizeObserver.observe(document.querySelector("div"));

这段代码使用了ResizeObserver来监听DOM元素的大小变化，并根据变化的大小动态设置元素的borderRadius属性。逐行解释如下：

1. const resizeObserver = new ResizeObserver((entries) => {：创建一个新的ResizeObserver实例，传入一个回调函数作为参数。这个回调函数会在被观察的DOM元素大小发生变化时被调用，并会接收一个entries参数，其中包含了所有发生变化的DOM元素信息。
2. const calcBorderRadius = (size1, size2) => ${Math.min(100, size1 / 10 + size2 / 10)}px;：定义了一个计算borderRadius属性值的函数calcBorderRadius，根据传入的两个尺寸参数计算出应用于borderRadius的值。
3. for (const entry of entries) {：遍历entries数组中的每一个元素，每个元素代表一个发生大小变化的DOM元素。
4. if (entry.borderBoxSize) {：检查当前entry对象是否有borderBoxSize属性，borderBoxSize包含了元素的盒模型大小信息。
5. entry.target.style.borderRadius = calcBorderRadius(entry.borderBoxSize[0].inlineSize, entry.borderBoxSize[0].blockSize);：如果entry对象有borderBoxSize属性，根据inlineSize和blockSize计算出borderRadius值，并将其应用到entry.target元素的style.borderRadius属性上。
6. else {：如果entry对象没有borderBoxSize属性，表示浏览器不支持borderBoxSize属性，这时使用contentRect属性来获取元素的大小信息。
7. entry.target.style.borderRadius = calcBorderRadius(entry.contentRect.width, entry.contentRect.height);：根据contentRect的宽度和高度计算出borderRadius值，并将其应用到entry.target元素的style.borderRadius属性上。