vue Echarts自适应浏览器resize报错：Cannot read property 'resize' of undefined

1.问题

今天在做Echarts自适应浏览器时，发现拖动窗口进行缩放时，会出现一个问题：Cannot read property ‘resize’ of undefined。

Echarts插件绘制的柱状图正常情况下页面截图：

但是当我拖动浏览器窗口的边框进行缩放时会报错：

相关代码如下：

    mounted() {
      //在mounted生命周期函数中实例化echarts对象
      this.drawHistogarm();
    },
    methods:{
      drawHistogarm(){
        //初始化echarts实例
        let histogram = this.$echarts.init(document.getElementById('histogramChart'))
        let option = {
          title: {
            text: '柱状图示例',
            left: 'center'
          },
          tooltip: {
            trigger:'axis'
          },
          xAxis: {
            type: 'category',
            data: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '数量',
            type: 'bar',
            barWidth: '50%',//设置柱子的宽度
            data: [204,106,190,230,100,170,201]
          }]
        };
        histogram.setOption(option);
        window.addEventListener("resize", () => {
          this.histogram.resize();
        })
      }
    }

所以，应该是缩放时自适应那块的代码出错了。查找之后发现，原来问题出在this上。

代码中两次用到了this，第一次是在mounted生命周期函数中实例化echarts对象，第二次是在window监听事件中监听窗口尺寸的自适应，调试发现：


第一次this是指向VueComponent组件，也就是柱状图的div；

第二次this则是指向监听对象，也就是window，但是在这里需要的是在window的监听对象中对柱状图div进行自适应操作。

2.解决办法

所以，去掉this，修改代码如下：

window.addEventListener("resize", () => {
      histogram.resize();
})

3.成果

Chrome浏览器正常尺寸时，右上角显示当前窗口大小为：1680px * 865px，Echarts柱状图如下：

当浏览器缩小时，如下图所示，右上角显示当前窗口大小为：962px * 805px，可以看到，Echarts柱状图也跟着变小了，实现了自适应的效果：