vue3 echarts自适应

监听窗体变化

当浏览器窗体发生变化的时候会触发。

主要用在布局计算，比如说分辨率不一样，高度宽度需要重新计算渲染。

 例如echarts报表，当我们的浏览器缩放发生变化或者是电脑分辨率发生变化之后，已渲染的echarts报表大小位置是不会发生变化的，所以可以使用这个方法监听浏览器窗体变化，来重新渲染echarts报表，解决错版。

窗体变化echarts报表重新渲染

addEventListener()添加事件监听

addEventListener(event, function, useCapture)

（1）参数event必填，表示监听的事件，例如 click, resize等，不加前缀on的事件。

（2）参数 function必填，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。不带参数。

（3）参数 useCapture选填，填true或者false，用于描述事件是冒泡还是捕获触发，true表示捕获，默认false表示冒泡。

//方式一
<template>
  <div ref="mainEcharts" id="" style="height: 420px;width:100%"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
const mainEcharts = ref();
let echartsInit: echarts.ECharts | null = null
const init = () => {
  if (!echartsInit) {
    console.log('触发了+++++++++++++++++++++++++');
    echartsInit = echarts.init(mainEcharts.value);
    echartsInit.setOption({
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }
      ]
    })
  }
  echartsInit?.resize()
}

onUnmounted(() => {
  window.removeEventListener("resize", init);
  console.log('卸载了+++++++++++++++++++++');
})

onMounted(() => {
  init()
  window.addEventListener("resize", init);
  console.log("组件挂载到页面之后执行-------onMounted");
});
</script> 

window.onresize = function(){}

window.onresize只能在一个组件中使用，如果多个组件调用则会出现覆盖情况

//方式二
<template>
  <div ref="mainEcharts" id="" style="height: 420px;width:100%"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
const mainEcharts = ref();
const init = () => {
  console.log('触发了+++++++++++++++++++++++++');
  const echartsInit = echarts.init(mainEcharts.value);
  echartsInit.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  })
  window.onresize = (event) => {
    return (() => {
      console.log(event, "event");
      echartsInit?.resize()
    })()
  };
}

onUnmounted(() => {
  window.onresize = null //注销window.onresize事件
  console.log('卸载了+++++++++++++++++++++');
})

onMounted(() => {
  init()
  console.log("组件挂载到页面之后执行-------onMounted");
});
</script>  

上两种方法自然是有用的，但有些场景不适用。

例如有个可以收缩的侧边栏，当收缩侧边栏时浏览器窗口大小是没有发生改变的，但由于页面是响应式的，内容区域容器宽高是变化的，这时候我们要监控容器的变化来实现echarts图表的重新渲染

Web API提供了一个方法ResizeObserver来实现

//方式三
<template>
  <div ref="mainEcharts" id="" style="height: 420px;width:100%"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, ResizeObserver } from 'vue'
import * as echarts from 'echarts';
const mainEcharts = ref();
let resizeObserver: ResizeObserver | null = null,
  canResize = true
const init = () => {
  const echartsInit = echarts.init(mainEcharts.value);
  echartsInit.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  })
  const targetElement = document.getElementsByClassName('hasTagsView')[0];
  resizeObserver = new ResizeObserver(entries => {
    if (!canResize) {
      return
    }
    canResize = false
    setTimeout(() => {
      canResize = true
      console.log('监听到宽高的变化++++++++++++');
      echartsInit.resize()
    }, 500)

    /*     console.log(entries[0].contentRect.width)
        console.log(entries[0].contentRect.height) */
  })
  resizeObserver.observe(targetElement)
}

onUnmounted(() => {
  // 停止监听给定的元素
  // resizeObserver?.unobserve(targetElement);
  // 停止监听所有元素
  resizeObserver?.disconnect();
  console.log('卸载了+++++++++++++++++++++');
})

onMounted(() => {
  init()
  console.log("组件挂载到页面之后执行-------onMounted");
});
</script>