最近有个需求有用到Echarts画个地球，记录一下吧， 首先显示各个国家，是个json数据，如下：
太长了，，超过文章最大限制了，卡的要死，直接导个文件吧；
而且直接复制到代码里，单个文件的大小也会超过500K,编译不认了....
来源：
[3D 旋转地球 - 码上掘金](https://code.juejin.cn/pen/7376489234334482483)
直接上代码：
<template>
<div id="chart_area" class="world_chart"></div>
</template>
<script>
import { ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl';
import { CanvasRenderer } from 'echarts/renderers';
import { GlobeComponent } from 'echarts-gl/components';
export default {
data() {
return {
globeChart: null,
mapChart: null,
worldJson: null,
}
}，
beforeDestroy() {
if (this.mapChart) {
this.mapChart.dispose(); // 销毁ECharts实例并释放资源
this.mapChart = null; // 将实例置空，防止内存泄漏
}
if (this.globeChart) {
this.globeChart.dispose(); // 销毁ECharts实例并释放资源
this.globeChart = null; // 将实例置空，防止内存泄漏
}
this.worldJson = null;
},
mounted () {
this.initChart();
}，
methods: {
async initChart() {
this.setMapOption();
},
async setMapOption() {
//fetch('../assets/mapjson.json') // 注意这里的路径，它应该是构建后相对于根目录的路径
//.then(data => {
//this.worldJson = data.json();
this.worldJson = require('../assets/mapjson.json') //直接require，axios和fetch越弄越复杂，没那个必要
echarts.registerMap("world", this.worldJson);
const canvas = document.createElement("canvas");
this.mapChart = echarts.init(canvas, null, {
width: 1920,
height: 1080,
});
this.mapChart.setOption({
backgroundColor: "rgba(3, 52, 93,.1)",
geo: {
type: "map",
map: "world",
top: 0,
left: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90],
],
itemStyle: {
borderWidth: 1,
borderColor: "rgba(255,255,255,0.7)",
areaColor: "rgba(0, 90, 171, 1)",
label: {
show: false,
},
},
emphasis: {
itemStyle: {
areaColor: "#602bdd",
borderColor: "#f29100",
},
},
regions: [{
name: 'Japan',
itemStyle: {
normal: {
areaColor: 'red',
color: '#2a333d'
}
}
},]
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: [
{ name: 'Korea', value: [127.7669, 35.9078] },
{ name: 'United Kingdom', value: [-3.435, 55.3781] },
{ name: 'Germany', value: [10.4515, 51.1657] },
{ name: 'Japan', value: [138.9529, 38.7048] ,itemStyle: { color: 'red' }}
],
symbolSize: 20,
label: {
show: true,
formatter: '{b}',
fontSize: 12,
color: '#000',
fontWeight: 'bold',
position:'outer',
bleedMargin: 5
},
itemStyle: {
color: '#FF0000'
}
}
]
});
this.mapChart.on('click', (params) => {
if (params.name === 'United Kingdom'){
this.currentImageIndex = 1;
} else if (params.name === 'Germany'){
this.currentImageIndex = 2;
} else if (params.name === 'Japan'){
this.currentImageIndex = 3;
} else if (params.name === 'Korea'){
this.currentImageIndex = 4;
} else {
//
}
});
this.setGlobeOption();
//})
//.catch(error => {
// this.error = error;
// this.loading = false;
//});
},
async setGlobeOption() {
this.globeChart = echarts.init(document.getElementById("chart_area"));
this.globeChart.setOption({
globe: {
baseTexture: this.mapChart,
shading: "color",
// environment: require('../assets/bg2.png'),
atmosphere: {
show: true,
color:"#262364"
},
displacementScale: 0.1,
light: { // 光照阴影
ambient: {
intensity: 0.1
},
main: { // 主光源
intensity: 1.5,
shadow: true
},
},
realisticMaterial: {
roughness: 0.7,
metalness: 0.5,
},
postEffect: {
enable: true,
bloom: 10,
},
viewControl: {
center: [0, 0, 0],
alpha: 20,
beta: 50,
autoRotate: true,
autoRotateAfterStill: 3,
distance: 200,
autoRotateSpeed: 15,
},
},
});
},
</script>
<style rel="stylesheet/scss" lang="scss">
.world_chart{
width: 537px;
height: 467px;
}
</style>
