角度でechartsマップを使用する詳細な説明

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

// 基本的なチャートスタイル.chart-box{
  フォントの太さ: 太字;
  境界線: 1px 実線 #dcdcdc;
  境界線の半径: 4px;
}
// オプションが利用できない場合のスタイル。empty-chart{
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  フォントサイズ: 18px;
}

'@angular/core' から { Component、ElementRef、Input、OnDestroy、OnInit、ViewChild } をインポートします。
'rxjs' から { fromEvent、Subscription、timer } をインポートします。
'rxjs/operators' から { debounceTime, tap } をインポートします。
'echarts' から { ECharts、EChartsOption、init } をインポートします。
@成分（{
  セレクター: 'app-base-chart',
  テンプレート URL: './base-chart.component.html',
  スタイル URL: ['./base-chart.component.scss']
})
BaseChartComponentクラスをエクスポートし、OnInit、OnDestroyを実装します。
  @Input() オプション: EChartsOption;
  @Input() 高さ = '300px';
  @Input() 幅 = '100%';
  @ViewChild('chart', { static: true }) チャート: ElementRef;
  aChart: ECharts;
  windowResize: サブスクリプション;
  タイマー: サブスクリプション;
  デフォルトグリッド = {
    トップ: 10,
    右: 10,
    下: 30,
    残り: 30,
  };
  コンストラクタ() { }
  ngOnInit(): void {
    このメソッドはListenメソッドを呼び出す。
    このボックススタイルを初期化します。
    if (!!this.option) {
      this.echartsInit();
    }それ以外{
      this.chart.nativeElement.innerText = 'まだデータがありません';
    }
  }
  // コンポーネントが破棄されたら、関連するサブスクリプションをキャンセルします ngOnDestroy(): void {
    if (this.windowResize) {
      購読を解除します。
    }
    if (this.timer) {
      this.timer.unsubscribe();
    }
  }
  // コンテナのサイズを初期化する
  ボックススタイル初期化(): void {
    this.chart.nativeElement.style.width = this.width;
    this.chart.nativeElement.style.height = this.height;
  }
  // ウィンドウのサイズ変更イベントリスナーを設定し、echartsのサイズを再描画します setListen(): void {
    this.windowResize = fromEvent(window, 'resize').pipe(
      デバウンス時間(200)、
      タップ(res => {
        チャートのサイズを変更します。
      })
    ）。購読する（）;
  }
  // オプションに従ってechartsチャートを設定および生成しますechartsInit(): void {
    this.aChart = init(this.chart.nativeElement);
    this.aChart.setOption(Object.assign({ grid: this.defaultGrid }, this.option));
    // 遅延器を介してechartsのサイズを変更します this.timer = timer(400).subscribe(res => {
      チャートのサイズを変更します。
    });
  }
}

<app-base-chart [オプション]="オプション" 幅="100%" 高さ="300px" ></app-base-chart>