vue中使用echarts图表自适应的几种基本解决方案-CSDN博客

1.使用window.onresize

let myChart = echarts.init(document.getElementById(dom))
window.onresize = function () {
  	myChat.resize()
}
复制代码

优点：可以根据窗口大小实现自适应

缺点：

1.多个图表自适应写法比较麻烦（当一个页面的图表太多时，这样写法不是很灵活）；
复制代码

let myChart1 = echarts.init(document.getElementById(dom1))
let myChart2 = echarts.init(document.getElementById(dom2))
window.onresize = function () {
  	myChat1.resize()
  	myChat2.resize()
}
复制代码

2.多个vue页面有onresize方法时，会被覆盖；

3.当vue页面路由跳转到下一个页面时，上一个页面的onresize方法会继续执行，（这个时候下一个页面已经不需要onresize方法执行了，当图表过多时会造成页面卡顿）
复制代码

2.使用window.addEventListener添加resize方法

let myChart = echarts.init(document.getElementById(dom))
let sizeFun = function () {
  	myChat.resize()
}
window.addEventListener('resize', sizeFun )
复制代码

优点：

1.可以根据窗口大小实现自适应；

2.将图表方法封装以后，只需要执行一遍就可以实现多个图表的自适应；

3.不会被覆盖
复制代码

缺点：

当vue页面路由跳转到下一个页面时，上一个页面的onresize方法会继续执行
【造成这个问题的原因是因为vue是单页面应用，echarts中的操作都是基于window，
当然也可以使用window.removeEventListener在下一个页面删除绑定的方法】
复制代码

点击查看window.removeEventListener使用注意点

3.实现在div使用onresize方法

实现原理：在div上实现类似window的onresize 监听，这样既能实现图表的自适应，也不会因为页面跳转之后继续执行三个页面的onresize 方法

实现方法：

引入esresize.js（文末贴上代码）

2. 在div上绑定对应onresize 方法

优点：

1.可以根据窗口大小实现自适应
2.页面跳转不会执行上次操作
3.多个方法不会覆盖
复制代码

缺点：

暂无发现（如有问题，欢迎各位补充）
复制代码

文章参考：JS监听div的resize事件

github项目地址，喜欢的小伙伴给个star,谢谢

esresize.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}
复制代码