Detaillierte Erklärung zur Verwendung von Echarts-Maps in Angular

<div #chart [ngClass]="'chart-box ' + (!option ? 'empty-chart' : '')"></div>

// Grundlegender Diagrammstil.chart-box{
  Schriftstärke: fett;
  Rand: 1px durchgezogen #dcdcdc;
  Rahmenradius: 4px;
}
// Stil, wenn Option nicht verfügbar ist.empty-chart{
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Schriftgröße: 18px;
}

importiere { Komponente, ElementRef, Eingabe, OnDestroy, OnInit, ViewChild } aus '@angular/core';
importiere { von Event, Abonnement, Timer } von „rxjs“;
importiere { debounceTime, tap } aus 'rxjs/operators';
importiere { ECharts, EChartsOption, init } von 'echarts';
@Komponente({
  Selektor: ‚App-Basisdiagramm‘,
  Vorlagen-URL: "./base-chart.component.html",
  styleUrls: ['./base-chart.component.scss']
})
Exportklasse BaseChartComponent implementiert OnInit, OnDestroy {
  @Input()-Option: EChartsOption;
  @Input() Höhe = "300px";
  @Input() Breite = "100 %";
  @ViewChild('Diagramm', { statisch: true }) Diagramm: ElementRef;
  ein Diagramm: ECharts;
  windowResize: Abonnement;
  Timer: Abonnement;
  Standardraster = {
    oben: 10,
    rechts: 10,
    unten: 30,
    links: 30,
  };
  Konstruktor() { }
  ngOnInit(): void {
    dies.setListen();
    diese.boxStyleInit();
    if (!!diese.option) {
      dies.echartsInit();
    }anders{
      this.chart.nativeElement.innerText = „Noch keine Daten“;
    }
  }
  // Wenn die Komponente zerstört ist, storniere das zugehörige Abonnement ngOnDestroy(): void {
    wenn (dieses.windowResize) {
      this.windowResize.abbestellen();
    }
    wenn (dieser.Timer) {
      dies.timer.abbestellen();
    }
  }
  // Initialisiere die Größe des Containers
  boxStyleInit(): void {
    dieses.chart.nativeElement.style.width = diese.width;
    dieses.chart.nativeElement.style.height = diese.höhe;
  }
  // Setze den Ereignis-Listener für die Größenänderung des Fensters und zeichne die Größe der E-Charts neu setListen(): void {
    this.windowResize = fromEvent(Fenster, 'Größe ändern').pipe(
      Entprellzeit(200),
      tippen(res => {
        dies.aChart.resize();
      })
    ).abonnieren();
  }
  // Konfigurieren und generieren Sie ein eCharts-Diagramm gemäß der Option echartsInit(): void {
    Dies ist eine Tabelle, die aus mehreren Elementen besteht.
    this.aChart.setOption(Object.assign({ grid: this.defaultGrid }, this.option));
    // Größe der E-Charts durch den Verzögerer ändern this.timer = timer(400).subscribe(res => {
      dies.aChart.resize();
    });
  }
}

<app-base-chart [Option]="Option" Breite="100%" Höhe="300px" ></app-base-chart>