So verwenden Sie Echarts-Diagramme in Angular2.0/4.0

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von Echarts in Angular2.0/4.0 vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

Vorwort: Während der Entwicklung müssen wir jetzt Echarts verwenden, um Symbole zu erstellen. Deshalb habe ich im Internet nach Informationen gesucht und schließlich festgestellt, dass das NGX-Echarts-Rad verfügbar ist. Dann machen wir einen Schritt.

Methode: Verwenden Sie zwei Abhängigkeiten, Echarts und ngx-eachrts, mit Hilfe von ngx.., da Echarts auf Basis von js geschrieben ist und keine ts-Dateien hat. Verwenden Sie also einfach ngx-echarts.

Schritt 1: Abhängigkeiten installieren

npm install echarts --save
npm install ngx-echarts --save

Schritt 2:

import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
 imports: [
 ...,
// 引入module
 NgxEchartsModule
 ],
})
export class AppModule { }

in Modul einführen

Schritt 3: js zu Angular-Cli hinzufügen, um

// edit .angular-cli.json
{
 "scripts": [
 // add this: 注意，在echarts中可能没有提供echarts.min.js但是肯定有echarts.js的。对应引入即可。
 "../node_modules/echarts/dist/echarts.min.js"
// 还可以添加中英文，主题。。。。
 ],
}

Schritt einzuführen 4: Verwenden Sie

<p echarts [options]="options" [loading]="isLoading" class="demo-chart"></p>

verschiedene Dateien auf der Seite

<p echarts [options]="options" class="demo-chart"></p>

. AppModule wird nicht beschrieben 🎜>Das Endergebnis:

Abschließend

Natürlich ist oben die offizielle Website von ngx-echarts angehängt Beispiele sind eigentlich nur Beispiele von der offiziellen Website.

Ich habe im Internet gesehen, dass einige Leute diese Komponente auch verwenden, aber es ist eine ältere Version, also habe ich selbst eine geschrieben und verwende sie. Natürlich sind Veranstaltungen erforderlich, andere können auf der offiziellen Website eingesehen werden. Da ich es nur verwende, erfordern spezifische Probleme eine spezifische Analyse. Daher werde ich nicht näher auf den Rest eingehen.

Gibt es während der Nutzung Probleme?

Ich verwende das Hintergrundframework von ng2-admin. In diesem Framework kann NgxEchartsModule nicht in AppModule.ts eingeführt werden. Der genaue Grund ist unbekannt, es wird jedoch spekuliert, dass er durch ng2-admin verursacht wird.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird. Verwandte Artikel:

So installieren Sie nvm auf einem Mac (ausführliche Anleitung)

Über die Schiebefunktion für mobile Touchscreens in JQuery

So implementieren Sie das verzögerte Laden von Bildern mithilfe eines Datensatzes

So implementieren Sie die bidirektionale Datenbindung in Angular

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Echarts-Diagramme in Angular2.0/4.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!