在Vue项目中引入 ECharts 3D 路径图 Flights GL（需安装echarts、echarts-gl、jQuery依赖，已踩坑）

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

所以我们需要分别在项目中下载安装这些依赖包；

（1）通过 npm 安装 ECharts；

npm install echarts --save

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

import echarts from 'echarts';

Vue.prototype.$echarts = echarts;

（3）已全局引入，单页面中无需再引。

（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）已全局引入，单页面中无需再引。

（1）通过 npm 安装 jQuery；

npm install jquery --save

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

import jquery from 'jquery';

Vue.prototype.$ = jquery;

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

import $ from "jquery"

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路径图依然无法呈现。

三、完整代码