1
1
import { Component , OnDestroy } from '@angular/core' ;
2
+ import { HttpClient } from '@angular/common/http' ;
3
+ import { combineLatest } from 'rxjs/observable/combineLatest' ;
4
+ import { takeWhile } from 'rxjs/operators/takeWhile' ;
5
+ import { NgxEchartsService } from 'ngx-echarts' ;
2
6
import { NbThemeService } from '@nebular/theme' ;
3
7
4
8
@Component ( {
@@ -23,12 +27,21 @@ export class BubbleMapComponent implements OnDestroy {
23
27
24
28
bubbleTheme : any ;
25
29
geoColors : any [ ] ;
26
- themeSubscription : any ;
27
30
28
- constructor ( private theme : NbThemeService ) {
31
+ private alive = true ;
29
32
30
- this . themeSubscription = this . theme . getJsTheme ( )
31
- . subscribe ( config => {
33
+ constructor ( private theme : NbThemeService ,
34
+ private http : HttpClient ,
35
+ private es : NgxEchartsService ) {
36
+
37
+ combineLatest ( [
38
+ this . http . get ( 'assets/map/world.json' ) ,
39
+ this . theme . getJsTheme ( ) ,
40
+ ] )
41
+ . pipe ( takeWhile ( ( ) => this . alive ) )
42
+ . subscribe ( ( [ map , config ] : [ any , any ] ) => {
43
+
44
+ this . es . registerMap ( 'world' , map ) ;
32
45
33
46
const colors = config . variables ;
34
47
this . bubbleTheme = config . variables . bubbleMap ;
@@ -527,7 +540,7 @@ export class BubbleMapComponent implements OnDestroy {
527
540
}
528
541
529
542
ngOnDestroy ( ) {
530
- this . themeSubscription . unsubscribe ( ) ;
543
+ this . alive = false ;
531
544
}
532
545
533
546
private getRandomGeoColor ( ) {
0 commit comments