素材已上传至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. angular 小技术点

    angular 标签 ng-options ng-model ng-checked ng-true-value ng-false-value ng-if ng-src delete $location ...

  2. Http请求头中 X-Requested-With

    String requestedWith = ((HttpServletRequest) request).getHeader("X-Requested-With"); 如果 re ...

  3. 费马平方和定理&&斐波那契恒等式&&欧拉四平方和恒等式&&拉格朗日四平方和定理

    费马平方和定理 费马平方和定理的表述是:奇素数能表示为两个平方数之和的充分必要条件是该素数被4除余1. 1. 如果两个整数都能表示为两个平方数之和的形式,则他们的积也能表示为两个平方数之和的形式. $ ...

  4. 破解优酷VIP视频

    目录 一 破解优酷VIP视频 一 破解优酷VIP视频 import requests import re import json HEADERS = { 'user-agent': 'Mozilla/ ...

  5. ansible-playbook实例

    准备前提 配置ansible主机详情:https://www.cnblogs.com/security-guard/ nginx的安装 编写nginx的自动部署文件nginx.yml      hos ...

  6. [PHP] 一个免费、开源的基于tp5+layui2.1.5开发的快速开发框架

    推荐 一个免费.开源的基于tp5+layui2.1.5开发的快速开发框架,既可以用来学习,也可以用来实际项目的快速开发: 码云下载:https://gitee.com/eduaskcms/eduask ...

  7. PATA1025PAT Ranking

    需要注意的就是sort函数的应用,还有自己比较函数cmp的编写 在一个就是结构体的设计,排序时的考室内的排序,数组下标的处理 参考代码: #define _CRT_SECURE_NO_WARNINGS ...

  8. 【BigData】Java基础_定义工具类，对ArrayList排序并且求最大值、最小值、平均值

    需求描述 编写一个工具类,对ArrayList实现以下功能: ① 排序 ② 求最大值 ③ 求最小值 ④ 求平均值 需求实现 实现代码 package cn.test.logan.day04; impo ...

  9. NamedParameterJdbcTemple与RowMapper实现

    NamedParameterJdbcTemplate和JdbcTemplate功能基本差不多. 1.配置 db.properties 1 jdbc.user=root 2 jdbc.password= ...

  10. Java编程思想之十八 枚举类型

    关键字enum可以将一组具名的值的有限集合创建为一种新的类型, 而这些具名的值可以作为常规的程序组件使用.这是一种非常有用的功能. 18.1 基本enum特性 创建enum时,编译器会为你生成一个相关 ...