echarts 清空上一次加载的数据

目标效果及数据格式

echarts目标链接

后台数据格式

Json中List类型，并遍历List中的对象

  for(var i in sigleRow)
    {
       chargingPowerList.push(sigleRow[i].chargingPower);
       drivingMileageList.push(sigleRow[i].drivingMileage);
       numList.push(sigleRow[i].num);
     }

转化后格式：

myChart.setOption(option,true)

series虽然是[] 数组，但是任然会保留上次查询所得结果，使用myChart.setOption(option,true)语句可以更新页面效果
如果这种方式没有解决，可以参考下文，使用setOption

最终效果

完整代码如下

      countCollum(flag){
        var ydata = {};
        var linename = {
          xname:'',
          yname:''
        };
        
        let lengendName = [];// echart legend
        let chargingPowerObj = [],drivingMileageObj = [],numObj = [];
        this.listData.forEach((element,index) => {
          lengendName.push(element.carName);
          var sigleRow = eval(element.workVehicleStatisticsList);
          let chargingPowerList = [];
          let drivingMileageList = [];
          let numList = [];
        
          for(var i in sigleRow)
          {
            chargingPowerList.push(sigleRow[i].chargingPower);
            drivingMileageList.push(sigleRow[i].drivingMileage);
            numList.push(sigleRow[i].num);
          }
          chargingPowerObj.push(chargingPowerList);
          drivingMileageObj.push(drivingMileageList);
          numObj.push(numList);
        });
          console.log('element-11-',chargingPowerObj,drivingMileageObj)
        if(flag == 'countnum'){
          ydata = numObj;
          linename.xname = '统计时间';
          linename.yname = '次数/次';
          this.moveCarCountLine(numObj,linename,lengendName);
    
        }else if(flag == 'countkwh'){
          this.fiveOpera = '';
          linename.xname = '统计时间';
          linename.yname = '电量/度';
          ydata = chargingPowerObj;
          this.moveCarCountLine(chargingPowerObj,linename,lengendName);

        }else if(flag == 'countkm'){
          this.fiveOpera = '';
          linename.xname = '统计时间';
          linename.yname = '里程/公里';
          this.moveCarCountLine(drivingMileageObj,linename,lengendName);
        }else{
          ydata = [];
        }

        chargingPowerObj = [];
        drivingMileageObj = [];
        numObj = [];
      },
	moveCarCountLine( ydata, linename,lengendName) {
        let _this = this;
        var moveCarCount = _this.$echarts.init(document.getElementById("moveCarCountInfoId"));
        var areaChargeOpt = {
          tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          legend: {
              data: lengendName
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          yAxis:  {
              type: 'value'
          },
          xAxis: {
              type: 'category',
              data: _this.xzhouname
          },
          series: _this.seriesData(ydata,lengendName)
        };
        moveCarCount.setOption(areaChargeOpt,true);
      },
      seriesData( ydata, lengendName){
        console.log('seriesData', ydata,lengendName)
        var series = [];
        ydata.forEach((element,index) => {
        console.log('seriesDataelement',element)
          let item = {
            name: lengendName[index],
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: ydata[index]
          }
          series.push(item);
        })
        console.log('seriesDataseriesData',series)
        return series;
      },