Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie Echarts in Vue.JS

So verwenden Sie Echarts in Vue.JS

php中世界最好的语言
php中世界最好的语言Original
2018-03-23 14:53:072277Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn