首先我们要下载引入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地球的更多相关文章

  1. ECharts初体验

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  2. Xamarin.iOS开发初体验

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0

  3. 百度EChart3初体验

    由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...

  4. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  5. Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  6. Spring之初体验

                                     Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...

  7. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  8. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  9. 在同一个硬盘上安装多个 Linux 发行版及 Fedora 21 、Fedora 22 初体验

    在同一个硬盘上安装多个 Linux 发行版 以前对多个 Linux 发行版的折腾主要是在虚拟机上完成.我的桌面电脑性能比较强大,玩玩虚拟机没啥问题,但是笔记本电脑就不行了.要在我的笔记本电脑上折腾多个 ...

随机推荐

  1. Python pyecharts绘制水球图

    一.水球图Liquid.add()方法简介 Liquid.add()方法签名add(name, data, shape='circle', liquid_color=None, is_liquid_a ...

  2. 资源的批量删除与替换（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 资源分配好以后,嗯,很满意! 可是!有人看了不满意,或者自己手贱分配错了,要改? 改就改呗,和分配有什么区别吗? 没有啊! ...

  3. CF675A Infinite Sequence 题解

    Content 给定三个整数 \(a,b,c\),问你 \(b\) 是否在以 \(a\) 为首项,公差为 \(c\) 的等差数列中. 数据范围:\(-10^9\leqslant a,b,c\leqsl ...

  4. SpringMVC的拦截器不起作用原因

    SpringMVC的拦截器不起作用原因如下图: 这是因为过滤器没有加上这条语句chain.doFilter(request,response);,加上就能进入springMVC的拦截器了,调这个问题整 ...

  5. Spring Boot应用程序启动器

    官网地址:https://docs.spring.io/spring-boot/docs/2.1.12.RELEASE/reference/html/using-boot-build-systems. ...

  6. NLTK 3.2.5 documentation Installing NLTK

    Installing NLTK NLTK requires Python versions 2.7, 3.4, or 3.5 Mac/Unix Install NLTK: run sudo pip i ...

  7. 第一篇CSDN博客，大家好！

    大家好,我是负雪明烛! 我这昵称的来源是喜欢一句很有意蕴的古诗--苍山负雪,明烛天南. 我喜欢这句诗,很多的账号都用了这个"负雪明烛"的昵称,如果大家在其他地方看到叫这个名字的人, ...

  8. 【LeetCode】157. Read N Characters Given Read4 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 直接调用 日期 题目地址:https://leetco ...

  9. 【LeetCode】4. Median of Two Sorted Arrays 寻找两个正序数组的中位数

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 公众号:负雪明烛 本文关键词:数组,中位数,题解,leetcode, 力扣,python ...

  10. 【LeetCode】1. Two Sum 两数之和

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人公众号:负雪明烛 本文关键词:two sum, 两数之和,题解,leetcode, 力 ...