在Vue项目中引入 ECharts 3D 路径图 Flights GL（需安装echarts、echarts-gl、jQuery依赖，已踩坑）_前端小马的进阶之

未知 02-07 3911

目录?

一、案例效果图

二、依赖包的下载（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"; //引入jQuery import '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>