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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL の永続性とロールバックの原理を 1 つの記事で理解する
>>: Linux 環境に MySQL 8.0 をインストールするプロセスの紹介
1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...
1. mysqlエクスポートファイル: SELECT `pe2e_user_to_company`....
目次1. 元のドライバーをアンインストールする2. 新しいグラフィックカードドライバーをダウンロード...
目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...
目次事件の原因解剖学ファイルの並べ替えファイルのソートが非常に遅いのですが、他に解決策はありますか?...
数日前、図書館はサーバー(Ubuntu 14.04)にセキュリティ上の脆弱性があり、時間通りに修復さ...
目次基本的な設定バージョンとDockerイメージについて始めるelasticsearch.ymlにつ...
目次全体的な効果コンテナのスクロールイベントをリッスンするストア内の構成ページが戻るときのスクロール...
第1章: keepalivedの紹介VRRP プロトコルの目的は、静的ルーティングの単一点障害問題を...
目次1. はじめに2. インストール3. 基本的な使い方3.1、-rパラメータ3.2、-aパラメータ...
序文以前の非MKレコードを再編成するためのMySQLの学習説明する有効になっていない場合、データベー...
本日の投稿では、Web デザインで使用される円形要素の優れた例をいくつか挙げ、美しい丸いボタン、メニ...
導入当社は、情報セキュリティと機密アプリケーションに関わるいくつかのプロジェクトの研究開発に従事して...
MySQLへのリモートアクセスを有効にするデフォルトでは、MySQL ユーザーにはリモート アクセス...
この記事では、接続エラー ECONNREFUSED を例に、Node.js がエラーを処理するプロセ...