素材已上传至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. redis常用操作（测试必备）

    连接redis redis的安装及基础配置,参考:https://www.cnblogs.com/UncleYong/p/9882843.html redis中,数据是key-value方式存储,ke ...

  2. [codevs1566]染色

    题目描述 Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一 ...

  3. restql 学习三 查询语言简单说明

    restql 中with 参数的内容在restql 中实际上就是http request 的请求内容.按照restql 的设计 method 分为 from (get) , to (post) ,in ...

  4. c# HttpClient的HTTP/2支持

    HTTP/2 是 HTTP 协议的主要修订版.HTTP/2 的一些显著功能是支持标头压缩和通过同一连接完全多路复用流.虽然 HTTP/2 保留了 HTTP 的语义(HTTP 标头.方法等),但它在数据 ...

  5. 【游记】CSP-S2019游记

    \(\Large\texttt{Day -1}\) 今天晚上gryz开了也许是晚宴(awa),有水饺和蛋糕.因为去拿笔记本的原因没有吃到蛋糕..好可惜. 明天不用上早自习太棒了. 明天出发报道. 这笔 ...

  6. c博客作业-数组

    0. 1.本章学习总结 1.1学习内容总结 1.1.1一维数组 1.一般定义形式:类型名 数组名 [数组长度];类型名指定数组中每个元素的类型,数组名是数组变量的名称,是一个合法的标识符,数组长度是一 ...

  7. vue本地静态图片的路径问题解决方案

    不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. 大部分的情况中,是开发者使用了错误的写法,例如: <img src="{{ imgUrl ...

  8. 微信小程序之判断页面来源

    1. 对非首页,使用 getCurrentPages 函数获取当前页面栈 onLoad: function (options) { let pages = getCurrentPages() if ( ...

  9. spark 资源动态分配

    'spark.shuffle.service.enabled': 'true', 'spark.dynamicAllocation.enabled': 'false', , , , 'spark.sq ...

  10. 非mvn项目转为mvn项目并构建mvn私服

    非mvn项目转为mvn项目并构建mvn私服 一.背景 公司里的系统是老系统,没有使用mvn,但是现在准备使用持续集成(CI),就要用到mvn,所以现在需要将老项目转为mvn项目,并且非mvn项目也是不 ...