实现echarts 调用接口清空上一次的数据,二次渲染图表

mychart.setOption(option,true)

还有其他两种方式,我自己的VUE项目测试不行,不知道是不是我用法错了

myChart.clear()
mychart.resize()

例子(VUE):

    data(){
    
    
      return{
    
    
        weather:{
    
    
          vos:[0],    //数据之一
          recvTime:[0]   //横坐标时间 ,这里先定义两个字段值是为了初始化
          //echart 中要初始化能够显示出横线,至少需要一条X轴数据和一条Y轴数据
        },
      }
    },
	mounted(){
    
    
      this.initChart();
    },
	methods:{
    
    
      // 初始化
      initChart(){
    
    
        let chartWeather= echarts.getInstanceByDom(document.getElementById('chart-weather'));   //getInstanceByDom()这个函数是根据DOM来找到chart
        if (chartWeather== null) {
    
     // 如果不存在,就进行初始化。
          chartWeather= echarts.init(document.getElementById('chart-weather'));
        }
        var option = {
    
    
          // .......
        };
        option && chartWeather.setOption(option,true);
      },

      // 渲染
      async renderChart(){
    
    
        // 调用showLoading方法,响应时间过长时转圈圈提示
        var chartWeather= echarts.getInstanceByDom(document.getElementById('chart-weather'));
        chartSpeed.showLoading({
    
    
          text: 'loading',
          color: '#c23531',
          textColor: '#000',
          maskColor: 'rgba(255, 255, 255, 0.2)',
          zlevel: 0,
        });
        let res = await APi._WeatherMonitoring("weatherGraph"); //这是自己封装的接口
        if(res.data.length === 0){
    
      //当后台请求没有数据时,遍历对象全赋值为0
          for (let key in this.weather){
    
    
            this.weather[key] = [0]
          }
        }else {
    
    
			this.oArrayExtraction(res.data,this.weather);
        }
        chartWeather.hideLoading();  //请求结束后清楚圈圈
        this.initChart()
      },

      //循环提取 数组对象 组合成 对象数组
      oArrayExtraction(data,list){
    
    
         if(data!=null){
    
    
           for (let key in data[0]){
    
    
             list[key] = data.map(obj => {
    
    return obj[key]})
           }
         }
      }
	}

在这里插入图片描述在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43691886/article/details/113732745