快捷導(dǎo)航

vue中在echarts里設(shè)置的定時器清除不掉問題及解決

更新時間：2023年06月29日 09:41:09 作者：聽聽那晚風(fēng)

這篇文章主要介紹了vue中在echarts里設(shè)置的定時器清除不掉問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

在echarts里設(shè)置的定時器清除不掉問題

在動態(tài)圖里，往往需要用到定時器去動態(tài)渲染數(shù)據(jù)，

我的需求是：當(dāng)x軸類目過多的時候，就讓它自動滾動，這個時候需要用到定時器去動態(tài)的控制dataZoom里endValue的值，

this.barInter = setInterval(() => {
? ? ? ? // 每次向后滾動一個，最后一個從頭開始。
? ? ? ? // console.log(this.xNum)
? ? ? ? if (option.dataZoom[0].endValue >= option.series[0].data.length) {
? ? ? ? ? option.dataZoom[0].endValue = that.xNum;
? ? ? ? ? option.dataZoom[0].startValue = 0;
? ? ? ? } else {
? ? ? ? ? option.dataZoom[0].endValue = option.dataZoom[0].endValue + that.xNum;
? ? ? ? ? option.dataZoom[0].startValue = option.dataZoom[0].startValue + that.xNum;
? ? ? ? }
? ? ? ? myChart.setOption(option);
}, 1000);

然后我就遇到一個bug，發(fā)現(xiàn)怎么也清除不了這個定時器，現(xiàn)在講一下解決思路

造成這個bug的原因是：

因為要將后端返的數(shù)據(jù)賦值給柱形圖里series的data，我一開始采用的方式是，用watch監(jiān)聽返回的值，然后賦值給data，這樣做的目的是為了能夠渲染出圖形，如果直接賦值，圖形是不會生效的。

關(guān)鍵就在這個watch監(jiān)聽，因為我一直在監(jiān)聽，導(dǎo)致一直生成定時器，才使得用clearInterval也無法清除掉定時器，因為你即使清除了它又立馬生成了一個新的定時器。

分析出問題所在，那我們就換一種方式去賦值，然后我采用了

在.then里使用this.$nextTick 去調(diào)用生成echarts圖形的函數(shù)，也就是

getData(){
?? ?this.$axios.selectEfficiencyExhibition(data).then((res) => {
? ? ? ? // console.log("設(shè)備OEE");
? ? ? ? // console.log(res.data.data);
? ? ? ? if (res.data.data) {
?? ??? ??? ?this.barData=res.data.data
?? ??? ??? ?this.$nextTick(()=>{
? ? ? ? ? ? ?? ?this.barChart()
? ? ? ? ? ?? ?})
?? ??? ?}
?? ?})
}
barChart(){
?? ? ?let myChart = that.$echarts.getInstanceByDom(
? ? ? ? document.getElementById("productivity")
? ? ? ); //有的話就獲取已有echarts實例的DOM節(jié)點。
? ? ? if (myChart == null) {
? ? ? ? // 如果不存在，就進(jìn)行初始化。
? ? ? ? myChart = that.$echarts.init(document.getElementById("productivity"));
? ? ? }
? ? var option={
?? ??? ?//其他配置我就跳過不寫了
?? ??? ?dataZoom: [
? ? ? ? ? {
? ? ? ? ? ? type: "inside", //拖拽 slider 為滾動
? ? ? ? ? ? xAxisIndex: 0, //控制第一個x軸
? ? ? ? ? ? startValue: 0,
? ? ? ? ? ? endValue: that.xNum,//這個值是我動態(tài)設(shè)置顯示多少個柱形
? ? ? ? ? ? show: true,
? ? ? ? ? },
? ? ? ? ],
? ? ? ? series:{
?? ??? ??? ?name: "綠燈",
? ? ? ? ? ? type: "bar",
? ? ? ? ? ? stack: "total",
? ? ? ? ? ? barMaxWidth: 50,
? ? ? ? ? ? data: this.barData,//后端返的柱形圖數(shù)據(jù)
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? normal: { color: "#14ee14" },
? ? ? ? ? ? },
?? ??? ?}
?? ?}
?? ?// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
? ? ? this.barInter = setInterval(() => {
? ? ? ? // 每次向后滾動一個，最后一個從頭開始。
? ? ? ? if (option.dataZoom[0].endValue >= option.series.data.length) {
? ? ? ? ? option.dataZoom[0].endValue = this.xNum;
? ? ? ? ? option.dataZoom[0].startValue = 0;
? ? ? ? } else {
? ? ? ? ? option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
? ? ? ? ? option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
? ? ? ? }
? ? ? ? myChart.setOption(option);
? ? ? }, 1000); ?
}?? ?

