暂存3

<template>
<div id="container" style="width:400px;height:400px;"></div>
</template>
<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
import geoJson from "./world.json";
import { use } from "echarts"
import {
GlobeComponent,
} from "echarts-gl/components";
import { Scatter3DChart } from 'echarts-gl/charts';

use([ GlobeComponent,Scatter3DChart]);
onMounted(() => {
// search();
var data = [
{},
{
name: "中国",
lng: 111.11,
lat: 33.33
}
];
var canvas = document.createElement("canvas");
echarts.registerMap("world", geoJson);
var mapChart = echarts.init(canvas, null, {
width: 4096,
height: 2048
});

mapChart.setOption({
backgroundColor: "#060b27",
series: [
{
type: "map",
map: "world",
// 绘制完整尺寸的 echarts 实例
top: 0,
left: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90]
],
itemStyle: {
emphasis: {
label:{
show:false,
},
areaColor: "#EEF824"
}
}
}
]
});
let option = {
// tooltip: {},
globe: {
baseTexture: mapChart,
shading: "color",
// environment:
// "/asset/get/s/data-1631152139982-Bdn5u7gsd.jpg",
atmosphere: {
show: true
},
viewControl: {
autoRotate: true,
targetCoord: [100.46, 39.92]
}
},
// series: [
// {
// name: "数据",
// type: "scatter3D", //scatter3D
// coordinateSystem: "globe",
// emphasis: {
// label: {
// show: false
// }
// },
// data: data.map(v => {
// return {
// name: v.name,
// value: [v.lng, v.lat]
// };
// })
// }
// ]
};
// a.setOption(option);
echarts.init(document.getElementById('container')).setOption(option)
});
</script>