在Vue项目中引入 ECharts 3D 路径图 Flights GL（需安装echarts、echarts-gl、jQuery依赖，已踩坑）_vue 获取echarts下载后的图片路径

目录

一、案例效果图

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

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】