提交修改

fengxiang

2018-07-13 ef18cca293a817e22908c9adf77c3cbe8a640d8a

 src/app/routes/home-page/home-page/home-page.component.ts

@@ -8,29 +8,98 @@
  styleUrls: ["./home-page.component.less"]
})
export class HomePageComponent implements OnInit {
  public cardData: {'api'?:number,'temperature'?:number,'windDirection'?: string,'pm25'?: number}
          = {};
  public cardData: {'api'?:number,'temperature'?:number,'windDirection'?: string,'pm25'?: number} = {};

  constructor(
    private http:_HttpClient,
  ) {
  }

  salesData: any[] =  [ ];
  ngOnInit() {
    zip(
       this.http.get('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=condition'),
       this.http.get('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=aqi')
       this.http.get<any>('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=condition'),
       this.http.get<any>('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=aqi')

     ).subscribe(
        ([conRes,aqiRes]) => {
          console.log(conRes);
          console.log(aqiRes);
          if( conRes.code == 0 && aqiRes.code == 0 ) {
            this.cardData.windDirection =conRes.data.condition.windDir;
            this.cardData.temperature =conRes.data.condition.temp;
            this.cardData.windDirection = conRes.data.condition.windDir;
            this.cardData.temperature = conRes.data.condition.temp;
            this.cardData.api = aqiRes.data.aqi.value;
            this.cardData.pm25 = aqiRes.data.aqi.pm25;
          }
        }
     )
     );
     this.http.get('/chart').subscribe((res: any) => {
      // this.webSite = res.visitData.slice(0, 10);
      this.salesData = res.salesData;
      // this.offlineChartData = res.offlineChartData;
  });
  }
  public aqiChartOption
  public aqiEchartsIntance;
  public aqiChartLoading = false;
  public onApiChartInit(e): void {
        this.aqiEchartsIntance = e;
  }
  private reloadChart(): void {
    // const  timeList = this.grid.columns.map(item => item.text);  
     if (!!this.aqiEchartsIntance) {
         this.aqiChartOption = null;
         this.aqiEchartsIntance.clear();
     }
    //  let series = null;
    //  if ( this.chartSelectedIndex < this.grid.data.length ) {
    //     series = [{type: 'line', data: this.grid.data[this.chartSelectedIndex]}];
    //  }
     
    //  this.initOpton(chartOption ,{ xAxis : [{data : []}]});
    //  this.aqiChartOption = true;
    this.initOpton(this.aqiChartOption ,{ xAxis : [{data : []}]});
  }
  private initOpton(chartOption,opt: {[key: string]: object}) {
     const defaultOption = {
        title: {
            left: 'center'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: []
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
        ]
    };
    $.extend(true, defaultOption, opt);
    chartOption = defaultOption;
  }
}