ECharts实现月球自转(超级简单,一看就会)

2,063 阅读2分钟

我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛

屏幕录制 2021-09-07 下午4.39.14.gif
(图1)


(图2)

写这个案例的灵感来自于百度地图的地球地图(图2),后来搜了一下使用WebGL开发的,比较难。不过 既然都是可视化,我想到了ECharts这个插件,直接去官网搜了一下。果然在3D地球中找到了moon这个插件。废话不多说直接开搞!

项目框架方面用的vue,脚手架装完项目后。直接安装echarts插件
这里需要注意的是echarts与echarts-gl是分开的两个插件,需要分别安装,官方也有说明

image.png
安装echarts:npm install echarts --save
安装echarts-gl: npm install echarts-gl

准备工作完成开始撸代码:

    //moon.vue
<template>
  <div class="moon">
    <span>月球</span>
    <div class="mychart" ref="mychart"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import 'echarts-gl';
  import url from '../assets/bg3.jpeg'
  export default {
    data() {
      return {
        ROOT_PATH: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples',
        imgurl: url,
        angle: 0, //自转角度默认为0,每s转10°
      }
    },
    methods: {
      initMoon() {
        let myChart = echarts.init(this.$refs.mychart)
        let option = {
          globe: {
            baseTexture: this.ROOT_PATH + '/data-gl/asset/moon-base.jpg',
            heightTexture: this.ROOT_PATH + '/data-gl/asset/moon-bump.jpg',
            displacementScale: 0.05,
            displacementQuality: 'medium',
            environment: this.imgurl,
            shading: 'realistic',
            realisticMaterial: {
              roughness: 0.8,
              metalness: 0
            },
            postEffect: {
              enable: true,
              SSAO: {
                enable: true,
                radius: 2,
                intensity: 1,
                quality: 'high'
              }
            },
            temporalSuperSampling: {
              enable: true
            },
            light: {
              ambient: {
                intensity: 0
              },
              main: {
                intensity: 2,
                shadow: true
              },
              ambientCubemap: {
                texture: this.ROOT_PATH + '/data-gl/asset/pisa.hdr',
                exposure: 0,
                diffuseIntensity: 0.02
              }
            },
            viewControl: {
              autoRotate: true,
              distance: 1000,
              // 只能纵向旋转
              // rotateSensitivity: [0, 1]
            }
          },
          series: []
        }
        myChart.setOption(option)
      },
    },
    mounted() {
      this.initMoon()
    }
  }
</script>

<style lang="less" scoped>
  .moon {
    display: flex;
    flex-direction: column;
    align-items: center;

    .mychart {
      margin-top: 30px;
      width: 400px;
      height: 400px
    }
  }
</style>

vue的代码结构就不解释了,so easy 对于echarts这个插件简单说明一下。

容器
我们使用echarts实现数据可视化实际上最后生成的都是一张Canvas,所以在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器(mychart这个400*400的div),容器准备好通过 echarts.init 方法初始化一个 echarts 实例

option配置项
echarts的配置项有很多,我们可以根据绘制不同的图配置不同的option。一般情况下echarts中的示例都会有对应的option,我们直接cv大法用就ok。对于上面这个月球的例子有几个option需要说明一下

  • autoRotate -- 是否开启视角绕物体的自动旋转查看,它的值是布尔值,只有为ture才会有自动旋转效果
  • distance -- 默认视角距离主体的距离,对于 globe 来说是距离地球表面的距离。以上是官方的解释,说白了这个属性就是定义初始化视角距离的(因为我这个echarts的容器是400*400的,初始化的这个月球是很大的几乎占满了整个容器,后面的乐高宇航员就被遮挡住了)
  • environment -- 环境贴图。支持纯色、渐变色、全景贴图的 url。就是这个星空背景图,官网上肯定没有这个乐高宇航员是我p上去的哈哈哈
  • baseTexture -- 地球或者月球表面的纹理,这里我直接用的官网的图片,点这里可直接预览该图片

setOption
准备好容器和配置项后,通过 setOption 方法生成图表

到这里,一个简单的月球自转效果就搞定了。提前祝大家中秋快乐!