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

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

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

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

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

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

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.

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!