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

目录 

一、案例效果图

二、依赖包的下载（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路径图依然无法呈现。 

三、完整代码

推荐文章

 您阅读本篇文章共花了：