ngx-echarts从API更新数据

Question

我为更新我的(角10)：v6.0的数据提供了外部问题。

我想从api中获取数据，然后将值更新到图表中。实际上，它只起作用一次，而另一次不..。这似乎取决于加载页面的速度。如果速度较快，则不会更新该值(但在控制台中，我看到了图表中应该包含的值。)

我找不到任何好的医生来更新图表。我希望现在有人能纠正我。谢谢

import { delay } from 'rxjs/operators';
import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { RestApiService } from '../../shared/rest-api/rest-api.service';
import { ActivatedRoute } from '@angular/router';
import { EChartOption } from 'echarts';
declare const echarts: any;

@Component({
  selector: 'ngx-solar',
  templateUrl: './solar.component.html',
  styleUrls: ['./solar.component.scss']
})
export class SolarComponent implements AfterViewInit, OnDestroy, OnInit {
  id: any;
  value: number = 10; //default value here

  option: any = {};
  themeSubscription: any;
  dynamicData: any;
 
  @Input('chartValue')
  set chartValue(value: number) {
    if (this.option.series) {
      this.option.series[0].data[0].value = value;
      this.option.series[0].data[1].value = 100 - value;
      this.option.series[1].data[0].value = value;
    }
  }
    
  
  ngOnInit(): void{

    this.route.params.subscribe(params => {
      this.id = params['id'];
    });
    


    this.dataService.getMetricsOfContainer(this.id).subscribe((res)=>{
      console.log(JSON.stringify(res.cpu)); //value appears here all time
        this.value = res.cpu;
        // var myChart = echarts.init(document.getElementById('chart')); 
        // myChart.setOption(this.option);
    }); 
    
    
  }

  constructor(private theme: NbThemeService, private dataService: RestApiService, private route: ActivatedRoute) {
  }


  ngAfterViewInit() {
    this.themeSubscription = this.theme.getJsTheme().pipe(delay(1)).subscribe(config => {

      const solarTheme: any = config.variables.solar;

      this.option = Object.assign({}, {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        series: [
          {
            name: ' ',
            clockWise: true,
            hoverAnimation: false,
            type: 'pie',
            center: ['45%', '50%'],
            radius: solarTheme.radius,
            data: [
              {
                value: this.value,
                name: ' ',
                label: {
                  normal: {
                    position: 'center',
                    formatter: '{d}%',
                    textStyle: {
                      fontSize: '22',
                      fontFamily: config.variables.fontSecondary,
                      fontWeight: '600',
                      color: config.variables.fgHeading,
                    },
                  },
                },
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: solarTheme.gradientLeft,
                      },
                      {
                        offset: 1,
                        color: solarTheme.gradientRight,
                      },
                    ]),
                    shadowColor: solarTheme.shadowColor,
                    shadowBlur: 0,
                    shadowOffsetX: 0,
                    shadowOffsetY: 3,
                  },
                },
                hoverAnimation: false,
              },
              {
                value: 100 - this.value,
                name: ' ',
                tooltip: {
                  show: false,
                },
                label: {
                  normal: {
                    position: 'inner',
                  },
                },
                itemStyle: {
                  normal: {
                    color: solarTheme.secondSeriesFill,
                  },
                },
              },
            ],
          },
          {
            name: ' ',
            clockWise: true,
            hoverAnimation: false,
            type: 'pie',
            center: ['45%', '50%'],
            radius: solarTheme.radius,
            data: [
              {
                value: this.value,
                name: ' ',
                label: {
                  normal: {
                    position: 'inner',
                    show: false,
                  },
                },
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: solarTheme.gradientLeft,
                      },
                      {
                        offset: 1,
                        color: solarTheme.gradientRight,
                      },
                    ]),
                    shadowColor: solarTheme.shadowColor,
                    shadowBlur: 7,
                  },
                },
                hoverAnimation: false,
              },
              {
                value: 28,
                name: ' ',
                tooltip: {
                  show: false,
                },
                label: {
                  normal: {
                    position: 'inner',
                  },
                },
                itemStyle: {
                  normal: {
                    color: 'none',
                  },
                },
              },
            ],
          },
        ],
      });
    });
  }

  ngOnDestroy() {
    this.themeSubscription.unsubscribe();
  }
}

Html：

<nb-card size="tiny" class="solar-card">
    <nb-card-header>Solar Energy Consumption</nb-card-header>
    <nb-card-body>
      <div id="chart" echarts [options]="option" class="echart">
      </div>
      <div class="info">
        <div class="h4 value">6.421 kWh</div>
        <div class="details subtitle-2"><span>out of</span> 8.421 kWh</div>
      </div>
    </nb-card-body>
  </nb-card>

Answer 1

我也或多或少地遇到了同样的问题:我想用api中的数据填充图形。

不要只使用@ data ()获取数据，而是尝试获取整个options对象。

我解决了在一个服务中创建NGX-E图表的options对象的问题，该服务接收我需要显示的数据，并将options对象还给我，这样我就可以直接在E图表标记中传递。

也许我为你的问题迟到了，但我希望这些建议能帮助下一个问题。:)