vue-echarts出现Uncaught TypeError: Cannot read property 'dispatchAction' of undefined

在vue项目中，使用自动展示的功能，能运行，但是一直报错Uncaught TypeError: Cannot read property 'dispatchAction' of undefined。虽然可以运行，一直打印错误看着挺闹心的。试了好久找了解决办法。

报错代码实现部分摘录

播放代码实现：

<template>
  <div :style="styleObj">
    <v-chart :options="options" autoresize ref="cityMap"/>
  </div>
</template>

//自动切换定时器， 自动切换项
let timer = null, nows = -1;

methods: {
    autoShow(length) {
      console.log("length >>> " + length)
      nows = (nows + 1) % length;
      this.$refs.cityMap.dispatchAction({
          type: 'showTip',
          seriesIndex: 1,
          dataIndex: nows
      });
    },
    initAutoShow() {
      //每隔5秒钟自动切换到下一个数据点
        this.autoShow(this.data.length);
        clearInterval(timer);
        timer = setInterval(() => {
            this.autoShow(this.data.length);
        }, 5000);
    },
}

启动定时器：

mounted() {
    //启动自动
    this.initAutoShow();
  },

一直报错Uncaught TypeError: Cannot read property 'dispatchAction' of undefined

解决办法如下：

在data数据添加一个变量，来保存实例变量

data() {
    return {
      cityMap:null //这个属性 保存实例变量
    };
  },

启动定时器：然后赋值cityMap

mounted() {

    this.cityMap = this.$refs.cityMap
    //启动自动
    this.initAutoShow();
  },

定时器方法修改如下“

methods: {
    autoShow(length) {
      console.log("length >>> " + length)
      nows = (nows + 1) % length;
      this.cityMap.dispatchAction({
          type: 'showTip',
          seriesIndex: 1,
          dataIndex: nows
      });
    },
    initAutoShow() {
      //每隔5秒钟自动切换到下一个数据点
        this.autoShow(this.data.length);
        clearInterval(timer);
        timer = setInterval(() => {
            this.autoShow(this.data.length);
        }, 5000);
    },
}