效果图：
1、安装 echarts
cnpm install echarts -S 或 npm install echarts -S
2、安装 echarts-gl
cnpm install echarts-gl@1.1.1 --save
3、引入三个包
import echarts from "echarts";
import "@/../node_modules/echarts/map/js/world.js"; // 引入世界地图数据
import "echarts-gl";
4、需要两张地图图片 和pisa.hdr文件 （附官网地址）图片和文件最好现在到本地使用
https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data-gl/asset/starfield.jpg
https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data-gl/asset/pisa.hdr
我实际不需要背景设置 environment: false, 需要背景可以修改属性为图片路径
<template>
<div ref="myEchart" class="myEchart" style="width: 80px; height: 80px">
</div>
</template>
<script>
import "@/../node_modules/echarts/map/js/world.js";
import "echarts-gl";
export default {
name: "world3D",
props: {},
data() {
return {
baseTextureSrc:require("@/assets/images/massageStatistics/earth2.jpg"),
heightTextureSrc:require("@/assets/images/massageStatistics/world200402.jpg"),
environmentSrc:require("@/assets/images/massageStatistics/copybg2.png")
};
},
created() {},
mounted() {
this.initEcharts();
},
methods: {
initEcharts() {
var mychartMap = this.$echarts.init(this.$refs.myEchart);
let option = {
globe: {
baseTexture: this.baseTextureSrc,
heightTexture: this.heightTextureSrc,
displacementScale:0,
shading: "realistic",
environment: false,
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 2,
shadow: false
},
ambientCubemap: {
texture: "./pisa.hdr",
exposure: 2,
diffuseIntensity: 5,
specularIntensity: 2
}
}
}
};
if (option && typeof option === "object") {
mychartMap.setOption(option, true);
}
window.onresize = mychartMap.resize;
}
}
};
</script>
<style scoped>
.myEchart {
width: 100%;
height: 100%;
}
</style>