ngx-echarts 从 API 更新数据

问题描述

我遇到了更新我的 ngx-echarts 数据的问题（Angular 10） ngx-echarts : 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,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,1,[
                      {
                        offset: 0,color: solarTheme.gradientLeft,{
                        offset: 1,color: solarTheme.gradientRight,]),shadowColor: solarTheme.shadowColor,shadowBlur: 0,shadowOffsetX: 0,shadowOffsetY: 3,{
                value: 100 - this.value,label: {
                  normal: {
                    position: 'inner',itemStyle: {
                  normal: {
                    color: solarTheme.secondSeriesFill,],{
            name: ' ',show: false,shadowBlur: 7,{
                value: 28,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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）