素材已上传至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. GitHub 下载代码命令并且导入到IDEA环境

    git clone项目到本地(项目有master和其他分支) 1.首先新建一个空文件夹,在文件夹里面git初始化操作,在文件夹的根目录下,右键选择git bash here,在弹出窗体中:       ...

  2. 破解优酷VIP视频

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

  3. 总结：几种生成html格式测试报告的方法

    写自动化测试时,一个很重要的任务就是生成漂亮的测试报告. 1.用junit或testNg时,可以用ant辅助生成html格式: <target name="report" d ...

  4. Browser cannot find PAC because wpad hostname cannot be resolved

    Enterprise Network administrator may faultly forget to configure wpad hostname to DNS server. If use ...

  5. CCF虚拟现实与可视化技术专委会丨面向增强现实的可视计算技术研究进展概述

    https://mp.weixin.qq.com/s/I-rNwgXHEtwgdpkWzKtVXw 摘要 新一代增强现实技术需要依赖可视计算理论与方法解决大尺度复杂环境下的场景建模.内容生成.感知交互 ...

  6. cookies , sessionStorage 及 localStorage 的初步的区别

    cookies  保存在浏览器中,关闭浏览器后再次打开,任然存在,当然可能存在一定的有效期.(仅限存在同一台电脑,同一个浏览器中)  Session依赖Cookie!! sessionStorage  ...

  7. manacher算法笔记

    模板 [模板]manacher算法 不妨先只考虑如何求长度为奇数的回文串 记\(P[i]\)表示以\(i\)为中心最多向两边扩展几个字符,满足回文 如串\(ababa\), \(P[1]=0,P[2] ...

  8. 基于web公交查询系统---搭建mvc连接数据库（我的毕业设计，进度继续）

    建立一个spring的项目:我在已经做过的项目基础下做的,所以接口连接数据库挺快. 搭建好的.对应好数据库: 前几天进度已经完成简单的设计: 完成登录,用户管理(修改删除). 继续的数据库的信息获取, ...

  9. quick如何打开工程或者示例

    quick如何打开工程或者示例 1. 那里打开工程 cc.ui.UIPushButton.new(images, {scale9 = true}) :setButtonSize(buttonWidth ...

  10. 使用Redis搭建电商秒杀系统

    背景 秒杀活动是绝大部分电商选择的低价促销.推广品牌的方式.不仅可以给平台带来用户量,还可以提高平台知名度.一个好的秒杀系统,可以提高平台系统的稳定性和公平性,获得更好的用户体验,提升平台的口碑,从而 ...