echarts一直报警告has been disposed

本文介绍: echarts报循环警告 ha s been di a pose d

一、警告 展示

在这里插入图片描述

二、警告 出现 原因

（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）这个时候点击切换 t ab,可以正常显示隐藏，但是会出现上面的循环警告，但是普通的echarts并不会出现这样的警告，只有当e charts是动态的数据，类似轮播，带有定时器的会出现。

三、解决办法

清除 定时器

// 找到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 &gt;= num) {
                    count = 0
                }
            }, time)

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

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

// 文件在store/global.js   ------- 自定义（此步骤只是想将定时器上一次的时间存起来）
const state = {
    timer: null,
}
const mutations = {
    TIMER: (state, timer) =&gt; {
        state.timer = timer
    },
}
const actions = {
    timer({ commit }, timer) {
        return new Promise((resolve) =&gt; {
            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 &amp;&amp; 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中