vue 監聽窗體變化 echarts自適應

vue 監聽窗體變化

監聽窗體變化

這個是什么意思呢，就是當瀏覽器窗體發生變化的時候會觸發。主要用在布局計算，比如說分辨率不一樣，可能高度寬度需要重新計算渲染。在一個就是很典型的echarts報表，當我們的瀏覽器縮放發生變化，或者是電腦分辨率發生變化之后，echarts報表大小位置啥的是不會發生變化的，但是這個時候就會出現問題，所以說就可以使用這個方法監聽瀏覽器窗體變化，來重新渲染echarts報表，使它不至於錯版。

就像下面這張圖，如果不適應，當瀏覽器縮放echarts報表就是單純的跟瀏覽器大小縮放（左），而自適應了之后，或根據瀏覽器縮放重新渲染合適的大小（右）。

window.onresize = () => {
  return (() => {
     // 這里寫當窗體變化的業務邏輯
     // ...
  })()
}

窗體變化echarts報表重新渲染問題

當窗體變化之后，echarts會搓板，不能自適應，需要處理，下面是處理的方式。

首先需要一個js文件 a.js，把他放到 public 文件夾 js 文件夾下就可以。

var EleResize = {
  _handleResize: function (e) {
    var ele = e.target || e.srcElement
    var trigger = ele.__resizeTrigger__
    if (trigger) {
      var handlers = trigger.__z_resizeListeners
      if (handlers) {
        var size = handlers.length
        for (var i = 0; i < size; i++) {
          var h = handlers[i]
          var handler = h.handler
          var context = h.context
          handler.apply(context, [e])
        }
      }
    }
  },
  _removeHandler: function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (handlers) {
      var size = handlers.length
      for (var i = 0; i < size; i++) {
        var h = handlers[i]
        if (h.handler === handler && h.context === context) {
          handlers.splice(i, 1)
          return
        }
      }
    }
  },
  _createResizeTrigger: function (ele) {
    var obj = document.createElement('object')
    obj.setAttribute('style',
      'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
    obj.onload = EleResize._handleObjectLoad
    obj.type = 'text/html'
    ele.appendChild(obj)
    obj.data = 'about:blank'
    return obj
  },
  _handleObjectLoad: function (evt) {
    this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
    this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
  }
}
if (document.attachEvent) { // ie9-10
  EleResize.on = function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (!handlers) {
      handlers = []
      ele.__z_resizeListeners = handlers
      ele.__resizeTrigger__ = ele
      ele.attachEvent('onresize', EleResize._handleResize)
    }
    handlers.push({
      handler: handler,
      context: context
    })
  }
  EleResize.off = function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (handlers) {
      EleResize._removeHandler(ele, handler, context)
      if (handlers.length === 0) {
        ele.detachEvent('onresize', EleResize._handleResize)
        delete ele.__z_resizeListeners
      }
    }
  }
} else {
  EleResize.on = function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (!handlers) {
      handlers = []
      ele.__z_resizeListeners = handlers

      if (getComputedStyle(ele, null).position === 'static') {
        ele.style.position = 'relative'
      }
      var obj = EleResize._createResizeTrigger(ele)
      ele.__resizeTrigger__ = obj
      obj.__resizeElement__ = ele
    }
    handlers.push({
      handler: handler,
      context: context
    })
  }
  EleResize.off = function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (handlers) {
      EleResize._removeHandler(ele, handler, context)
      if (handlers.length === 0) {
        var trigger = ele.__resizeTrigger__
        if (trigger) {
          trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
          ele.removeChild(trigger)
          delete ele.__resizeTrigger__
        }
        delete ele.__z_resizeListeners
      }
    }
  }
}
export {EleResize}

然后在 echarts 組件中引用一下 a.js 文件

 import {EleResize} from '../../public/js/a.js'

然后設置重新渲染

// 改變屏幕大小圖表重新加載
var resizeDiv = document.getElementById(id) // 這個id是渲染echarts的div的id
var listener = () => {
  this.echarts.resize()
}
EleResize.on(resizeDiv, listener)
this.echarts.clear()
this.echarts.setOption(option);

當瀏覽器縮放調整的時候，echarts報表會重新根據大小渲染合適的位置和大小

效果完成！