Listen to page scrolling, then initialize the icon and show what echarts should do

Hi Hai, here I come again! Someone asked such a question today. If there are multiple charts on a page, and each chart is very high, there will be a scroll wheel on the right side of the browser. When initializing the page, only the first chart can be seen, and then when the mouse scrolls down (rolling to a certain height), the chart below will come out, and it will come out dynamically in an initialized manner. Whoosh, yes, that's the feeling.

In this way, we will use a scroll event that listens to the window. upper 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 this case, we can only see the top at the beginning, and then call the initialization after scrolling to the bottom (in the initialization, a request is sent to obtain the data rendering chart). In this way, the problem is easily solved, so what are you waiting for, go and have a try! see you next time