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 をインストールするプロセスの紹介
文字列を配列に分割するには、次の 3 つの MySQL 関数を使用する必要があります。 REVERS...
この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...
JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...
この記事では、IDEA が MySQL データベースに接続できない問題に対する 6 つの解決策を主に...
今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...
序文MySQL では、server-id を使用してデータベース インスタンスを一意に識別し、それを...
最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術を...
以前は、さまざまな理由により、一部のアラームは真剣に受け止められませんでした。最近、休暇中に、すぐに...
目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...
MySQL レプリケーションには、SQL ステートメント ベースのレプリケーション (SBR)、行ベ...
1. doctypeの役割、厳密モードと混合モードの違い、そしてその重要性1. 構文形式: <...
序文最近、仕事の都合で、APP ショッピングカートの注文支払いに取り組んでいました。テスト中にバグが...
目次1. テンプレート2. ジェネリック3. ジェネリック再帰4. デフォルトのジェネリックパラメー...
1. Vueとは何かVue は、ユーザー ページを構築するためのプログレッシブ フレームワークです。...
<br />前回の記事では、Webデザインの手順と方法を紹介しました。詳細については、前...