首页 前端知识 echarts一直报警告has been disposed

echarts一直报警告has been disposed

2024-02-25 11:02:44 前端知识 前端哥 632 888 我要收藏

一、警告展示

在这里插入图片描述

二、警告出现原因

(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,写的不好,欢迎批评指正~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2691.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!