【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のチャート効果が確認できます。