淘先锋技术网

首页 1 2 3 4 5 6 7

       今天,无意中看见一个同学写的旋转地球的页面,非常漂亮。因此自己动手也学习编写,现在把代码放在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. 最后效果