实现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]})
           }
         }
      }
	}

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值