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

简介: 在Vue项目中引入 ECharts 3D 路径图 Flights GL(需安装echarts、echarts-gl、jQuery依赖,已踩坑)

一、案例效果图

1.gif


二、依赖包的下载(echarts、echarts-gl、jQuery)

       如下是 ECharts 官网给出的代码,但要注意的是,该代码需要 echarts、echarts-gl、jQuery 的加持才能正常使用;如果不安装依赖包,直接将官网代码引入项目中,会报各种错!

2.png



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

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>


相关文章
|
12天前
|
JavaScript
文本,wangEditor5的基本使用,开发文档地址,wangEditor5用于Vue3项目,想要使用好wangEditor项目,得看开发文档
文本,wangEditor5的基本使用,开发文档地址,wangEditor5用于Vue3项目,想要使用好wangEditor项目,得看开发文档
|
17天前
|
移动开发 JavaScript 前端开发
jQuery 安装
jQuery 安装
22 8
|
17天前
|
JavaScript 开发工具 git
大事件项目40---Vue代码里如何引入相对路径图片
大事件项目40---Vue代码里如何引入相对路径图片
|
20天前
Vue3项目 小兔鲜问题总结
Vue3项目 小兔鲜问题总结
19 2
|
20天前
|
JavaScript 前端开发 API
Vue3入门 - vue3相比于vue2的优点,及如何创建Vue3项目
Vue3入门 - vue3相比于vue2的优点,及如何创建Vue3项目
|
27天前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
35 0
 ECharts 雷达图案例001-自定义节点动画
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的业财票务一体项目管理系统 附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的业财票务一体项目管理系统 附带文章源码部署视频讲解等
12 0
|
11天前
|
JavaScript
vue3 创建项目、安装依赖、启动项目
vue3 创建项目、安装依赖、启动项目
9 0
|
12天前
|
JavaScript
vue 创建项目、运行项目、访问项目(vue2版)
vue 创建项目、运行项目、访问项目(vue2版)
13 0
|
14天前
|
JavaScript
vue项目打包后自动压缩成zip文件
vue项目打包后自动压缩成zip文件
18 0