| | |
| | | constructor( |
| | | private http:_HttpClient, |
| | | ) { |
| | | this.reloadAqiChart(); |
| | | this.reloadMeteChart() |
| | | } |
| | | salesData: any[] = [ ]; |
| | | ngOnInit() { |
| | |
| | | // this.webSite = res.visitData.slice(0, 10); |
| | | this.salesData = res.salesData; |
| | | // this.offlineChartData = res.offlineChartData; |
| | | }); |
| | | }); |
| | | this.http.get('/aqi/forecast24hours',{base: 25,range: 10}).subscribe( |
| | | (res: any) => { |
| | | this.aqiEchartsIntance.setOption( |
| | | { |
| | | series: [{type: 'line', data: res}] |
| | | } |
| | | ) |
| | | } |
| | | ); |
| | | this.http.get('/aqi/forecast24hours',{base: 30,range: 8}).subscribe( |
| | | (res: any) => { |
| | | this.meteEchartsIntance.setOption( |
| | | { |
| | | series: [{type: 'line', data: res}] |
| | | } |
| | | ) |
| | | } |
| | | ); |
| | | } |
| | | public aqiChartOption |
| | | |
| | | 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); |
| | | public meteChartOption = {}; |
| | | public meteEchartsIntance; |
| | | public meteChartLoading = false; |
| | | public onMeteChartInit(e): void { |
| | | this.meteEchartsIntance = e; |
| | | } |
| | | private reloadAqiChart(): void { |
| | | // const timeList = this.grid.columns.map(item => item.text); |
| | | if (!!this.aqiEchartsIntance) { |
| | | this.aqiChartOption = null; |
| | | this.aqiEchartsIntance.clear(); |
| | |
| | | // 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 : []}]}); |
| | | this.initOpton(this.aqiChartOption ,{ xAxis : [{data : this.newArray(0, 24, null, '时')}]}); |
| | | } |
| | | private reloadMeteChart(): void { |
| | | if (!!this.aqiEchartsIntance) { |
| | | this.aqiChartOption = null; |
| | | this.aqiEchartsIntance.clear(); |
| | | } |
| | | this.initOpton(this.meteChartOption ,{ xAxis : [{data : this.newArray(0, 24, null, '时')}]}); |
| | | } |
| | | private newArray = (startOrLen: number, len?: number, prefix?: string, suffix?: string) => { |
| | | const result = []; |
| | | const s = !!len ? startOrLen : 0; |
| | | len = !!len ? len : startOrLen; |
| | | suffix = !!suffix ? suffix : ''; |
| | | prefix = !!prefix ? prefix : ''; |
| | | for (let i = s; result.length < len; i++) { |
| | | result.push(prefix + i + suffix); |
| | | } |
| | | return result; |
| | | } |
| | | private initOpton(chartOption,opt: {[key: string]: object}) { |
| | | const defaultOption = { |
| | | title: { |
| | |
| | | series : [ |
| | | ] |
| | | }; |
| | | $.extend(true, defaultOption, opt); |
| | | chartOption = defaultOption; |
| | | Object.assign( defaultOption, opt); |
| | | Object.assign(chartOption, defaultOption); |
| | | } |
| | | } |