Πώς να προσθέσετε γραφήματα και γραφήματα σε μια εφαρμογή Vue.js

Γρήγορος οδηγός χρήσης των ηχαρτών και των vue-echarts

Φωτογραφία από τον Kai Oberhäuser στο Unsplash

Η καρδιά κάθε εφαρμογής εμφανίζει δεδομένα στους χρήστες. Μερικές φορές είναι πολύ δύσκολο να εμφανίσετε αυτά τα δεδομένα χρησιμοποιώντας κείμενο. Τα διαγράμματα και τα γραφήματα είναι ένας πολύ καλός τρόπος για να δώσετε μια οπτική αναπαράσταση αυτών των δεδομένων. Σε αυτό το άρθρο, θα σας δείξω πόσο εύκολο είναι να δημιουργήσετε οπτικά ελκυστικά διαγράμματα στην εφαρμογή Vue.js.

Ξεκινώντας

Θα χρησιμοποιήσω το Vue CLI για να εξελίξω γρήγορα μια εφαρμογή εκκίνησης. Θα χρησιμοποιήσω και τα δύο ηχάρια και τα vue-echarts για να προσθέσω γραφήματα στην εφαρμογή μας εκκίνησης. Ας αρχίσουμε λοιπόν.

Εγκαταστήστε το Vue CLI με αυτήν την εντολή:

npm install @ vue / cli

Στη συνέχεια, θα χρησιμοποιήσουμε το Vue CLI για να αναπτύξουμε μια εφαρμογή Vue που θα χρησιμοποιήσουμε. Θα δημιουργήσουμε την εφαρμογή χρησιμοποιώντας αυτήν την εντολή:

vue δημιουργία vue-echarts-demo

Το Vue CLI θα σας ρωτήσει αν θέλετε να χρησιμοποιήσετε τις προεπιλεγμένες προεπιλεγμένες ή μη αυτόματες επιλογές. Επιλέξτε προεπιλογή.

Αυτό θα δημιουργήσει την εφαρμογή μας σε ένα φάκελο που ονομάζεται vue-echarts-demo. Αλλάξτε σε αυτόν τον κατάλογο με αυτήν την εντολή:

cd vue-echarts-demo

Εγκατάσταση των πακέτων γραφημάτων

Το eCharts είναι ένα από τα μεγαλύτερα και πιο διαδεδομένα προγράμματα γραφημάτων. Θα το χρησιμοποιήσουμε στην εφαρμογή μας vue. Για να μπορέσει να χρησιμοποιηθεί σε Vue, θα χρησιμοποιήσουμε επίσης ένα προϊόν που ονομάζεται vue-echarts. Το Vue-echarts είναι ένα περιτύλιγμα για τους eCharts για να μπορέσει να λειτουργήσει στο περιβάλλον Vue.

Μπορείτε να τα εγκαταστήσετε και με την εξής εντολή:

npm εγκαταστήσετε echarts vue-echarts

Ρύθμιση των πακέτων γραφημάτων

Τώρα που έχουμε εγκαταστήσει τα πακέτα γραφημάτων, πρέπει να τα εγκαταστήσουμε στην εφαρμογή μας. Ανοίξτε τον κατάλογο src και δημιουργήστε ένα νέο κατάλογο που ονομάζεται plugins. Μέσα στον νέο κατάλογο πρόσθετων δημιουργήστε ένα αρχείο που ονομάζεται echarts.js.

Θα δημιουργήσουμε ένα στοιχείο Vue για eCharts σε αυτό το αρχείο. Το στοιχείο θα είναι διαθέσιμο παγκοσμίως στην εφαρμογή μας. Τα βήματα που πρέπει να λάβουμε είναι να εισαγάγουμε τόσο vue όσο και vue-echarts. Στη συνέχεια, θα εισαγάγουμε τα τμήματα των eCharts που θα χρησιμοποιήσουμε. Ο πρώτος μας πίνακας θα είναι ένα διάγραμμα ράβδων, οπότε θα χρειαστεί να το εισάγουμε και αυτός. Τέλος, δημιουργούμε ένα παγκόσμιο στοιχείο που ονομάζεται διάγραμμα. Εδώ θα πρέπει να φαίνεται το αρχείο echarts.js σας:

εισαγωγή Vue από 'vue';
εισαγωγή Echarts από 'vue-echarts';

Εισαγωγή 'echarts / lib / chart / bar'.

Vue.component ('διάγραμμα', Echarts);

Εισαγωγή του αρχείου προσθήκης μας

Πρέπει να κάνουμε την Vue ενήμερη για το αρχείο που μόλις δημιουργήσαμε. Το κάνουμε αυτό με την εισαγωγή του στο αρχείο main.js. Ανοίξτε το αρχείο main.js και προσθέστε την ακόλουθη γραμμή μετά την τελευταία δήλωση εισαγωγής:

εισαγωγή "@ / plugins / echarts";

Τώρα είμαστε έτοιμοι να δημιουργήσουμε το πρώτο μας γράφημα.

Δημιουργία πίνακα γραμμών

Θα δημιουργήσουμε όλα τα διαγράμματα μας στο στοιχείο HelloWorld. Αυτό το στοιχείο δημιουργήθηκε αυτόματα όταν χρησιμοποιήσαμε το Vue CLI για να δημιουργήσουμε την εφαρμογή μας.

Ανοίξτε το αρχείο HelloWorld.vue και κάντε τα εξής:

  • διαγράψτε όλα τα html μέσα στις ετικέτες του προτύπου
  • διαγράψτε τα στηρίγματα στις ετικέτες δέσμης ενεργειών
  • διαγράψτε όλα τα CSS στις ετικέτες στυλ

Το αρχείο σας θα πρέπει να φαίνεται ως εξής: