Echarts实现3D地球

Echarts官方文档>示例>3D地球 将这四张图片下载到本地，使用绝对路径引入 下边代表是封装到了页面中，然后在主页直接使用即可，如果在主页不显示请设置宽高

<template>
  <div ref="earth" id="earth" :style="{ width: '100%', height: '820px' }"></div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted } from "vue";
//引入"echarts-gl"用于创建图表类型
import "echarts-gl";
// 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
let internalInstance = getCurrentInstance();
let echarts = internalInstance.appContext.config.globalProperties.$echarts;

onMounted(() => {
  var dom = document.getElementById("earth");
  var myEarth = echarts.init(dom);

  let option = {
    backgroundColor: "#000", //背景颜色
    globe: {
      globeRadius: 100, //地球的半径。单位相对于三维空间，
      baseTexture: "/world.topo.bathy.200401.jpg",   //将Echarts中的
      heightTexture: "/world.topo.bathy.200402.jpg",
      displacementScale: 0.04,
      shading: "realistic",
      environment: "/starfield3.jpg",
      viewControl: {
        alpha: 30,
        beta: 160,
        autoRotate: true, // 开启自动旋转
        autoRotateAfterStill: 3,
        distance: 240,
      },
      realisticMaterial: {
        roughness: 0.9,
      },
      postEffect: {
        enable: true,
      },
      light: {
        main: {
          intensity: 5,
          shadow: true,
        },
        ambientCubemap: {
          texture: "/pisa.hdr",
          diffuseIntensity: 0.2,
        },
      },
    },
    series: [
      {
        name: "世界贸易情况",
        type: "lines3D",
        coordinateSystem: "globe",
        effect: {
          show: true,
        },
        blendMode: "lighter",
        lineStyle: {
          width: 2,
          color: "rgb(50, 50, 150)",
          opacity: 0.5,
        },
        data: [],
        silent: false,
      },
    ],
  }; // 随机数据 i控制线数量
  for (let i = 0; i < 100; i++) {
    option.series[0].data = option.series[0].data.concat(rodamData());
  }
  myEarth.clear();
  myEarth.setOption(option, true);
  option && myEarth.setOption(option);
});
function rodamData() {
  let name = "随机数据" + Math.random().toFixed(5) * 100000; // 模拟数据，构造飞线的起始经纬度
  let longitude = 116.2;
  let latitude = 39.56;
  let longitude2 = Math.random() * 360 - 180;
  let latitude2 = Math.random() * 180 - 90;
  return {
    coords: [
      [longitude, latitude],
      [longitude2, latitude2],
    ],
    value: (Math.random() * 3000).toFixed(2),
  };
}
</script>

最后效果