在Vue项目中引入 ECharts 3D 路径图

依赖包的下载（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: 858px"></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",
  data() {
    return {};
  },
  created() {},
  methods: {
    //绘制3D路径图
    draw() {
      var ROOT_PATH =
        "https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";

      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      $.getJSON(
        ROOT_PATH + "/data-gl/asset/data/flights.json",
        function (data) {
          var airports = data.airports.map(function (item) {
            return {
              coord: [item[3], item[4]],
            };
          });
          function getAirportCoord(idx) {
            return [data.airports[idx][3], data.airports[idx][4]];
          }
          // Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]
          var routesGroupByAirline = {};
          data.routes.forEach(function (route) {
            var airline = data.airlines[route[0]];
            var airlineName = airline[0];
            if (!routesGroupByAirline[airlineName]) {
              routesGroupByAirline[airlineName] = [];
            }
            routesGroupByAirline[airlineName].push(route);
          });
          var pointsData = [];
          data.routes.forEach(function (airline) {
            pointsData.push(getAirportCoord(airline[1]));
            pointsData.push(getAirportCoord(airline[2]));
          });
          var series = data.airlines
            .map(function (airline) {
              var airlineName = airline[0];
              var routes = routesGroupByAirline[airlineName];
              if (!routes) {
                return null;
              }
              return {
                type: "lines3D",
                name: airlineName,
                effect: {
                  show: true,
                  trailWidth: 2,
                  trailLength: 0.15,
                  trailOpacity: 1,
                  trailColor: "rgb(30, 30, 60)",
                },
                lineStyle: {
                  width: 1,
                  color: "rgb(50, 50, 150)",
                  // color: 'rgb(118, 233, 241)',
                  opacity: 0.1,
                },
                blendMode: "lighter",
                data: routes.map(function (item) {
                  return [airports[item[1]].coord, airports[item[2]].coord];
                }),
              };
            })
            .filter(function (series) {
              return !!series;
            });
          series.push({
            type: "scatter3D",
            coordinateSystem: "globe",
            blendMode: "lighter",
            symbolSize: 2,
            itemStyle: {
              color: "rgb(50, 50, 150)",
              opacity: 0.2,
            },
            data: pointsData,
          });
          myChart.setOption({
            grid: {
              top: "0px",
              left: "0px",
              right: "0px",
              bottom: "0px",
            },
            legend: {
              selectedMode: "single",
              left: "left",
              data: Object.keys(routesGroupByAirline),
              orient: "vertical",
              textStyle: {
                color: "#fff",
              },
            },
            globe: {
              environment: ROOT_PATH + "", //这里放的是地图的图片路径
              heightTexture: ROOT_PATH + "", //这里放的是地图的图片路径
              displacementScale: 0.1,
              displacementQuality: "high",
              baseColor: "#000",
              shading: "realistic",
              realisticMaterial: {
                roughness: 0.2,
                metalness: 0,
              },
              postEffect: {
                enable: true,
                depthOfField: {
                  enable: false,
                  focalDistance: 150,
                },
              },
              temporalSuperSampling: {
                enable: true,
              },
              light: {
                ambient: {
                  intensity: 1,
                },
                main: {
                  intensity: 1, //大小
                },
                ambientCubemap: {
                  texture: ROOT_PATH + "/data-gl/asset/lake.hdr",
                  exposure: 1,
                  diffuseIntensity: 0.5,
                  specularIntensity: 2,
                },
              },
              viewControl: {
                autoRotate: true, //自动旋转
                // distance: 70, //地图缩放程度
                // alpha: 89, //地图翻转程度
                // panMouseButton: "left",
                // rotateMouseButton: "right",

                // rotateSensitivity: true, //地图是否能旋转
                // zoomSensitivity: false, //地图是否能缩放
              },
              silent: true,
            },
            series: series,
          });
          window.addEventListener("keydown", function () {
            series.forEach(function (series, idx) {
              myChart.dispatchAction({
                type: "lines3DToggleEffect",
                seriesIndex: idx,
              });
            });
          });
        }
      );

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.draw();
  },
};
</script>

<style>
</style>