echarts-gl初体验：使用echarts-gl实现3D地球
首先我们要下载引入echarts.js和echarts-gl.js
有需要的自己拿资源哈
链接：https://pan.baidu.com/s/1J7U79ey-2ZN4pjb7RTarjg
提取码：yytt
上代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<div class="container">
<div style="height: 800px; width: 45%" class="fymp" id="main"></div>
<div style="height: 800px; width: 45%" class="box2" id="main2"></div>
</div>
</body>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script src="./echarts.js"></script>
<script src="./echarts-gl.js"></script>
<script>
var ROOT_PATH =
'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option; var sin = Math.sin;
var cos = Math.cos;
var pow = Math.pow;
var sqrt = Math.sqrt;
var cosh = Math.cosh;
var sinh = Math.sinh;
var PI = Math.PI;
var aa = 0.4;
var r = 1 - aa * aa;
var w = sqrt(r);
option = {
tooltip: {},
visualMap: {
show: false,
dimension: 2,
min: -5,
max: 5,
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
]
}
},
xAxis3D: {},
yAxis3D: {},
zAxis3D: {},
grid3D: {
show: false,
postEffect: {
enable: true,
SSAO: {
enable: true,
radius: 4,
quality: 'high',
intensity: 1.5
}
},
temporalSuperSampling: {
enable: true
},
light: {
main: {
intensity: 2,
shadow: true
},
ambient: {
intensity: 0
},
ambientCubemap: {
texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
exposure: 2,
diffuseIntensity: 0.2,
specularIntensity: 3
}
}
},
series: [{
type: 'surface',
parametric: true,
silent: true,
wireframe: {
show: false
},
shading: 'realistic',
realisticMaterial: {
roughness: 0.2,
metalness: 1
},
parametricEquation: {
u: {
min: -13.2,
max: 13.2,
step: 0.2
},
v: {
min: -37.4,
max: 37.4,
step: 0.2
},
x: function (u, v) {
var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2));
return -u + (2 * r * cosh(aa * u) * sinh(aa * u)) / denom;
},
y: function (u, v) {
var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2));
return (
(2 *
w *
cosh(aa * u) *
(-(w * cos(v) * cos(w * v)) - sin(v) * sin(w * v))) /
denom
);
},
z: function (u, v) {
var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2));
return (
(2 *
w *
cosh(aa * u) *
(-(w * sin(v) * cos(w * v)) + cos(v) * sin(w * v))) /
denom
);
}
}
}]
}; option && myChart.setOption(option); var ROOT_PATH =
'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'; var chartDom = document.getElementById('main2');
var myChart = echarts.init(chartDom, 'dark');
var option; option = {
backgroundColor: '#000',
globe: {
baseTexture: ROOT_PATH + '/data-gl/asset/earth.jpg',
heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
displacementScale: 0.1,
shading: 'lambert',
environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
light: {
ambient: {
intensity: 0.1
},
main: {
intensity: 1.5
}
},
layers: [{
type: 'blend',
blendTo: 'emission',
texture: ROOT_PATH + '/data-gl/asset/night.jpg'
},
{
type: 'overlay',
texture: ROOT_PATH + '/data-gl/asset/clouds.png',
shading: 'lambert',
distance: 5
}
]
},
series: []
}; option && myChart.setOption(option);
</script> <style>
.title {
font-weight: 600;
font-size: 0.5rem;
} .container {
display: flex;
justify-content: space-around;
}
</style> </html>
实际效果图：
下载好资源把两份js文件放到和html文件同一级目录即可
echarts-gl初体验：使用echarts-gl实现3D地球的更多相关文章
- ECharts初体验
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
- Xamarin.iOS开发初体验
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0
- 百度EChart3初体验
由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...
- .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
- Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验
Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...
- Spring之初体验
Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 【Knockout.js 学习体验之旅】（1）ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- 在同一个硬盘上安装多个 Linux 发行版及 Fedora 21 、Fedora 22 初体验
在同一个硬盘上安装多个 Linux 发行版 以前对多个 Linux 发行版的折腾主要是在虚拟机上完成.我的桌面电脑性能比较强大,玩玩虚拟机没啥问题,但是笔记本电脑就不行了.要在我的笔记本电脑上折腾多个 ...
随机推荐
- Windows查看端口被占用的程序！
"到底是谁占用了80端口,该怎么查,怎么终止它?",这里就简单讲解一下,在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等. 这里主要是用到windows下的 ...
- <转>libevent使用demo
这篇文章介绍下libevent在socket异步编程中的应用.在一些对性能要求较高的网络应用程序中,为了防止程序阻塞在socket I/O操作上造成程序性能的下降,需要使用异步编程,即程序准备好读写的 ...
- [BUUCTF]REVERSE——reverse1
reverse1 附件 首先检查一下附件程序,64位,没有壳 64位ida载入,shift+f12检索程序里的字符串 我们得到了this is flag的提示,而且还看见了一个类似flag的字符串{h ...
- IPv6 DDNS 阿里云动态解析程序推荐： AliyunDdnsCSharp
IPV6 DDNS 设置 概述 中国移动宽带提供了公网IPv6地址,为了物尽其用,于是折腾了域名到IPv6 的解析服务. 平台使用的阿里云解析DNS,平台提供了接口可以方便的添加与修改解析地址. 本打 ...
- Various methods for capturing the screen
Explains techniques for capturing the screen programmatically. Download GDI source code - 72.1 Kb Do ...
- Windows系统安装Redis服务
下载压缩包,登录 https://github.com/MicrosoftArchive/redis/releases 下载Redis-x64-3.0.504.zip 我也上传了一份 https: ...
- 【LeetCode】845. Longest Mountain in Array 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 双数组 参考资料 日期 题目地址:https://l ...
- 【剑指Offer】复杂链表的复制 解题报告（Python）
[剑指Offer]复杂链表的复制 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interviews 题 ...
- LeetCode1238循环码排列
题目 给你两个整数 n 和 start.你的任务是返回任意 (0,1,2,,...,2n-1) 的排列 p,并且满足: p[0] = start p[i] 和 p[i+1] 的二进制表示形式只有一位不 ...
- Nginx 常用配置清单
侦听端口: server {# Standard HTTP Protocollisten 80;# Standard HTTPS Protocollisten 443 ssl;# For http2l ...