vue中在echarts里设置的定时器清除不掉问题及解决

 更新时间:2023年06月29日 09:41:09   作者:听听那晚风  
这篇文章主要介绍了vue中在echarts里设置的定时器清除不掉问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

在echarts里设置的定时器清除不掉问题

在动态图里,往往需要用到定时器去动态渲染数据,

我的需求是:当x轴类目过多的时候,就让它自动滚动,这个时候需要用到定时器去动态的控制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,发现怎么也清除不了这个定时器,现在讲一下解决思路

造成这个bug的原因是:

因为要将后端返的数据赋值给柱形图里series的data,我一开始采用的方式是,用watch监听返回的值,然后赋值给data,这样做的目的是为了能够渲染出图形,如果直接赋值,图形是不会生效的。

关键就在这个watch监听,因为我一直在监听,导致一直生成定时器,才使得用clearInterval也无法清除掉定时器,因为你即使清除了 它又立马生成了一个新的定时器。

分析出问题所在,那我们就换一种方式去赋值,然后我采用了

在.then里使用this.$nextTick 去调用生成echarts图形的函数,也就是

getData(){
    this.$axios.selectEfficiencyExhibition(data).then((res) => {
        // console.log("设备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节点。
      if (myChart == null) {
        // 如果不存在,就进行初始化。
        myChart = that.$echarts.init(document.getElementById("productivity"));
      }
    var option={
        //其他配置我就跳过不写了
        dataZoom: [
          {
            type: "inside", //拖拽 slider 为滚动
            xAxisIndex: 0, //控制第一个x轴
            startValue: 0,
            endValue: that.xNum,//这个值是我动态设置显示多少个柱形
            show: true,
          },
        ],
        series:{
            name: "绿灯",
            type: "bar",
            stack: "total",
            barMaxWidth: 50,
            data: this.barData,//后端返的柱形图数据
            itemStyle: {
              normal: { color: "#14ee14" },
            },
        }
    }
    // 使用刚指定的配置项和数据显示图表。
      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)就能清除掉

整体就这么一个思路,其实解决起来也很简单,只是换了一种动态赋值方式,关键是要分析正确导致问题的原因。

vue3定时+echarts的细节处理

1、如果在当前页面停留时间久了会占满内存导致图表卡顿最后导致崩溃

2、当处理了占满内存之后如果页面切换不去点回去的过程中还是会崩溃

3、如果有多个图表想进行关联处理

4、当封装一个组件使用echarts.getInstanceByDom类型不匹配处理

5、当浏览器窗口改变之后 图表自适应之后会移位的问题

6、折线窗口如果数据数据过大导致起伏不明显问题

// 查询按钮点击事件
const search = () => {
    if (listParams.datePicker) { //如果是时间则取消自动刷新
        clearInterval(time.value)
        getAllList()
        titleBegin.value = '开启自动刷新'
    } else {
        getAllList()
        titleBegin.value = '关闭自动刷新'
    }
}
//监听数据并计时
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) {
        // 清除定时任务
        clearInterval(time.value)
        time.value = null
    } else {
        // 开启定时任务
        getAllList()
    }
})
//数据值大导致起伏不明显问题
yAxis: {
     min: function (value:any) { // 取最小值向下取整为最小刻度
         return 0
     },
            // 设置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' }
     ]
},
]
//组件初次进来或者销毁清空图表
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) }) // 自适应屏幕
        }
    })
})
onBeforeUnmount(() => {
    const myChart = echarts.getInstanceByDom(document.getElementById(myCanvas.value)!)
    if (myChart) {
        myChart.clear()
    }
})

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue 401配合Vuex防止多次弹框的案例

    Vue 401配合Vuex防止多次弹框的案例

    这篇文章主要介绍了Vue 401配合Vuex防止多次弹框的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • element中async-validator异步请求验证使用

    element中async-validator异步请求验证使用

    本文主要介绍了element中async-validator异步请求验证使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 加快Vue项目的开发速度的方法

    加快Vue项目的开发速度的方法

    这篇文章主要介绍了加快Vue项目的开发速度的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 详解Vue中的MVVM原理和实现方法

    详解Vue中的MVVM原理和实现方法

    这篇文章主要介绍了Vue中的MVVM原理和实现方法,文中讲解非常细致,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    今天小编就为大家分享一篇解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue3缓存页面keep-alive及路由统一处理详解

    vue3缓存页面keep-alive及路由统一处理详解

    当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下
    2021-10-10
  • vue 路由懒加载中给 Webpack Chunks 命名的方法

    vue 路由懒加载中给 Webpack Chunks 命名的方法

    这篇文章主要介绍了在 vue 路由懒加载中给 Webpack Chunks 命名的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 解决vue处理axios post请求传参的问题

    解决vue处理axios post请求传参的问题

    下面小编就为大家分享一篇解决vue处理axios post请求传参的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue router2.0二级路由的简单使用

    vue router2.0二级路由的简单使用

    这篇文章主要为大家详细介绍了vue router2.0二级路由的简单使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 公共Hooks封装文件下载useDownloadFile实例详解

    公共Hooks封装文件下载useDownloadFile实例详解

    这篇文章主要为大家介绍了公共Hooks封装文件下载useDownloadFile实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11

最新评论