在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"; //引入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>