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%;  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. 多个方法不会覆盖
原文地址:https://www.cnblogs.com/xikui/p/14148224.html