Echarts-3D路径图-Flights GL、VUE3最新引用方法（避免踩坑）

Royzilong

已于 2023-02-21 10:12:14 修改

阅读量888

点赞数

分类专栏： vue element 文章标签： echarts javascript vue.js

于 2023-02-20 17:45:25 首次发布

本文链接：https://blog.csdn.net/Royzilong/article/details/129128502

版权

vue element 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

示例图（老版本）

示例图（新版本）

5个关键点避免踩坑

1.版本依赖问题

新版本是完全可以的（不可能不可以），不需要回退版本

npm i echarts-gl

npm i echarts

这里最大的问题是map/world.js的引入问题。

所以查看echarts 范例源码，发现如下大坑

<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Flights GL - Apache ECharts Demo</title>
</head>
<body>
  <div id="chart-container"></div>
  <script src="https://fastly.jsdelivr.net/npm/jquery"></script>
  <script src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
  <script src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  <script src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
</body>
</html>

echarts@4.9.0/map/js/world.js，问题就在这里。可以打开最后一个链接，将其中的js改成json，下载静态的json数据，如此链接：

https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/json/world.json

然后正常将地图数据进行静态引入即可

或者下载对应的低版本 echarts@4.9.0,然后去node moudels 里面找到echarts/map 文件夹，拿到自己需要的js或者json地图数据格式，再重新下载最新版本echarts，将刚才拿到的地图数据进行静态引入，两种方法均可以（也可以去GitHub找4.9版本的包，里面也有地图数据，这是第三种方法）。

2.请求数据

都2023年了，谁TM还用JQ？不用下载JQ依赖，不需要完全按着如下官方的写法，可以自己用顺手的，比如axios啥的

$getJSON(url function(urldata){

})
// 不用这样写，可以用axios替换，或者干脆不要，改成静态的

3.接口问题

官方的范例接口，有问题的看这里

https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data-gl/asset/data/flights.json

var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
var uploadedDataURL = ROOT_PATH + '/data-gl/asset/data/flights.json';

4.数据问题

也可以下载下来作为静态数据使用，如下所示，localData就是请求的数据，可以下载下来然后引入，然后进行使用

import localData from "../assets/3dGragphData.json";


function getAirportCoord(idx) {
    return [localData.airports[idx][3], localData.airports[idx][4]];
  }
  var routes = localData.routes.map(function (airline) {
    return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
  });

5.直接上完整代码（本范例，使用 setup 语法糖）

<template>
  <div class="login_new">
    <div id="main" style="width: 100%; height: 1000px"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
// import "echarts/map/js/world.js"; //必须引入世界地图  可以npm下载 echarts": "^4.6.0  因为5以后没有map了,然后拿到map里面的json文件再如下做静态引入
import world from "../assets/map/world.json";
import localData from "../assets/3dGragphData.json";

onMounted(() => {
  draw();
});
function draw() {
  console.log("localData", localData); // 静态文件也可以
  var myChart = echarts.init(document.getElementById("main"));
  myChart.showLoading();
  myChart.hideLoading();
  function getAirportCoord(idx) {
    return [localData.airports[idx][3], localData.airports[idx][4]];
  }
  var routes = localData.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,
    });
  });
}
</script>

<style scoped></style>