vue3 、ts、echarts 显示地球

<script setup lang="ts">
import * as echarts from 'echarts';
import "echarts-gl"
import geoWorld from './world.json'
import baseTexture from './baseTexture.jpg'
import environment from './environment.jpg'
import {onMounted, ref} from "vue";

import qq1 from '../国家中英对照.json';
import qq2 from '../世界国家中心点_国家英文名.json';

const earth = ref(null);
let earthChart =  ref(null);

onMounted(() => {
  if (earth.value) {
    earthChart = echarts.init(earth.value);
    echarts.registerMap("world", geoWorld);
    
    let ds = []
    let json1 = JSON.parse(JSON.stringify(qq1))
    let json2 = JSON.parse(JSON.stringify(qq2))
    let ccc = 1;
    function getRandomHexColor() {
      const hexChars = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += hexChars[Math.floor(Math.random() * 16)]; // 随机选择一个十六进制字符
      }
      return color;
    }

    for (const key in json1) {
      if (json1.hasOwnProperty(key)) {
        for (const key2 in json2) {
          if (json2.hasOwnProperty(key2)) {
            if(json1[key] == key2){
              //console.log(ccc + "、" +key + "->" +json1[key] +"->" +key2 + "->" +json2[key2]);
              ds.push({
                name: key,
                point: json2[key2],
                itemStyleColor: getRandomHexColor(),
                labelText: key + '•'
              })
            }
          }
        }
      }
    }

    // 点配置信息
    let series = ds.map(item => {
      return {
        name: item.name, // 是否显示左上角图例
        type: 'scatter3D',
        coordinateSystem: 'globe',
        blendMode: 'lighter',
        symbolSize: 16, // 点位大小

        itemStyle: {
          color: item.itemStyleColor, // 各个点位的颜色设置
          opacity: 1, // 透明度
          borderWidth: 1, // 边框宽度
          borderColor: 'rgb(13,255,211)' //rgba(180, 31, 107, 0.8)
        },
        label: {
          show: true, // 是否显示字体
          position: 'right', // 字体位置。top、left、right、bottom
          formatter: item.labelText, // 具体显示的值
          textStyle: {
            color: '#054dff', // 字体颜色
            borderWidth: 0, // 字体边框宽度
            borderColor: '#26f6e5', // 字体边框颜色
            fontFamily: 'sans-serif', // 字体格式
            fontSize: 14, // 字体大小
            fontWeight: 700 // 字体加粗
          }
        },
        data: [item.point] // 数据来源
      }
    });

    // 图表配置项
    const option = {
      // 图例设置
      // legend: {
      //   selectedMode: 'multiple',
      //   x: 'right',
      //   y: 'bottom',
      //   data: ds.map(item => {
      //     return item.name // 数据来源
      //   }),
      //   padding: [0, 10, 50, 0], // 填充位置,上、右、下、左
      //   orient: 'vertical', // 排列方式，vertical:垂直排列
      //   textStyle: {
      //     color: '#fff', // 文字颜色
      //   }
      // },
      backgroundColor: "rgba(26, 40, 71, 0.85)",
      globe: {
        baseTexture: baseTexture,
        heightTexture: baseTexture,
        displacementScale: 0.04,
        shading: 'realistic', // color
        atmosphere: {
          show: true, //显示大气层
          offset: 8,
          color: '#13315E'
        },
        environment: environment,
        realisticMaterial: {
          roughness: 0.9
        },
        postEffect: {
          enable: true
        },
        viewControl: {
          autoRotate: true, // 是否开启视角绕物体的自动旋转查看
          autoRotateSpeed: 3, //物体自转的速度,单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
          autoRotateAfterStill: 2, // 在鼠标静止操作后恢复自动旋转的时间间隔,默认 3s
          rotateSensitivity: 2, // 旋转操作的灵敏度，值越大越灵敏.设置为0后无法旋转。[1, 0]只能横向旋转.[0, 1]只能纵向旋转
          targetCoord: [116.46, 39.92], // 定位到北京
          maxDistance: 1000,
          minDistance: 50
        },
        light: {
          ambient: {
            intensity: 0.8 //环境光源强度
          },
          main: {
            intensity: 5,
            shadow: true
          },
          ambientCubemap: {
            texture: './pisa.hdr',
            diffuseIntensity: 0.2
          }
        },
        //data: regions
      },
      series: series
    };
    earthChart.setOption(option);
  }
})
</script>

<template>
  <div>
    <div ref="earth" style="width: 600px; height: 500px;"></div>
  </div>
</template>

<style lang="scss" scoped>

</style>

所需资源文件

 【免费】vue3、ts、echarts显示地球资源文件资源-CSDN文库