素材已上传至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. ubuntu1604系统初始化

    1.初始化网络配置 1.1.创建工作目录 生产环境下必须有个固定的目录存放一些安装软件和调试工具, 否则每个管理员都随意存放软件工具,服务器的环境可以想而知 mkdir -p /opt/{tools, ...

  2. selenium webdriver使用的一些小技巧（持续更新中）

    1.开始结束时间只支持控件选择,不支持填写,怎么办? 如下图: 解决方案: 用javaScipt把开始结束时间的reaonly属性去除,然后再输入,举例如下 /**     * 输入开始日期     ...

  3. vue大文件上传插件选哪个好?

    文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...

  4. Rotor里的异常处理

    我看到了一些关于Rotor(和CLR)中使用的异常处理机制的问题.下面是关于Rotor异常处理的另一个注意事项列表.目的是帮助Rotor开发人员调试和理解CLR中的异常. 异常生成和抛出 此步骤在很大 ...

  5. three.js 离线API

  6. 数据结构——单链表（singly linked list）

    /* singlyLinkedList.c */ /* 单链表 */ /* 单链表是一种链式存取的数据结构,用一组地址任意的存储单元存放线性表中的数据元素. */ #include <stdio ...

  7. 网络协议 11 - Socket 编程（下）

    之前我们基本了解了网络通信里的大部分协议,一直都是在“听”的过程.很多人都会觉得,好像看懂了,但关了页面回忆起来,好像又什么都没懂.这次咱们就“真枪实弹”的码起来,再用一个“神器”-网络分析系统详细跟 ...

  8. 网络协议 4 - 交换机与 VLAN：拓扑结构

    上一次,我们通过宿舍联网打魔兽的需求,认识了如何通过物理层和链路层组建一个宿舍局域网.今天,让我们切换到稍微复杂点的场景,办公室.     在这个场景里,就不像在宿舍那样,搞几根网线,拉一拉,扯一扯就 ...

  9. Bootstrap-duallistbox的使用

    1:首先引入相关js <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> &l ...

  10. 2018-2019-2 20165313 《网络对抗技术》 Exp 8 Web基础

    一.实践要求: (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. (2).Web前端javascip ...