vuejs监听页面宽度变化重新加载echarts图表

本是古典何须时尚 2022-12-29 02:13 382阅读 0赞

1，第一种：  
vue通过element-resize-detector监听dom元素

mounted() {
        this.drawChart1()
        this.drawChart2()
        let erd = elementResizeDetectorMaker();
        let that = this
        erd.listenTo(document.getElementById("main1"), (element) => {
          let width = element.offsetWidth;
          let height = element.offsetHeight;
          console.log(width)
          console.log(height)
          that.$nextTick(() => {
            //使echarts尺寸重置
            that.$echarts.init(document.getElementById("main1")).resize();
            that.$echarts.init(document.getElementById("main2")).resize();
          });
        });
      },

参考文章：

https://blog.csdn.net/qq\_22182989/article/details/111403915  
2，第二种：

data() {
        return {
          screenWidth: document.body.clientWidth,
         }
      },
      mounted() {
        this.drawChart1();
        this.drawChart2();
        const that = this;
        window.onresize = () => {
          return (() => {
            window.screenWidth = document.body.clientWidth
            that.screenWidth = window.screenWidth
          })()
        }
      },
      watch:{
        screenWidth(val){
          // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
          if(!this.timer){
            // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
            this.screenWidth = val
            this.timer = true
            let that = this
            setTimeout(function(){
              // 打印screenWidth变化的值
              console.log(that.screenWidth)
              that.timer = false
            },400)
          }
        }
      }