Denna artikel är en spegelartikel om maskinöversättning, klicka här för att hoppa till originalartikeln.

Architect_Programmer_Code Jordbruksnätverket»Arkitekt › Frontend-design och webb › Framändarram › 【Practice】Angular6.x introducerar echarts handledning
Utsikt: 14060|Svar: 2

[Kantig] 【Practice】Angular6.x introducerar echarts handledning

[Kopiera länk]
Publicerad på 2019-04-24 15:27:55 | | | |
förord

Eftersom Angular2+ utvecklas med TypeScript, måste du installera Angular-pluginet NGX-echarts om du vill använda echarts. Renderingarna är följande:



GitHub-adress:Inloggningen med hyperlänken är synlig.
echarts relaterad kunskap och API:Inloggningen med hyperlänken är synlig.

Installation

NPM-installationskommando:

npm-installation module_name -S, dvs. npm-installation module_name --save write-dependenciesnpm-installation module_name-D --d, dvs. npm-installation module_name --save-dev skriver devDependencies


Introducerade ngx-echarts-modulen

Introducera NgxEchartsModule i app.modules.ts rotmodulen

Eftersom min sida är en subkomponent behöver jag importera den i en submodul，Den behöver inte importeras i app.modules.ts modermodulen, koden är följande:

Submoduler kan inte importera komponenter från föräldramodulen, om du vill dela headerkomponenten, importera headerkomponenten i varje modul du vill använda.
Delade moduler är också föräldramoduler som kan exportera saker från barnmoduler, du lägger till det som behöver delas i en modul och importerar det sedan i andra moduler

Referenslänkar:Inloggningen med hyperlänken är synlig.


Komponent-HTML-sida itsvse.component.html introducerad:

CSS Stylesheet Set Height:

itsvse.component.ts kod (båda TS-koderna nedan är godtagbara)

Metod 1:

Metod 2:

Slutligen, kör projektet och du kan se effekten av echarts.






Föregående:Angular6 introducerar Baidu-karthandledning
Nästa:Docker i praktiken

Relaterade inlägg
 Hyresvärd| Publicerad på 2019-05-10 10:48:10 |
https://xieziyu.github.io/ngx-echarts/#/home
 Hyresvärd| Publicerad på 2019-05-10 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
Friskrivning:
All programvara, programmeringsmaterial eller artiklar som publiceras av Code Farmer Network är endast för lärande- och forskningsändamål; Ovanstående innehåll får inte användas för kommersiella eller olagliga ändamål, annars kommer användarna att bära alla konsekvenser. Informationen på denna sida kommer från internet, och upphovsrättstvister har inget med denna sida att göra. Du måste helt radera ovanstående innehåll från din dator inom 24 timmar efter nedladdning. Om du gillar programmet, vänligen stöd äkta programvara, köp registrering och få bättre äkta tjänster. Om det finns något intrång, vänligen kontakta oss via e-post.
Mail To:help@itsvse.com