vue 下载pdf

阅读 24

2024-04-30

使用方法:
1、创建 IntersectionObserver 实例:
var observer = new IntersectionObserver(callback, options);
callback 是一个回调函数,用于处理交叉状态的变化。
options 是一个配置对象,可以设置 root(祖先元素)、rootMargin(边界)、thresholds(阈值)等参数。

2、观察目标元素:observer.observe(target);

3、处理交叉状态变化:
var callback = function(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 处理目标元素进入可视区域的逻辑
    } else {
      // 处理目标元素离开可视区域的逻辑
    }
  });
};

4、停止观察:observer.unobserve(target);
  mounted () {
    await this.getInitDataFun() //  数据
      this.$nextTick(() => {
        this.getEchartData() // 绘制图表
     })
  },

  methods: {
    // 获取数据 处理图表需要的data
     getInitDataFun () {
      return new Promise(async (resolve, reject) => {
        ........
      })
    },

    getEchartData () {
      const salesTrendDom = this.$refs.salesTrendRef //销售额
      const orderCustomerDom = this.$refs.orderCustomerRef //下单客户数趋势
      
      // 销售额
      if (salesTrendDom) {
        this.loadAnimationFun(salesTrendDom, 'salesTrendOption')
      }

      //下单客户数趋势
      if (orderCustomerDom) {
        this.loadAnimationFun(orderCustomerDom, 'orderCustomerOption')
      }
    },


    // 加载动画
    loadAnimationFun (dom, option) {
      let myChart = this.$echarts.init(dom)
      var observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // 加载动画
            myChart.setOption(this[option])
            this.addLoadEvent(myChart.resize) //添加 监听屏幕缩放
            setTimeout(function () {
         // 使用了resize之后,动画失效,这是echarts5的bug,echarts4不会  动画在这里加就好了
              myChart.resize({
                animation: {
                  duration: 1800,
                  easing: 'ease-in-out'
                }
              })
            }, 1)
            // 停止观察图表
            observer.unobserve(entry.target)
          }
        })
      })
      // 观察图表元素
      observer.observe(myChart.getDom())
    },


  addLoadEvent (fn) {
      var old = window.onresize
      if (typeof window.onresize != 'function') {
        //防止多个window.onresize   冲突  解决
        window.onresize = fn
      } else {
        window.onresize = function () {
          old()
          setTimeout(function () {
            //个别时候无法刷新echarts 延迟1MS  解决
            fn()
          }, 1)
        }
      }
    }
}

精彩评论(0)

0 0 举报