vue+element-ui解决浏览器缩放echarts大小不变问题

原文链接：blog.csdn.net/csl125/arti…

第一步：在项目中安装 element-resize-detector

npm install element-resize-detector

第二步：在项目中使用

html:

<div id="test">
    <div id="eChart">
</div>

js:

require 引入使用，在cli项目中使用，需要用到的页面 ***.vue 引入

var elementResizeDetectorMaker = require("element-resize-detector")

在mounted中启用

var erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById("test"), function (element) {
      var width = element.offsetWidth
      var height = element.offsetHeight
      that.$nextTick(function () {
        console.log("Size: " + width + "x" + height)
        //使echarts尺寸重置
        that.$echarts.init(document.getElementById("eChart")).resize()
       
      })
    })