πρόλογος
Επειδή το Angular2+ έχει αναπτυχθεί χρησιμοποιώντας TypeScript, εάν θέλετε να χρησιμοποιήσετε το echarts, πρέπει να εγκαταστήσετε το πρόσθετο Angular NGX-echarts. Οι αποδόσεις είναι οι εξής:
Διεύθυνση GitHub:Η σύνδεση με υπερσύνδεσμο είναι ορατή. Γνώσεις σχετικές με το echarts και API:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Εγκατάσταση
Εντολή εγκατάστασης npm:
npm install module_name -S, δηλαδή npm install module_name --save write-dependenciesnpm install module_name-D --d, δηλαδή npm install module_name --save-dev writes devDependencies
Παρουσιάστηκε η ενότητα ngx-echarts
Εισάγετε το NgxEchartsModule στο app.modules.ts root module
Δεδομένου ότι η σελίδα μου είναι υποστοιχείο, πρέπει να την εισαγάγω σε μια υποενότητα,Δεν χρειάζεται να εισαχθεί στη γονική μονάδα app.modules.ts, ο κωδικός έχει ως εξής:
Οι δευτερεύουσες μονάδες δεν μπορούν να εισάγουν στοιχεία από τη γονική λειτουργική μονάδα, εάν θέλετε να κάνετε κοινή χρήση του στοιχείου κεφαλίδας, εισαγάγετε το στοιχείο κεφαλίδας σε κάθε λειτουργική μονάδα που θέλετε να χρησιμοποιήσετε. Οι κοινόχρηστες λειτουργικές μονάδες είναι επίσης γονικές λειτουργικές μονάδες που μπορούν να εξάγουν πράγματα από θυγατρικές λειτουργικές μονάδες, προσθέτετε ό,τι πρέπει να είναι κοινόχρηστο σε μια λειτουργική μονάδα και, στη συνέχεια, το εισάγετε σε άλλες λειτουργικές μονάδες Σύνδεσμοι αναφοράς:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Παρουσιάστηκε itsvse.component.html σελίδα HTML συστατικού:
Ύψος σετ φύλλου στυλ CSS:
itsvse.component.ts κωδικός (και οι δύο παρακάτω κωδικοί TS είναι αποδεκτοί)
Μέθοδος 1:
Μέθοδος 2:
Τέλος, εκτελέστε το έργο και μπορείτε να δείτε το εφέ γραφήματος echarts.
|