echarts一直报警告has been disposed

一、警告展示

二、警告出现原因

（1）当需要通过点击tab，传不同的参数切换echarts数据时，如果不先销毁echarts，重新渲染，若接口未返回数据，则echarts图还是显示的有数据时的图，并没有销毁不展示数据

（2）为了解决这个问题，需要在渲染echarts图之前做个判断，将echarts图先销毁再创建渲染

// 先销毁再创建
            if (this.myChart) {
                this.myChart.dispose() //销毁
            }
            this.myChart = null
            var chartDom = document.getElementById('eventType')
            this.myChart = echarts.init(chartDom)
            var data = this.list复制

（3）这个时候点击切换tab,可以正常显示隐藏，但是会出现上面的循环警告，但是普通的echarts并不会出现这样的警告，只有当echarts是动态的数据，类似轮播，带有定时器的会出现。

三、解决办法

清除定时器

// 找到echarts中带有定时器的部分，清除定时器
            var count = 0
            var timeTicket = null
            clearInterval(timeTicket)  //每次调用之前，先清除定时器
            timeTicket = setInterval(function () {
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0, //serieIndex的索引值   可以触发多个
                })
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: count,
                })
                myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: count,
                })
                count++
                if (count >= num) {
                    count = 0
                }
            }, time)复制

本以为这样就解决了？？？？ 现实总是残酷的
还是会出现循环的警告，并没有卵用
仔细想一下，应该是每次调用的时候虽然清除了定时器，但是每当调用一次，他就会新生成一个定时器，我们虽然在调用之前清除了定时器，只是清除了当前的定时器，上一次的定时器还在，并没有清除。

将上一次的定时器存到store中

// 文件在store/global.js   ------- 自定义（此步骤只是想将定时器上一次的时间存起来）
const state = {
    timer: null,
}
const mutations = {
    TIMER: (state, timer) => {
        state.timer = timer
    },
}
const actions = {
    timer({ commit }, timer) {
        return new Promise((resolve) => {
            commit('TIMER', timer)
            resolve(timer)
        })
    },
}
 
export default {
    namespaced: true,
    state,
    mutations,
    actions,
}
 复制

存store,清定时器

每次调用时，若接口有返回值，则执行定时器，并将定时器存到store中，若接口未返回值，则获取store中的定时器，并清除它，然后return,阻止下面继续执行新的定时器

// 这里我定义了一个stop,接口有返回值则为true，否则为false
           if (!stop) {//接口没值
                clearInterval(this.$store.state.global.timer) //清除上一次的定时器
                this.$store.state.global.timer = null //给store中的timer设置为null
                return  //return 阻止下面的定时器，这个时候因为没有值，就不需要echarts展示了
            }
            //执行定时器
            var count = 0
            var timeTicket = null
            timeTicket && clearInterval(timeTicket)
            timeTicket = setInterval(function () {
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0, //serieIndex的索引值   可以触发多个
                })
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: count,
                })
                myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: count,
                })
                count++
                if (count >= num) {
                    count = 0
                }
            }, time)
            this.$store.dispatch('global/timer', timeTicket) //接口有值，将定时器存到store中复制

写在最后

通过以上的操作，循环警告就不报了，tab切换灵活自如，简单记录小bug，写的不好，欢迎批评指正~