Hinzufügen von Diagrammen und Grafiken zu einer Vue.js-Anwendung

Kurzanleitung zur Verwendung von E-Charts und Vue-E-Charts

Foto von Kai Oberhäuser auf Unsplash

Das Herzstück jeder Anwendung ist die Anzeige von Daten für Benutzer. Manchmal ist es sehr schwierig, diese Daten mithilfe von Text anzuzeigen. Diagramme und Grafiken bieten eine hervorragende Möglichkeit, diese Daten visuell darzustellen. In diesem Artikel zeige ich Ihnen, wie einfach es ist, visuell ansprechende Diagramme in Ihrer Vue.js-Anwendung zu erstellen.

Anfangen

Ich werde die Vue-CLI verwenden, um eine Starter-Anwendung schnell auszurüsten. Ich werde sowohl E-Charts als auch Vue-E-Charts verwenden, um unserer Starter-Anwendung Diagramme hinzuzufügen. Also lasst uns anfangen.

Installieren Sie die Vue-CLI mit folgendem Befehl:

npm install @ vue / cli

Als Nächstes verwenden wir die Vue-CLI, um eine von uns verwendete Vue-Anwendung auszurüsten. Wir werden die Anwendung mit diesem Befehl erstellen:

vue erstelle vue-echarts-demo

Die Vue-CLI fragt Sie, ob Sie die Standardvorgabe verwenden oder Funktionen manuell auswählen möchten. Standard auswählen.

Dadurch wird unsere Anwendung in einem Ordner namens vue-echarts-demo erstellt. Wechseln Sie mit diesem Befehl in dieses Verzeichnis:

cd vue-echarts-demo

Installieren der Diagrammpakete

eCharts ist eines der größten und am weitesten verbreiteten Kartenprogramme. Wir werden dies in unserer Vue-Anwendung verwenden. Damit es in Vue verwendet werden kann, verwenden wir auch ein Produkt namens vue-echarts. Vue-echarts ist ein Wrapper für eCharts, damit es in der Vue-Umgebung funktioniert.

Sie können beide mit diesem Befehl installieren:

npm install echarts vue-echarts

Diagrammpakete konfigurieren

Nachdem wir die Diagrammpakete installiert haben, müssen wir sie in unserer Anwendung installieren. Öffnen Sie das Verzeichnis src und erstellen Sie ein neues Verzeichnis mit dem Namen plugins. Erstellen Sie im neuen Plugins-Verzeichnis eine Datei mit dem Namen echarts.js.

In dieser Datei erstellen wir eine Vue-Komponente für eCharts. Die Komponente wird in unserer Anwendung global verfügbar sein. Die Schritte, die wir unternehmen müssen, sind das Importieren von vue und vue-echarts. Als Nächstes importieren wir die Teile von eCharts, die wir verwenden werden. Unser erstes Diagramm wird ein Balkendiagramm sein, also müssen wir das auch importieren. Schließlich erstellen wir eine globale Komponente namens Diagramm. So sollte Ihre echarts.js-Datei aussehen:

Vue aus 'vue' importieren;
Importieren von Echarts aus 'Vue-Echarts';

import 'echarts / lib / chart / bar';

Vue.component ('chart', Echarts);

Import unserer Plugin-Datei

Wir müssen Vue auf die gerade erstellte Datei aufmerksam machen. Wir tun dies, indem wir es in die Datei main.js importieren. Öffnen Sie die Datei main.js und fügen Sie nach der letzten Importanweisung die folgende Zeile hinzu:

importiere "@ / plugins / echarts";

Jetzt können wir unser erstes Diagramm erstellen.

Balkendiagramm erstellen

Wir werden alle unsere Diagramme in der HelloWorld-Komponente erstellen. Diese Komponente wurde automatisch erstellt, als wir die Vue-CLI zum Erstellen unserer Anwendung verwendeten.

Öffnen Sie die Datei HelloWorld.vue und gehen Sie folgendermaßen vor:

  • Löschen Sie alle HTML-Dateien in den Vorlagen-Tags
  • lösche die Requisiten in den Script Tags
  • Löschen Sie alle CSS in den Style-Tags

Ihre Datei sollte folgendermaßen aussehen: