echarts图形随页面大小变化适配

echarts图形随页面大小变化适配（resize）–vue3

思路

主要思路监听页面高和宽的积，当数值变化时，resize echarts图形；该方法比单独监听宽度变化或者高度变化更灵敏

效果展示

非全屏时

具体步骤

• 1、定义监听对象（页面高和宽的乘积）

• 2、当页面变化时重新计算页面高和宽的乘积

• 3、watch监听变化，使图形大小变化

• 具体代码如下

// 定义变量
 const availHeight = ref(Number)
 availHeight.value = window.innerHeight * window.innerWidth
 
// 2步 将window.onresize 写在onMounted中
  onMounted(async() => {
      await nextTick()
      window.onresize = () => {
        return (() => {
          availHeight.value = window.innerHeight * window.innerWidth;
        })();
      };
    })
//  3、当availHeight值变化时，使echarts的图形resize; 
  watch(() => availHeight, (newValue, oldValue) => {
      nextTick(() => {
        chartList.value.forEach(item => {     // 其中 chartList 存储的是eharts图形  
          if (item) {
            item.resize();
          }
        })
      })
    }, { deep: true })