Hören Sie sich das Scrollen der Seite an, initialisieren Sie dann das Symbol und zeigen Sie, was Echarts tun soll

Hallo Hai, ich komme wieder! Jemand hat heute eine solche Frage gestellt: Wenn auf einer Seite mehrere Diagramme vorhanden sind und jedes Diagramm sehr hoch ist, befindet sich auf der rechten Seite des Browsers ein Scrollrad. Beim Initialisieren der Seite ist nur das erste Diagramm zu sehen. Wenn Sie dann mit der Maus nach unten scrollen (auf eine bestimmte Höhe rollen), wird das Diagramm unten angezeigt, und zwar dynamisch und initialisiert. Wow, ja, das ist das Gefühl.

Auf diese Weise verwenden wir ein Scroll-Ereignis, das das Fenster überwacht. oberer Code

  data() {
    return {
      chart: {},
    };
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(选择到你想要的dom元素);
      var option;
      option=...(自己粘贴)
      this.chart.setOption(option);
    },
  },
//在mounted里添加监听滚轮滚动事件
  mounted() {
//保存this,在下面的函数里，this可不是指Vue Component了
    let that = this;
//添加监听事件，监听滚动事件
    window.addEventListener("scroll", function () {
      //如果滚到高度距离上边大于一个特定值 再初始化这个chart，否则dispose（销毁）这个图表实例（如果不要求上拉销毁实例，可以换成return）
      if (document.documentElement.scrollTop > 300) {
        that.initChart();
      } else {
        that.chart.dispose();
      }
    });
  },

In diesem Fall können wir am Anfang nur die Oberseite sehen und dann die Initialisierung aufrufen, nachdem wir nach unten gescrollt haben (bei der Initialisierung wird eine Anforderung gesendet, um das Datenrenderingdiagramm abzurufen). Auf diese Weise lässt sich das Problem leicht lösen. Also worauf warten Sie noch? Probieren Sie es einfach aus! Bis zum nächsten Mal