素材已上传至https://gitee.com/i1520/echarts3DEarth.git     https://github.com/i1520/echarts3DEarth

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>

效果如图：

​

echarts 3D地球实现自动旋转的更多相关文章

  1. echarts图表X轴文字过长解决解决方案：根据文字长度自动旋转

    Echarts 标签中文本内容太长的时候怎么办 ? 关于这个问题搜索一下,有很多解决方案.无非就是 省略(间隔显示).旋转文字方向.竖排展示 前面两种解决方案,就是echarts暴露的: {   ax ...

  2. IOS6屏幕旋转详解（自动旋转、手动旋转、兼容IOS6之前系统）

    转自 http://blog.csdn.net/zzfsuiye/article/details/8251060 概述: 在iOS6之前的版本中,通常使用 shouldAutorotateToInte ...

  3. iOS系统自带的 UIAlertView 自动旋转的实现

    这里主要解析 UIAlertView 的几个关键功能的实现: 随着设备屏幕的旋转而旋转: Alert弹出框,使用UIWindow来实现,就是说,不用依赖于当前显示在最前面的UIView. 实现源码参考 ...

  4. IOS某个ViewController禁止自动旋转

    IOS屏幕自动旋转,强制横竖屏方法: - (BOOL)shouldAutorotate { return YES; } - (NSUInteger)supportedInterfaceOrientat ...

  5. Unity3d物体模型（实现旋转缩放平移自动旋转）

    基本功能实现:物体通过鼠标左键上下移动,中间键缩放.右键旋转,30秒没操作,物体自动旋转 实例代码: using UnityEngine; using System.Collections; publ ...

  6. cesium编程入门（七）3D Tiles，模型旋转

    cesium编程入门(七)3D Tiles,模型旋转 上一节介绍了3D Tiles模型的位置移动,和贴地的操作,这一节来聊一聊模型的旋转, 参考<WebGl编程指南>的第四章 假设在X轴和 ...

  7. 安装好ubuntu 18.10之后，屏幕一直在自动旋转，怎么办？

    sudo apt-get install okular dia gimp Gparted sudo add-apt-repository universesudo apt install gnome- ...

  8. Unity3D研究院之设置自动旋转屏幕默认旋转方向

    如下图所示,在处理屏幕默认旋转方向的时候可以在这里进行选择,上下左右一共是4个方向. 策划的需求是游戏采用横屏,但是要求支持两个方向自动旋转,如下图所示,我的设置是这样的. Default Orien ...

  9. Androidの解决自动旋转导致activity重启问题

    记录一下,经常在新建项目的时候就会发生这个问题,正好上次有个群友也问道了这个问题.就是设备屏幕打开自动旋转会导致activity重启,这样会消耗很多资源. 比如在加载listview数据会重新请求数据 ...

随机推荐

  1. Centos7离线部署docker

    下载docker离线包 wget https://download.docker.com/linux/static/stable/x86_64/docker-19.03.5.tgz 解压 tar -x ...

  2. 历届试题 危险系数-（dfs+记录路径）

     历届试题 危险系数   问题描述 抗日战争时期,冀中平原的地道战曾发挥重要作用. 地道的多个站点间有通道连接,形成了庞大的网络.但也有隐患,当敌人发现了某个站点后,其它站点间可能因此会失去联系. 我 ...

  3. 【mybatis】JdbcType 与Oracle、MySql数据类型对应关系

  4. Github api【Restful接口规范】

    Overview This describes the resources that make up the official GitHub REST API v3. If you have any ...

  5. CF1245E：Hyakugoku and Ladders

    CF1245E:Hyakugoku and Ladders 题意描述: 给你一个\(10*10\)的矩阵,矩阵描述如下 最开始的时候你在左下角,你的目标是到达左上角. 你可以走路径或者爬梯子. 路径的 ...

  6. L1和L2正则化（转载）

    [深度学习]L1正则化和L2正则化 在机器学习中,我们非常关心模型的预测能力,即模型在新数据上的表现,而不希望过拟合现象的的发生,我们通常使用正则化(regularization)技术来防止过拟合情况 ...

  7. fping 命令说明

    参数: -a 表示只在输出报告⾥列出当前存活的IP -d 解析主机名 -f 参数表示读⼊这个文件 -s 显示汇总信息 -g 指定⽹网段

  8. Mysql之配置双主热备+keeepalived.md

    准备 1 1. 双主 master1 192.168.199.49 2 master2 192.168.199.50 3 VIP 192.168.199.52 //虚拟IP 4 2.环境 master ...

  9. 关于qt creator各种假死的问题

    来自CSDN网友( qq191329827)内容,亲自尝试,且经历一致: 我有两个笔记本,1个台式机,都装了qt, 然后,我的thinkpad x1c,装上之后creator各种假死,网上看了好多解决 ...

  10. Spring Security教程之基于方法的权限控制（十二）

    目录 1.1     intercept-methods定义方法权限控制 1.2     使用pointcut定义方法权限控制 1.3     使用注解定义方法权限控制 1.3.1    JSR-25 ...