1、引入js文件及准备素材。js文件及素材下载参照官网 https://echarts.baidu.com/download.html
<script src="../js/lib/echarts.min.js"></script>
<script src="../js/lib/echarts-gl.min.js"></script>
<script src="../js/lib/world.js"></script>
所需素材:world.jpg、starfield.jpg、pisa.hdr
2、配置option
option = {
backgroundColor: "#000",
globe:{
baseTexture: "../img/world.jpg",
heightTexture: "../img/world.jpg",
displacementScale: 0.04,
environment: "../img/starfield.jpg",
shading:"realistic",
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
texture: "../img/pisa.hdr",
diffuseIntensity: 0.2
}
}
}
};
3、全部代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="earth" style="width: 100%; height: 600px"></div> <script src="../js/lib/echarts.min.js"></script> <script src="../js/lib/echarts-gl.min.js"></script> <script src="../js/lib/world.js"></script> <script> var dom = document.getElementById("earth") var myChart = echarts.init(dom); option = { backgroundColor: "#000", globe:{ baseTexture: "../img/world.jpg", heightTexture: "../img/world.jpg", displacementScale: 0.04, environment: "../img/starfield.jpg", shading:"realistic", realisticMaterial: { roughness: 0.9 }, postEffect: { enable: true }, light: { main: { intensity: 5, shadow: true }, ambientCubemap: { texture: "../img/pisa.hdr", diffuseIntensity: 0.2 } } } }; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
效果如图: