Angular使用echarts环形图数据展示NaN，点击之后才展示数据

如果确定从后端拿到了数据，并且数据显示的是NaN，点击之后才展示拿到的数据，但是环形图仍旧显示不出来，那么可以确定是页面的渲染问题。

首先我们需要了解Angular的生命周期函数ngOnInit() 和ngAfterViewInit(),

ngOnOnInit()用来显示数据绑定属性并设置指令或组件的输入属性之后初始化指令或组件,一般写的方法都在其中进行初始化。（之所以出现拿到数据之后展示NaN的原因出现在这一步）

ngAfterViewInit()在初始化组件的视图和子视图或包含指令的视图之后响应，在Angular完全初始化组件视图后调用的生命周期钩子。

如何解决：

主要原因就是ngOnInit()时，图形的渲染比数据的加载要快，导致环形图过来了，但是没数据，所以没图（由于 Angular在更改检测期间遍历视图层次结构，因此需要确保子项的更改不会尝试导致其父项的更改。由于单向数据流的工作方式，这种更改将无法正确呈现。angular官网），数据展示形式为NaN，点击一下数据才能正常展示，

解决办法就是在ngOnInit（）里面渲染环形图时设置一个计时器或者定时器。setTimeOut（）setInterval（）

@ViewChild('myCharts', {static: false}) public myCharts: any;
public optionsStorage = {
    title: {
      text: '内存使用情况',
    },
    tooltip: {
      trigger: 'item',
      renderMode: false,
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      x: '75%',
      y: '27%',
      formatter: (name) => {
        const data = this.optionsStorage.series[0].data;
        let total:number = 0;
        let tarValue:any = 0;
        for (let i = 0; i < data.length; i++) {
          total += +data[i].value;  //
          if (data[i].name == name) {
            tarValue = data[i].value;
          }
        }
        const p = (tarValue / total * 100).toFixed(1);
        return name + ' ' + ' ' + tarValue + 'M' + ' '  + p + '%';        
      },
      data: ['资源预留量', '内存剩余量', '内存使用情况'],
    },
    series: [{
      name: 'CPU使用情况',
      type: 'pie',
      center: ['35%', '50%'],
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,

      // 显示指针
      label: {
        normal: {
          show: false,
          position: 'center',
          emphasis: {
            show: true
          }
         },
        labelLine :{show:false},
        emphasis: {
          label: {
            show: true,
            fontSize: '35',
            fontWeight: 'bold'
          },
        },

      },
      data: [
        { value: '', name: '资源预留量' },
        { value: '', name: '内存剩余量' },
        { value: '', name: '内存使用情况' },
      ]
    }]
  };

//获取数据，应该专门放在.service服务中
getConfig() {
  configUrl = "url接口"  
  return this.http.get<Config>(this.configUrl,data);
}
//在组件中写的（.component.ts）
showConfig(){
    this.configService.getConfig()
        .subscribe((res)=>{
           let arrStorage = this.optionsStorage.series[0];
           arrStorage.data[0].value = res.key1;
           arrStorage.data[1].value = res.key2;
           arrStorage.data[2].value = res.key3 
        })
}


ngOnInit(): void {
     //初始化数据
    this.loadInfo();
    //初始化渲染环形图
    this.timer = setTimeout(()=>{ this.myCharts=echarts.init(document.getElementById('myStorage')).setOption(this.optionsStorage);
    },300)
  }
  ngAfterViewInit() {
    this.echarts = echarts.init(this.myCharts.nativeElement).setOption(this.optionsStorage);;
  }
//如果想要实时渲染环形图的话，一定要加ngOnDestroy(),并且可以将setTimeOut()换成setInterval()
  ngOnDestroy(): void {
    if(this.timer){
      clearTimeout(this.timer)
    }
  }