在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路径图依然无法呈现。
三、完整代码
<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"; //引入jQueryimport '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项目中引入 ECharts 3D 路径图 Flights GL(需安装echarts、echarts-gl、jQuery依赖,已踩坑)相关推荐
- VUE 项目中引入外部js文件(CND引入)
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件 引入 :<script src="https://cdnjs.cloudflare.com ...
- vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
- 如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图(含vue项目创建教程)
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
- 如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法 第一种:/static/page.html 第二种:通过iframe嵌入 第一种:/static/page.html 在static或public文件夹下,新 ...
- vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
- 【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出(封装工具类)
在SpringBoot+VUE项目中引入EasyExcel实现导入导出 一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...
- vue项目中引入字体包
问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步 一 下载对应的字体包文件,放置到我们的项目中 比如我需要PingFangSC的系列字体,我 ...
- vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例 官方文档 使用 安装 npm安装 np ...
- vue项目中引入Luckysheet
Luckysheet 介绍 Luckysheet ,一款纯前端类似excel的在线表格,功能强大.配置简单.完全开源. 实现功能 格式设置 样式 (修改字体样式,字号,颜色或者其他通用的样式) 条件格 ...
- vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门 在vue项目引入stylus css预处理器,可以让我们的c ...
最新文章
- AI 盯上了外包司机,看后视镜就被扣分,奖金拜拜!
- SyntaxError: Non-ASCII character '\xe9' in file...ubuntu系统下python运行时提示编码格式不正确以及提示No module named xxx
- 备战双 11!蚂蚁金服万级规模 K8s 集群管理系统如何设计?
- 新版DevEco不用USB线下载程序
- 正确理解WPF中的TemplatedParent
- 在vuex的mutations中使用vue的小技巧
- 网易云音乐java爬虫_用Java实现网易云音乐爬虫
- 火狐浏览器安装插件“组件未验证无法安装”问题解决
- python爬虫--获取百度热榜
- 国内视频监控芯片方案分析
- python-pyecharts雷达图
- 将ipad作为Windows10系统的的扩展显示屏
- [转知乎]网易云音乐的歌单推荐算法是怎样的?
- 在Python中进行加减乘除
- 申宝股票-A股长期向好趋势未
- 怎么找回xmind意外关机的文件_如何在意外关机后恢复文件
- 【转】初入NLP领域的一些小建议
- Win11如何关闭共享文件夹
- Python编程 深入浅出递归
- MRAM工作原理分析