在Vue项目中引入 ECharts 3D 路径图 Flights GL(需安装echarts、echarts-gl、jQuery依赖,已踩坑)
2023-09-14 09:12:48 时间
目录
二、依赖包的下载(echarts、echarts-gl、jQuery)
一、案例效果图
二、依赖包的下载(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>
相关文章
- Vue笔记:vue-router
- [JQuery] jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式
- vue 项目里正确地引用 jquery
- vue项目如何实现返回上一页
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt
- [Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)
- thinkphp6: 使用前后端分离的验证码(thinkphp 6.0.9/php 8.0.14/vue 3.2.26)
- ubuntu21.04(linux):安装node(14.17.1)和vue.js3.1环境
- vue-cli 工程中引入jquery
- vue框架-基础4-vue-使用vue-cli工具
- jQuery温习篇---强大的JQuery选择器
- vue指令:绑定样式:style
- standalone vue initialization process - Vue应用的初始化过程
- Atitit 常用技能点体系树 os win linux android 前后端 gui h5 vue js jquery bootstrap cocos2d Jafavx wpf
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- js jquery vue 网络请求封装 服务器 后台
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
- 029:vue+openlayers:使用MVT格式读取瓦片数据(示例代码)
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue(二)vue 指令及用法举例
- 一文说清 webpack、vite、vue-cli、create-vue 的区别
- 如何将vue项目打包为.apk文件
- Vue: vue-router路由