使用echart.js和echarts-gl.js实现旋转地球

IT小悟

已于 2023-02-22 08:40:40 修改

阅读量1.5k

点赞数

分类专栏： Web前端 echarts 文章标签： javascript echarts 前端

于 2023-02-18 21:55:28 首次发布

本文链接：https://blog.csdn.net/speedwalkman/article/details/129104770

版权

Web前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

echarts

3 篇文章 0 订阅

订阅专栏

本文分享了一个使用ECharts和ECharts-GLJavaScript库创建的旋转地球页面的代码示例。ECharts是一个由百度开源并捐赠给Apache基金会的数据可视化图表库，而ECharts-GL是其扩展包，支持3D图像和全球数据可视化。作者提供了所需的背景图片链接和base64编码转换工具，并给出了完整的HTML和JavaScript代码实现旋转地球的效果。

摘要由CSDN通过智能技术生成

今天，无意中看见一个同学写的旋转地球的页面，非常漂亮。因此自己动手也学习编写，现在把代码放在CSDN，和大家一起分享！

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

ECharts-GL是ECharts的扩展包，用于听过 3D 维图像，全球数据可视化和WebGL性能优化。(ECharts-GL is an extension pack of Apache ECharts, which providing 3D plots, globe visualization and WebGL acceleration.)

完整例子代码：https://download.csdn.net/download/speedwalkman/87461999

1. 准备的资源：

1）https://echarts.apache.org/examples/data-gl/asset/starfield.jpg // 星空背景图片

2）https://echarts.apache.org/examples/data-gl/asset/earth.jpg // 地球图片

3）生产 base64编码：https://c.runoob.com/front-end/59/

2. 具体代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>旋转地球</title>
  <script id="echarts" src="https://cdn.staticfile.org/echarts/5.0.1/echarts.min.js"></script>
  <script id="echartsgl" src="https://cdn.staticfile.org/echarts-gl/2.0.8/echarts-gl.js"></script>
</head>

<body style="width: 1200px;height:1800px;">
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 936px;height:712px;"></div>

  </div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
      backgroundColor: '#000',
      globe: {
        environment: "", //背景图在此运行这里需要把图片下载下来，然后转成base64码再套进去
        baseTexture: "", //在此运行这里需要把图片下载下来，然后转成base64码再套进去
        shading: 'lambert',
        atmosphere: {
          show: true
        },
        light: {
          ambient: {
            intensity: 0.3
          },
          main: {
            intensity: 1.5
          }
        }
      },
      series: []
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>

3. 最后效果