采用這種方式后，就不會一直生成定時器了，直接用clearInterval(this.barInter)就能清除掉

整體就這么一個思路，其實解決起來也很簡單，只是換了一種動態(tài)賦值方式，關(guān)鍵是要分析正確導(dǎo)致問題的原因。

vue3定時+echarts的細(xì)節(jié)處理

1、如果在當(dāng)前頁面停留時間久了會占滿內(nèi)存導(dǎo)致圖表卡頓最后導(dǎo)致崩潰

2、當(dāng)處理了占滿內(nèi)存之后如果頁面切換不去點回去的過程中還是會崩潰

3、如果有多個圖表想進(jìn)行關(guān)聯(lián)處理

4、當(dāng)封裝一個組件使用echarts.getInstanceByDom類型不匹配處理

5、當(dāng)瀏覽器窗口改變之后圖表自適應(yīng)之后會移位的問題

6、折線窗口如果數(shù)據(jù)數(shù)據(jù)過大導(dǎo)致起伏不明顯問題

// 查詢按鈕點擊事件
const search = () => {
    if (listParams.datePicker) { //如果是時間則取消自動刷新
        clearInterval(time.value)
        getAllList()
        titleBegin.value = '開啟自動刷新'
    } else {
        getAllList()
        titleBegin.value = '關(guān)閉自動刷新'
    }
}
//監(jiān)聽數(shù)據(jù)并計時
watch(
    () => chartAvgCostData.value,
    (newVal) => {
        if (!listParams.datePicker) {
            clearInterval(time.value)
            timeOut()
        }
    }
)
//累計計時的方法
const timeOut = () => {
    time.value = setInterval(() => {
        getAllList()
    }, 1000 * 20)
}
//清空定時器效果
onUnmounted(() => {
    clearInterval(time.value)
})
// 需要在切換到其他頁面時停止自動刷新，切回來時再開啟
document.addEventListener('visibilitychange', () => {
    if (
    !listParams.projectName && 
    Object.keys(chartAvgCostData.value).length > 0
    )
    {
        return
    }
    if (document.hidden) {
        // 清除定時任務(wù)
        clearInterval(time.value)
        time.value = null
    } else {
        // 開啟定時任務(wù)
        getAllList()
    }
})
//數(shù)據(jù)值大導(dǎo)致起伏不明顯問題
yAxis: {
     min: function (value:any) { // 取最小值向下取整為最小刻度
         return 0
     },
            // 設(shè)置y軸最大值
    max: function (value:any) { // 取最大值向上取整為最大刻度
        return Math.floor(value.max + (Math.floor(value.max / 4)))
   },
}
series：[
markPoint: {
     data: [
        { type: 'max', name: 'Max' },
        { type: 'min', name: 'Min' }
     ]
},
]
//組件初次進(jìn)來或者銷毀清空圖表
onMounted(() => {
    nextTick(() => {
        let myChart = echarts.getInstanceByDom(document.getElementById(myCanvas.value)!)
        if (myChart) {
            myChart.clear()
        }
        if (myChart === undefined) {
            myChart = echarts.init(document.getElementById(myCanvas.value) as HTMLElement)
            myChart.group = 'group1'
            myChart.setOption(datas.option)
            echarts.connect('group1')
            window.addEventListener('resize', () => { setTimeout(() => { myChart?.resize() }, 300) }) // 自適應(yīng)屏幕
        }
    })
})
onBeforeUnmount(() => {
    const myChart = echarts.getInstanceByDom(document.getElementById(myCanvas.value)!)
    if (myChart) {
        myChart.clear()
    }
})