vue实时监听浏览器大小变化重新渲染百度echarts

一般情况下项目开发用百分百、vh都可以实现自适应，但是如果用到echarts图表会出现一些不兼容的问题，比如说左边菜单的收缩展开，这个需要监听div的实时变化，不然echarts图表不会百分百兼容。下面web建站小编给大家简单介绍一下element-resize-detector插件的使用方法！

1、安装脚手架

npm install element-resize-detector

2、vue项目引用

let elementResizeDetectorMaker = require('element-resize-detector')
let erdm = elementResizeDetectorMaker()
//监听winBox盒子的大小，让echarts图表尺寸重置
erdm.listenTo(document.getElementById('winBox'), item => {
  this.$nextTick(function() {
    echarts.init(document.getElementById('bar')).resize()
    echarts.init(document.getElementById('pie')).resize()
  })
})