vue中使用echarts图表自适应窗口的几种方案

1.使用window.onresize

1 let myChart = this.$echarts.init(document.getElementById(id))
2 window.onresize = function () {
3       myChat.resize()
4 }

缺点：多个echarts的时候就只有最后一个生效了，onresize会被覆盖

 

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

1 let myChart = this.$echarts.init(document.getElementById(dom))
2 let listener= function () {
3       myChat.resize()
4 }
5 window.addEventListener('resize', listener)

缺点：当vue页面路由跳转到下一个页面时，上一个页面的onresize方法会继续执行

 

 

3.实现在div使用onresize方法

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

实现方法：

  1. 在assets 创建 esresize.js 
      1 var EleResize = {
  2   _handleResize: function (e) {
  3     var ele = e.target || e.srcElement
  4     var trigger = ele.__resizeTrigger__
  5     if (trigger) {
  6       var handlers = trigger.__z_resizeListeners
  7       if (handlers) {
  8         var size = handlers.length
  9         for (var i = 0; i < size; i++) {
 10           var h = handlers[i]
 11           var handler = h.handler
 12           var context = h.context
 13           handler.apply(context, [e])
 14         }
 15       }
 16     }
 17   },
 18   _removeHandler: function (ele, handler, context) {
 19     var handlers = ele.__z_resizeListeners
 20     if (handlers) {
 21       var size = handlers.length
 22       for (var i = 0; i < size; i++) {
 23         var h = handlers[i]
 24         if (h.handler === handler && h.context === context) {
 25           handlers.splice(i, 1)
 26           return
 27         }
 28       }
 29     }
 30   },
 31   _createResizeTrigger: function (ele) {
 32     var obj = document.createElement('object')
 33     obj.setAttribute('style',
 34       'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
 35     obj.onload = EleResize._handleObjectLoad
 36     obj.type = 'text/html'
 37     ele.appendChild(obj)
 38     obj.data = 'about:blank'
 39     return obj
 40   },
 41   _handleObjectLoad: function (evt) {
 42     this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
 43     this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
 44   }
 45 }
 46 if (document.attachEvent) { // ie9-10
 47   EleResize.on = function (ele, handler, context) {
 48     var handlers = ele.__z_resizeListeners
 49     if (!handlers) {
 50       handlers = []
 51       ele.__z_resizeListeners = handlers
 52       ele.__resizeTrigger__ = ele
 53       ele.attachEvent('onresize', EleResize._handleResize)
 54     }
 55     handlers.push({
 56       handler: handler,
 57       context: context
 58     })
 59   }
 60   EleResize.off = function (ele, handler, context) {
 61     var handlers = ele.__z_resizeListeners
 62     if (handlers) {
 63       EleResize._removeHandler(ele, handler, context)
 64       if (handlers.length === 0) {
 65         ele.detachEvent('onresize', EleResize._handleResize)
 66         delete ele.__z_resizeListeners
 67       }
 68     }
 69   }
 70 } else {
 71   EleResize.on = function (ele, handler, context) {
 72     var handlers = ele.__z_resizeListeners
 73     if (!handlers) {
 74       handlers = []
 75       ele.__z_resizeListeners = handlers
 76 
 77       if (getComputedStyle(ele, null).position === 'static') {
 78         ele.style.position = 'relative'
 79       }
 80       var obj = EleResize._createResizeTrigger(ele)
 81       ele.__resizeTrigger__ = obj
 82       obj.__resizeElement__ = ele
 83     }
 84     handlers.push({
 85       handler: handler,
 86       context: context
 87     })
 88   }
 89   EleResize.off = function (ele, handler, context) {
 90     var handlers = ele.__z_resizeListeners
 91     if (handlers) {
 92       EleResize._removeHandler(ele, handler, context)
 93       if (handlers.length === 0) {
 94         var trigger = ele.__resizeTrigger__
 95         if (trigger) {
 96           trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
 97           ele.removeChild(trigger)
 98           delete ele.__resizeTrigger__
 99         }
100         delete ele.__z_resizeListeners
101       }
102     }
103   }
104 }
105 export {EleResize}
    View Code

     

  2. 使用echarts的vue页面引入该js 
    import { EleResize } from '../../../assets/js/esresize';

     

     

    1  let listener = function() {
2      myChart.resize();
3 };
4             EleResize.on(document.getElementById('CompanyLevelCount'), listener);

     

    优点：

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

     

     

posted @ 2020-12-17 10:31  喜葵  阅读(7042)  评论(0)  编辑  收藏  举报