角度で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 をインストールするプロセスの紹介

推薦する

Ubuntu システムログで /var/log/messages を設定する方法

1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...

MySQL の一般的な SQL ステートメントの概要

1. mysqlエクスポートファイル: SELECT `pe2e_user_to_company`....

Ubuntu のインストール グラフィック ドライバーと Cuda チュートリアル

目次1. 元のドライバーをアンインストールする2. 新しいグラフィックカードドライバーをダウンロード...

Podmanはコンテナを自動的に起動し、Dockerと比較します

目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...

MySQL データベースのインデックス順序の詳細な説明

目次事件の原因解剖学ファイルの並べ替えファイルのソートが非常に遅いのですが、他に解決策はありますか?...

Ubuntu MySQL バージョンが 5.7 にアップグレードされました

数日前、図書館はサーバー(Ubuntu 14.04)にセキュリティ上の脆弱性があり、時間通りに修復さ...

DockerにElasticsearch7.6クラスタをインストールしてパスワードを設定する方法

目次基本的な設定バージョンとDockerイメージについて始めるelasticsearch.ymlにつ...

vue3 のストアを使用してスクロール位置を記録する例

目次全体的な効果コンテナのスクロールイベントをリッスンするストア内の構成ページが戻るときのスクロール...

Keepalived は Nginx の負荷分散と高可用性のサンプル コードを実装します

第1章: keepalivedの紹介VRRP プロトコルの目的は、静的ルーティングの単一点障害問題を...

Linux で rsync を使用する方法

目次1. はじめに2. インストール3. 基本的な使い方3.1、-rパラメータ3.2、-aパラメータ...

Linux サーバーで MySQL リモート接続を有効にする方法

序文以前の非MKレコードを再編成するためのMySQLの学習説明する有効になっていない場合、データベー...

ウェブデザインにおける円形要素の使用例 25 選

本日の投稿では、Web デザインで使用される円形要素の優れた例をいくつか挙げ、美しい丸いボタン、メニ...

SSMは、mysqlデータベースアカウントのパスワード暗号文ログイン機能を実装します。

導入当社は、情報セキュリティと機密アプリケーションに関わるいくつかのプロジェクトの研究開発に従事して...

Ubuntu 16.04 mysql5.7.17 リモートポート 3306 を開く

MySQLへのリモートアクセスを有効にするデフォルトでは、MySQL ユーザーにはリモート アクセス...

Nodejs エラー処理プロセス記録

この記事では、接続エラー ECONNREFUSED を例に、Node.js がエラーを処理するプロセ...