echarts 实时刷新图表

2023.11.23今天我学习了如何对echarts图表进行实时刷新，如：一分钟刷新一次，或是五分钟刷新一次。

代码如下：

<template>
  <div ref="bar" style="width:200px;height:200px"/>
</template>

<script>
 export default{
  data(){
   return{
      isFirstLoad:true,//第一次刷新
      setInterval:0,//初始化定时器
    }
  },

  created(){
    this.chart = this.$echarts.init(this.$refs.bar)//定义图表
    this.getList()//多包一层，不然初始化会渲染失败
  },

  mounted(){
    let time = 1//自定义刷新的时间
    this.setInterval = setInterval(()=>{
     if(!isFirstLoad){
       this.getEcharts()//初始化加载图表的时候不执行，后面根据时间执行
     }
   },time*60*1000)//这样是一分钟加载一次图表，时间可以自己修改
  },

  methods:{
     getList(){
        this.getEcharts()//初始化加载图表，只有第一次执行，后面都不执行
     },
     getEcharts(){
       if(this.isFirstLoad){
         this.isFirstLoad = false//第一次加载渲染，之后都走刷新的方法
       }

       let option = {.....}//图表的方法
       this.chart.setOption()
     }
   } 
}
</script>

这样就可以对图表进行实时刷新了。