目录

一、案例效果图

二、依赖包的下载（echarts、echarts-gl、jQuery）

1.echarts 包的下载

2.echarts-gl 包的下载

3.jQuery 包的下载 

4.小结 

三、完整代码

四、代码释义

模板（template）

脚本（script）

样式（style）

注意事项

---

一、案例效果图

---

二、依赖包的下载（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 组件，旨在使用 ECharts（一个使用 JavaScript 实现的开源可视化库）来绘制一个 3D 路径图，展示世界范围内的航线。这个组件主要包含三个部分：模板（template）、脚本（script）和样式（style），但在这个例子中，样式部分为空。下面是对这段代码的详细解释：

模板（template）

• <div class="login_new">：这是一个包含整个组件内容的容器，尽管类名（login_new）可能有些误导，因为它并不直接关联到登录功能。
• <div id="main" style="width: 100%;height: 10rem"></div>：这是ECharts图表的容器，具有100%的宽度和固定的10rem高度。id="main"用于在JavaScript中引用这个DOM元素。

脚本（script）

• 引入依赖：代码首先通过import语句引入了echarts、echarts-gl（ECharts的3D扩展）、jquery以及ECharts的世界地图数据。
• 组件定义：
  • name: "login_new"：定义了组件的名称。
  • methods：包含了一个draw方法，用于初始化ECharts图表并绘制3D路径图。
    • 使用this.$echarts.init(document.getElementById('main'))初始化图表，但这里有一个问题：通常Vue组件中不会直接访问this.$echarts，除非在Vue实例中通过某种方式全局注册了echarts。这里可能是一个错误或者遗漏，通常我们会直接使用echarts.init(...)。
    • 从一个远程URL加载航线数据（flights.json），并使用这些数据来设置图表的选项，包括3D地球的设置和航线（通过lines3D系列）的绘制。
    • 使用window.addEventListener('keydown', ...)添加了一个键盘事件监听器，用于在按键时切换航线的特效。
  • mounted：Vue组件的生命周期钩子，当组件挂载到DOM上时调用。这里它调用了draw方法来绘制图表。

样式（style）

• 在这个例子中，<style scoped>部分是空的，表示没有为组件定义特定的样式。

注意事项

1. this.$echarts的使用：如上所述，this.$echarts的使用可能是不恰当的，除非在Vue实例或组件中有特殊的配置。通常，我们会直接使用echarts.init(...)来初始化图表。
2. ECharts配置：代码中的ECharts配置相当复杂，包括3D地球的详细设置和航线特效的配置。这确保了图表既美观又功能强大。
3. 数据加载：使用jQuery的$.getJSON来加载数据，这是一种常见的做法，但也可以考虑使用原生的fetch API或其他现代JavaScript库。
4. 键盘事件监听：监听全局键盘事件可能会影响页面的其他部分，特别是在大型应用中。考虑只在需要时添加和移除事件监听器。
5. 样式：虽然样式部分为空，但你可能需要为图表或容器添加一些样式来确保它们正确显示和布局。