vue3 echarts adaptatif

Écoutez les changements de fenêtre

Lancé lorsque la fenêtre du navigateur change.

Il est principalement utilisé dans les calculs de mise en page. Par exemple, si la résolution est différente, la hauteur et la largeur doivent être recalculées pour le rendu.

 Par exemple, le rapport echarts, lorsque le zoom de notre navigateur change ou la résolution de l'ordinateur change, la taille et la position du rapport echarts rendu ne changeront pas, nous pouvons donc utiliser cette méthode pour surveiller les changements dans la fenêtre du navigateur afin de restituer rapport echarts, résolvez la mauvaise version.

Modifications du formulaire, rendu du rapport des graphiques électroniques

addEventListener() ajoute l'écoute d'événements

addEventListener (événement, fonction, useCapture)

(1) Le paramètre event est obligatoire, indiquant l'événement à surveiller, tel que clic, redimensionnement, etc., sans le préfixe on.

(2) Le paramètre function est requis, indiquant la fonction à appeler après le déclenchement de l'événement, qui peut être une fonction définie en externe ou une fonction anonyme. sans paramètres.

(3) Le paramètre useCapture est facultatif, remplissez true ou false pour décrire si l'événement est un bouillonnement ou un déclencheur de capture, true signifie capture et la valeur par défaut false signifie bouillonnement.

//方式一
<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 = fonction(){}

window.onresizeNe peut être utilisé que dans un seul composant, s'il est appelé par plusieurs composants, il sera écrasé

//方式二
<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>  

Les deux méthodes ci-dessus sont naturellement utiles, mais certains scénarios ne sont pas applicables.

Par exemple, il existe une barre latérale qui peut être réduite. Lorsque la barre latérale est réduite, la taille de la fenêtre du navigateur ne change pas. Cependant, comme la page est réactive, la largeur et la hauteur du conteneur dans la zone de contenu changent. cette fois, nous devons surveiller la taille du conteneur. Modifications pour obtenir un nouveau rendu des graphiques echarts.

L'API Web fournit une méthode ResizeObserver pour réaliser

//方式三
<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>