监听页面滚动,然后再初始化图标并展示echarts该怎么做

害嗨海,我又来了奥!今天有人问了这样一个问题,如果一个页面,有多张图表,每个图表都很高,导致浏览器右边有滚轮。初始化页面的时候,只看得到第一张图表,然后当鼠标往下滚(滚到一定高度),下面的图表才出来,并且是初始化式地动态地出来。嗖的一下,对,就是这个感觉。

这样呢,我们就要使用一个监听window的滚动事件了。上代码

  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();
      }
    });
  },

这样的话,一开始我们就只能看到上面的,划到下面去再调用初始化(初始化里面发请求获取数据渲染图表)。这样问题就迎刃而解了,还等什么,快去试一试吧!下次见

猜你喜欢

转载自blog.csdn.net/weixin_68067009/article/details/125209851