So verwenden Sie Echarts in Vue.JS

Dieses Mal zeige ich Ihnen, wie Sie Echarts in Vue.JS verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Echarts in Vue.JS gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Der vorherige Artikel hat Ihnen ein detailliertes Beispiel für die Verwendung von ECharts im Webpack vorgestellt. Sie können darauf klicken, um es anzuzeigen.

1. Installation mit NPM (globaler Import)

Führen Sie den folgenden Befehl aus:

npm install echarts--save

Führen Sie die Echarts ein Modul

Führen Sie das Echarts-Modul in die main.js des Vue-Projekts ein, das heißt, schreiben Sie den folgenden Code:

import echarts from 'echarts'
Vue.prototype.$echarts = echarts；

2 Der obige globale Import packt alle Echarts-Diagramme, wodurch die Größe zu groß wird. Um dieses Problem zu lösen, kann ich

require

verwenden, um das auf Anfrage zu importieren ist, importieren Sie, was benötigt wird: ist:

3. Zitieren Sie

let echarts = require('echarts/lib/echarts')

direkt global in der Datei index.html und verwenden Sie das Skript-Tag, um

Hinweis: Schreiben Sie den Pfad von echarts in src;

<script src="/static/js/echarts/echarts.js"></script>

Suchen Sie dann webpack.base.conf.js im Build-Verzeichnis des Vue-Projekts, Konfigurationsdatei

, in module.exports Fügen Sie dem Objekt das Attribut externals hinzu und konfigurieren Sie dann den Pfad, in dem sich Echarts befindet:

module.exports = {
.....
externals: {
// 路径：命名空间
 'echarts/dist/echarts':'echarts',
}
}；

Ich glaube Ihnen Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Artikel finden Sie auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Erhalten Sie den Datei-Upload-Fortschritt direkt vom Server

So verwenden Sie die Datumsauswahl

Verwenden der ejsExcel-Vorlage in Vue.js

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Echarts in Vue.JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!