目錄?

一、案例效果圖

二、依賴包的下載（echarts、echarts-gl、jQuery）

1.echarts 包的下載

2.echarts-gl 包的下載

3.jQuery 包的下載?

4.小結?

三、完整代碼

---

一、案例效果圖

---

二、依賴包的下載（echarts、echarts-gl、jQuery）

????????如下是 ECharts 官網給出的代碼，但要注意的是，該代碼需要 echarts、echarts-gl、jQuery 的加持才能正常使用；如果不安裝依賴包，直接將官網代碼引入項目中，會報各種錯！

所以我們需要分別在項目中下載安裝這些依賴包；

1.echarts 包的下載

（1）通過 npm 安裝 ECharts；

npm install echarts --save

（2）在 src 下 main.js 中全局引入 Echarts；

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

（3）已全局引入，單頁面中無需再引。?

2.echarts-gl 包的下載

（1）注意此處有坑，如果我們直接使用 npm 命令 npm install echarts-gl 下載 echarts-gl 是無法下載的，會報錯（名字沖突，拒絕下載），所以我們下載 echarts-gl 的低版本；

npm i echarts-gl@1.1.0 -S

（2）然后，同樣在 src 下 main.js 中全局引入 echarts-gl；

import 'echarts-gl'

（3）已全局引入，單頁面中無需再引。??

3.jQuery 包的下載?

（1）通過 npm 安裝 jQuery；

npm install jquery --save

（2）在 src 下 main.js 中引入 jQuery；

import jquery from 'jquery'; Vue.prototype.$ = jquery;

（3）在需要使用到 jQuery 的頁面中引入；

import $ from "jquery"

4.小結?

npm 下載依賴：

npm install echarts --save; npm i echarts-gl@1.1.0 -S; npm install jquery --save;

main.js 中：

import echarts from 'echarts' import 'echarts-gl' import jquery from 'jquery'Vue.prototype.$ = jquery; Vue.prototype.$echarts = echarts;

頁面文件中：

import $ from "jquery"; //引入jQuery import 'echarts/map/js/world.js' //必須引入世界地圖

????????注意世界地圖必須在頁面中引入，否則3d路徑圖依然無法呈現。?

---

三、完整代碼

<template><div class="login_new"><div id="main" style="width: 100%;height: 10rem"></div></div> </template><script>import * as echarts from 'echarts';import 'echarts-gl';import $ from "jquery"; //引入jQueryimport 'echarts/map/js/world.js' //必須引入世界地圖export default {name: "login_new",methods: {//繪制3D路徑圖draw() {var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';var myChart = this.$echarts.init(document.getElementById('main'));var option;var uploadedDataURL = ROOT_PATH + '/data-gl/asset/data/flights.json';myChart.showLoading();$.getJSON(uploadedDataURL, function (data) {myChart.hideLoading();function getAirportCoord(idx) {return [data.airports[idx][3], data.airports[idx][4]];}var routes = data.routes.map(function (airline) {return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];});myChart.setOption({geo3D: {map: 'world',shading: 'realistic',silent: true, //鼠標設置為不觸發事件environment: '#333', //背景色realisticMaterial: {roughness: 0.8,metalness: 0},postEffect: {enable: true},groundPlane: {show: false},light: {main: {intensity: 1,alpha: 30},ambient: {intensity: 0}},viewControl: {distance: 70, //地圖縮放程度alpha: 89, //地圖翻轉程度panMouseButton: 'left',rotateMouseButton: 'right',rotateSensitivity: false, //地圖是否能旋轉zoomSensitivity: false //地圖是否能縮放},itemStyle: {color: '#000' //地圖的顏色},regionHeight: 0.5 //地圖高度},series: [{type: 'lines3D',coordinateSystem: 'geo3D',effect: { // 特效線的配置show: true,trailWidth: 1,trailOpacity: 0.5,trailLength: 0.2,constantSpeed: 5 //特效固定速度},blendMode: 'lighter',lineStyle: { //特效線width: 0.2,opacity: 0.05},data: routes}]});window.addEventListener('keydown', function () {myChart.dispatchAction({type: 'lines3DToggleEffect',seriesIndex: 0});});});}},mounted() {this.draw();}} </script><style scoped></style>

總結

以上是生活随笔為你收集整理的在Vue项目中引入 ECharts 3D 路径图 Flights GL（需安装echarts、echarts-gl、jQuery依赖，已踩坑）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。