この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

眺める: 14060|答える: 2

[角] 【Practice】Angular6.xがechartsチャートチュートリアルを導入

[リンクをコピー]
掲載地 2019/04/24 15:27:55 | | | |
前書き

Angular2+はTypeScriptで開発されているため、echartsを使いたい場合はAngularプラグインNGX-echartsをインストールする必要があります。 レンダリングは以下の通りです:



GitHubアドレス:ハイパーリンクのログインが見えます。
echarts関連知識とAPI:ハイパーリンクのログインが見えます。

取り付け

NPMインストールコマンド:

npm install module_name -S すなわち npm install module_name --save write-dependenciesnpm install module_name-D --d、つまりnpm install module_name --save-dev writes devDependencies


ngx-echartsモジュールを導入

app.modules.tsルートモジュールにNgxEchartsModuleを導入します

私のページはサブコンポーネントなので、サブモジュールにインポートする必要がありますapp.modules.ts親モジュールでインポートする必要はありません、コードは以下の通りです:

サブモジュールは親モジュールからコンポーネントをインポートできません。ヘッダーコンポーネントを共有したい場合は、使いたい各モジュールにヘッダーコンポーネントをインポートしてください。
共有モジュールは親モジュールでもあり、子モジュールからエクスポートできます。共有したいものをモジュールに追加し、他のモジュールにインポートします

参考リンク:ハイパーリンクのログインが見えます。


コンポーネントHTMLページitsvse.component.html導入:

CSSスタイルシートセットの高さ:

itsvse.component.tsコード(以下のTSコードの両方が許容)

方法1:

方法2:

最後にプロジェクトを実行すると、echartsのチャート効果が確認できます。






先の:Angular6がBaiduマップチュートリアルを導入
次に:Docker in Practice
 地主| 掲載地 2019/05/10 10:48:10 |
 地主| 掲載地 2019/05/10 16:25:17 |
免責事項:
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。

Mail To:help@itsvse.com