Dieser Artikel ist ein Spiegelartikel der maschinellen Übersetzung, bitte klicken Sie hier, um zum Originalartikel zu springen.

Architect_Programmer_Code Landwirtschaftsnetzwerk»Architekt › Frontend-Design & Web › Frontrahmen › 【Practice】Angular6.x führt echarts Tutorial ein
Ansehen: 14060|Antwort: 2

[Kantig] 【Practice】Angular6.x führt echarts Tutorial ein

[Link kopieren]
Veröffentlicht am 24.04.2019 15:27:55 | | | |
Vorwort

Da Angular2+ mit TypeScript entwickelt wurde, musst du, wenn du echarts verwenden möchtest, das Angular-Plugin NGX-echarts installieren. Die Darstellungen sind wie folgt:



GitHub-Adresse:Der Hyperlink-Login ist sichtbar.
echarts verwandtes Wissen und API:Der Hyperlink-Login ist sichtbar.

Installation

NPM-Installationsbefehl:

npm-Installation module_name -S, also npm-Installation module_name --save write-dependenciesnpm-installation module_name-D --d, d.h. npm-installation module_name --save-dev schreibt devDependencies


Einführung des ngx-echarts-Moduls

Führen Sie das NgxEchartsModule im app.modules.ts Root-Modul ein

Da meine Seite eine Subkomponente ist, muss ich sie in ein Submodul importieren，Sie muss nicht im app.modules.ts Elternmodul importiert werden, der Code lautet wie folgt:

Submodule können keine Komponenten aus dem Elternmodul importieren; wenn du die Header-Komponente teilen möchtest, importiere die Header-Komponente in jedes Modul, das du verwenden möchtest.
Geteilte Module sind auch Elternmodule, die Dinge aus Kindmodulen exportieren können; du fügst, was freigegeben werden muss, in ein Modul ein und importiert es dann in andere Module

Referenzlinks:Der Hyperlink-Login ist sichtbar.


Component-HTML-Seite itsvse.component.html eingeführt:

CSS Stylesheet Set-Höhe:

itsvse.component.ts Code (beide unten aufgeführten TS-Codes sind akzeptabel)

Methode 1:

Methode 2:

Führe schließlich das Projekt aus und du kannst den Effekt des eCharts sehen.






Vorhergehend:Angular6 führt das Baidu-Kartentutorial vor
Nächster:Docker in der Praxis

Verwandte Beiträge
 Vermieter| Veröffentlicht am 10.05.2019 10:48:10 |
https://xieziyu.github.io/ngx-echarts/#/home
 Vermieter| Veröffentlicht am 10.05.2019 16:25:17 |
https://www.echartsjs.com/gallery/vendors/echarts/echarts.min.js
https://www.echartsjs.com/gallery/vendors/echarts/map/js/china.js
https://www.echartsjs.com/galler ... tension/bmap.min.js
Verzichtserklärung:
Alle von Code Farmer Network veröffentlichten Software, Programmiermaterialien oder Artikel dienen ausschließlich Lern- und Forschungszwecken; Die oben genannten Inhalte dürfen nicht für kommerzielle oder illegale Zwecke verwendet werden, andernfalls tragen die Nutzer alle Konsequenzen. Die Informationen auf dieser Seite stammen aus dem Internet, und Urheberrechtsstreitigkeiten haben nichts mit dieser Seite zu tun. Sie müssen die oben genannten Inhalte innerhalb von 24 Stunden nach dem Download vollständig von Ihrem Computer löschen. Wenn Ihnen das Programm gefällt, unterstützen Sie bitte echte Software, kaufen Sie die Registrierung und erhalten Sie bessere echte Dienstleistungen. Falls es eine Verletzung gibt, kontaktieren Sie uns bitte per E-Mail.
Mail To:help@itsvse.com