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 发行版的折腾主要是在虚拟机上完成.我的桌面电脑性能比较强大,玩玩虚拟机没啥问题,但是笔记本电脑就不行了.要在我的笔记本电脑上折腾多个 ...
随机推荐
- Docker通过阿里云镜像仓库使用Gitlab_CI部署SpringBoot项目
Docker.Gitlab.阿里云镜像仓库.SpringBoot的相关安装.搭建这里就不讲了. Linux 安装 Docker :https://www.cnblogs.com/linnuo/p/15 ...
- 保留重复项（Power Query 之 M 语言）
数据源: "姓名""基数""个人比例""个人缴纳""公司比例""公司缴纳"&qu ...
- Windows10下mysql 8.0.19 安装配置方法图文教程
第一步 下载安装包: 官网 毕竟是甲骨文公司的产品,去官网下真的慢! 这里有两个供选择的,我建议选第一个(因为我先下了第二个,结果失败了,不知道为什么总是出错.) 下载完自行选择路径解压就可以了. 第 ...
- LuoguP5139 z小f的函数 题解
Content 给定 \(T\) 个二次函数 \(y=ax^2+bx+c\),有若干次操作,有一个操作编号 \(p\),保证仅为以下这五种: 操作 \(1\):给定 \(k\),将函数图像向上移动 \ ...
- awk 循环过滤EPC脚本
无处理中EPC过滤脚本 #!/bin/bash if [ "$#" -lt 3 -o "$#" -gt 4 ];then #if [ "$#" ...
- Java 8 后的新功能梳理
为什么要写这篇文章 经过了若干年的发展,Java逐步从java8升级为java11,java17. 让我们对比学习一下最新一版的LTS版本和java8比起来让代码简化了多少. 文本块(Text Blo ...
- 1371 - Energetic Pandas
1371 - Energetic Pandas PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB ...
- 第十五个知识点:RSA-OAEP和ECIES的密钥生成,加密和解密
第十五个知识点:RSA-OAEP和ECIES的密钥生成,加密和解密 1.RSA-OAEP RSA-OAEP是RSA加密方案和OAEP填充方案的同时使用.现实世界中它们同时使用.(这里介绍的只是&quo ...
- JPEG原理详解 (转载)
JPEG算法解密 by jinchao 图片压缩有多重要,可能很多人可能并没有一个直观上的认识,举个例子,一张800X800大小的普通图片,如果未经压缩,大概在1.7MB左右,这个体积如果存放文本 ...
- uniapp滑动操作
<view @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend=& ...