import { AfterViewInit , Component , OnDestroy } from '@angular/core' ; import { NbThemeService } from '@nebular/theme' ; @ Component ( { selector : 'ngx-echarts-radar' , template : `
    <div echarts [options]="options" class="echart"></div>
  ` , } ) export class EchartsRadarComponent implements AfterViewInit , OnDestroy { options : any = { } ; themeSubscription : any ; constructor ( private theme ) { } ngAfterViewInit ( ) { this . themeSubscription = this . theme . getJsTheme ( ) . subscribe ( config => { const colors = config . variables ; const echarts = config . variables . echarts ; this . options = { backgroundColor : echarts . bg , color : [ colors . danger , colors . warning ] , tooltip : { } , legend : { data : [ 'Allocated Budget' , 'Actual Spending' ] , textStyle : { color : echarts . textColor , } , } , radar : { name : { textStyle : { color : echarts . textColor , } , } , indicator : [ { name : 'Sales' , max : 6500 } , { name : 'Administration' , max : 16000 } , { name : 'Information Techology' , max : 30000 } , { name : 'Customer Support' , max : 38000 } , { name : 'Development' , max : 52000 } , { name : 'Marketing' , max : 25000 } , ] , splitArea : { areaStyle : { color : 'transparent' , } , } , } , series : [ { name : 'Budget vs Spending' , type : 'radar' , data : [ { value : [ 4300 , 10000 , 28000 , 35000 , 50000 , 19000 ] , name : 'Allocated Budget' , } , { value : [ 5000 , 14000 , 28000 , 31000 , 42000 , 21000 ] , name : 'Actual Spending' , } , ] , } , ] , } ; } ) ; } ngOnDestroy ( ) { this . themeSubscription . unsubscribe ( ) ; } }