So importieren Sie eine Echarts-Karte in Vue

Import-Methode: 1. Verwenden Sie den Befehl „npm install echarts -S“, um Echarts-Abhängigkeiten zu installieren. 2. Führen Sie Echarts global in „main.js“ ein. 3. Verwenden Sie die Import-Anweisung, um „china.js“ in Seiten einzuführen Wenn Sie eine Kartendatei benötigen, fügen Sie einfach den entsprechenden Code hinzu.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue-Version 2.9.6, DELL G3-Computer.

Anforderungen: Zeigen Sie die Namen der einzelnen Provinzen an, schieben Sie über die Markierung, um die Anzahl der Verbindungen anzuzeigen, klicken Sie auf die Markierung, um die Anzahl der angeschlossenen Systeme anzuzeigen, und auf den Eingang, um zu den entsprechenden Seiteninformationen zu springen.

Konfiguration:

1. Installationsabhängigkeiten

npm install echarts -S

3. Führen Sie die Karte china.js auf der Seite ein, die die Karte benötigt. Klicken Sie hier, um das von mir gespeicherte china.js herunterzuladen. Extraktionscode 4rxi)

// 引入echarts
import echarts from 'echarts'
 
Vue.prototype.$echarts = echarts

Verwendung:

Vollständiger Beispielcode:

import '../../../static/js/chinamap/china.js' // 引入中国地图数据

Vollständiges Bild: Für Stiländerungen sehen Sie sich bitte das offizielle Dokument an

und ändern Sie es selbst; für weitere Kartenbeispiele klicken Sie bitte, um https:// anzuzeigen gallery.echartsjs.com/explore.html#charts=map~sort= rank~timeframe=all~author=all

Verwandte Empfehlungen: „

vue.js Tutorial

“

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