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

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

Angular で echart を使用する場合は、対応するコンポーネントのライフサイクルで echart API を呼び出すだけで済みます。

echartの初期化

コンポーネントの ngOnInit イベントで echarts を初期化し、オプションを構成すると、echarts チャートが生成されます。

アプリベースチャートコンポーネント

html

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

CS

// 基本的なチャートスタイル.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コンポーネントの使用

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

上記のコードをコンポーネントの HTML で使用するだけで、高さと幅も設定できます。オプションはechartsによって公式に定義されたオプションです

これは実際には基本的なecharts生成コンポーネントの単純なカプセル化であり、すべての構成項目はechartsです。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Javascript Echarts 空気質マップ効果の詳細な説明
  • JavaScript によるデータ視覚化: ECharts マップの作成
  • vue+echarts で中国地図のフロー効果を実現する (詳細な手順)
  • vue+echarts+datav 大画面データ表示と中国地図の省、市、郡のドリルダウン機能の実装
  • Vue の echarts に中国地図を導入するケーススタディ

<<:  MySQL の永続性とロールバックの原理を 1 つの記事で理解する

>>:  Linux 環境に MySQL 8.0 をインストールするプロセスの紹介

推薦する

Mysqlはストアドプロシージャを通じて文字列を配列に分割します

文字列を配列に分割するには、次の 3 つの MySQL 関数を使用する必要があります。 REVERS...

カルーセル例の JavaScript 実装

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

JSはアニメーションのレイアウト変換を実装します

JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...

IDEA が MySQL データベースに接続できない問題の 6 つの解決策

この記事では、IDEA が MySQL データベースに接続できない問題に対する 6 つの解決策を主に...

CSS3 でクールなスライス画像カルーセル効果を実現

今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...

MySQLで一意のサーバーIDを生成する方法

序文MySQL では、server-id を使用してデータベース インスタンスを一意に識別し、それを...

CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実現

最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術を...

MySQL のスローログ監視の誤報問題の分析と解決

以前は、さまざまな理由により、一部のアラームは真剣に受け止められませんでした。最近、休暇中に、すぐに...

TypeScript の条件型に関する詳細な読書と実践記録

目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...

MySQL の binlog_format モードと設定の詳細な分析

MySQL レプリケーションには、SQL ステートメント ベースのレプリケーション (SBR)、行ベ...

HTML面接の質問の要約

1. doctypeの役割、厳密モードと混合モードの違い、そしてその重要性1. 構文形式: <...

MYSQLは、ショッピングカートに追加する際に重複追加を防ぐためのサンプルコードを実装します。

序文最近、仕事の都合で、APP ショッピングカートの注文支払いに取り組んでいました。テスト中にバグが...

C++ TpeScriptシリーズのジェネリックについて

目次1. テンプレート2. ジェネリック3. ジェネリック再帰4. デフォルトのジェネリックパラメー...

Vueフレームワークで習得しなければならない重要な知識を学びます

1. Vueとは何かVue は、ユーザー ページを構築するためのプログレッシブ フレームワークです。...

Webデザインチュートリアル(2):模倣と盗作について

<br />前回の記事では、Webデザインの手順と方法を紹介しました。詳細については、前...