vue中监听页面尺寸变化，加载echarts地图背景图

撒欢啦

于 2024-08-08 17:11:49 发布

阅读量371

点赞数 6

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_44212344/article/details/141029613

版权

项目场景：vue中监听页面尺寸变化，加载echarts地图背景图

echarts地图中的背景图不能随着自适应变化，导致地图和背景图不吻合，监听页面尺寸变化，不符合大屏尺寸的隐藏地图背景图

解决方案：

created() {
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        // this.windowHeight = document.documentElement.clientHeight // 高
        this.windowWidth = document.documentElement.clientWidth // 宽
      })()
    }
  },
`

watch: {
    // 监听页面高度
    // windowHeight(val) {
    //   console.log('实时屏幕高度：', val, this.windowHeight)
    // },
    // 监听页面宽度
    windowWidth(val) {
      // console.log('实时屏幕宽度：', val, this.windowHeight)，小于3840的不加载地图背景图
      if (val < 3840) {
        this.mapFlag = 'transparent';
      }
      if (val == 3840) {
        this.mapFlag = {
          image: this.$refs.mapSvgAreaMap, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
          repeat: 'no-repeat', // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
          x: 115, // 可以调位置
          y: 260,
        };
      }
      this.$nextTick(() => {
        setTimeout(() => {
          this.initAreaMap();//调用echarts函数
        }, 300);
      })
    }
  },

 setRemMap() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  // const scale = document.documentElement.clientWidth / 3840;  if (document.documentElement.clientWidth <   3840) {
    this.mapFlag = 'transparent';
  }
  if (document.documentElement.clientWidth == 3840) {
    this.mapFlag = {
      image: this.$refs.mapSvgAreaMap, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
      repeat: 'no-repeat', // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
      x: 115, // 可以调位置
      y: 260,
    };
  }
  setTimeout(() => {
    this.initAreaMap();
  }, 300);
},