在 vue 中使用 window.onresize及div的resize事件

项目场景：

1. 如何在 vue 中使用 window.onresize
2. 如何避免 覆盖其它的 window.onresize
3. 手动触发 window.onresize
4. echarts 监听图表容器的大小并改变图表大小
5. 使用vue-resize 监听图表容器的大小并改变图表大小

---

div resize 解决方案：

绝大多数据场景下我们只是希望echarts感知外层包裹的resize事件而改变大小

但div并没有resize事件,我们需要借助插件完成该功能

插件 vue-resize

//安装
npm install --save vue-resize

// 引入 vue-resize
import ‘vue-resize/dist/vue-resize.css’
import VueResize from ‘vue-resize’
Vue.use(VueResize)

/**
* echarts + vue-resize
*/
<template>
  <!-- 父容器的position为static以外的值,如relative-->
  <div class="w" style="position: relative;">

    <!-- vue-resize 放在容器根下与echarts 绘制区同级-->
    <resize-observer @notify="handleResize" />

    <!-- echarts 绘制区 -->
    <div ref="canvas" class="canvas" />
  </div>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      loading: false,
      myChart: {
      
      },
      srcData: [
        ['product', '2015', '2016', '2017'],
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
      ]
    }
  },
  mounted() {
      
      
    this.myChart = this.$echarts.init(this.$refs.canvas)
    this.init()
    this.draw(this.srcData)
  },
  methods: {
      
      
    // echarts 初始化样式
    init() {
      
      
      var option = {
      
      
        dataset: {
      
      
          source: []
        },
        xAxis: {
      
       type: 'category' },
        yAxis: {
      
      },
        series: [{
      
       type: 'bar' }, {
      
       type: 'bar' }, {
      
       type: 'bar' }]
      }
      this.myChart.setOption(option)
    },

    // 绘制图表数据
    draw(val) {
      
      
      this.myChart.setOption({
      
      
        dataset: {
      
      
          source: val
        }
      })
    },
    handleResize() {
      
      
      this.myChart && this.myChart.resize()
    }
  }
}
</script>

<style lang="less" scoped>
</style>

window.onresize解决方案：

<script>
/* echarts 监听图表容器的大小并改变图表大小 */
export default {
      
      
  mounted() {
      
      
    this.myChart = this.$echarts.init(this.$refs.canvas)

    // 监听 window.onresize
    window.addEventListener('resize', this.resize, false)
  },

  // 注销 window.onresize
  beforeDestroy() {
      
      
    window.removeEventListener('resize', this.resize)
  },
  methods: {
      
      
    resize() {
      
      
      this.myChart.resize()
    },
    
	// 手动触发window.onresize
    dispatchResize(){
      
      
      try {
      
      
        var ev = document.createEvent('Event');
        ev.initEvent('resize', true, true);
        window.dispatchEvent(ev)
      } catch (e) {
      
      }
    }
  }
}
</script>

---

错误分析

常见的错误代码 1

<script>
export default {
      
      
  mounted() {
      
      
    // 窗口自适应，关键代码
    window.onresize = () => {
      
      
      this.$refs.chart1.resize()
    }
  },

  // 注销window.onresize事件
  destroyed() {
      
      
    window.onresize = null
  }
}
</script>

1. 会覆盖其它的 window.onresize,导致页面中只有一个window.onresize生效.
2. 不要在destroyed中注销,容易引起不必要的麻烦.请使用beforeDestroy

   <script>
     export default {
         
         
        beforeDestroy() {
         
         
         // 输出结果: {canvas: div.canvas}
         console.log('beforeDestroy', this.$refs)
       },
       destroyed() {
         
         
         // 输出结果: {canvas: div.undefined}
         console.log('destroyed', this.$refs)
       }
     }
   </script>
   

---

常见的错误代码 2

<script>
  window.addEventListener('resize', this.resize(), false)
</script>

抄作业都没抄明白的代码
window.addEventListener 第二个参数接收了this.resize()执行结果，而不是一个function

---

常见的错误代码 3

<script>
  window.addEventListener('resize', () => {
      
      
      this.resize()
  })
</script>

匿名函数你怎么销毁?