浏览器窗口变化时echart图自适应—— 解决window onresize里写resize方法没效果问题及监听窗口变化，实现多图自适应

在画图方法里，写window.onresize()没有实现echart图的自适应：

代码是不是这样的？

	  this.mychart.setOption(option)
      var that = this
      window.onresize = function() {
        that.mychartOpt.resize()
      }

无论怎样改变浏览器窗口大小都没用，气急败坏，去看了echarts官网API，发现问题了

注意这个词：容器，意味着你的图表所在容器的大小发生改变时，上面的方法才会生效，OK，让我们来检查一波代码：

由init的DOM可以看到，我画这个图的容器是 id 为 operationRecord 的div，而显而易见这个容器的宽高是我固定好的。
当我的浏览器大小发生变化时，随之一起改变大小的容器是最上面的div，而图表本身容器大小并没有发生变化，所以不会触发.resize()事件
解决方案：
文档中有可传参数width、height
只要在使用resize时，传入参数就可以解决，代码：

      var that = this
      window.onresize = function() {
        const wid = that.$refs.optPic.offsetWidth - 40 + 'px'
        that.mychartOpt.resize({ width: wid })
      }

监听窗口变化，页面多个图正确自适应

我的页面如下：

我一开始把 window.onresize 都写在画图的方法里面，但是测试时发现我在改变浏览器大小时鼠标点的最后一个模块 才会发生反应，所以，需要监听一下窗口发生变化的事件：
首先，把window.onresize 写在 mounted 钩子里面:

mounted() {
    // 浏览器窗口大小发生变化
    const that = this
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {
      return (() => {
        that.screenWidth = document.body.clientWidth
      })()
    }
  }

窗口发生变化就会在执行
然后，监听 screenWidth，写方法

 watch: {
    screenWidth() {
      const wid = (this.$refs.optPic.offsetWidth - 40) + 'px'
      if (this.mychartOpt) {
        this.mychartOpt.resize({ width: wid })
      }
      if (this.myChartAlarm) {
        this.myChartAlarm.resize({ width: wid })
      }
      if (this.myChartFault) {
        this.myChartFault.resize({ width: wid })
      }
    }
  }

至此，完成~