I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details



(figure 1)



(figure 2)

I was inspired to write this case from the Earth map of Baidu Map (Figure 2). Later I searched the one developed by WebGL, but it was difficult. But since it’s all visualization, I thought of ECharts and went straight to the official website to search. Sure enough, the moon plugin was found in 3D Earth. Cut the crap and get started!

Vue for the project frame, after the project is installed with scaffolding. Echarts and echarts-GL are two separate plugins that need to be installed separately



Install echarts:npm install echarts --save

Install echarts – gl:npm install echarts-gl

Ready to start

    //moon.vue
<template>
  <div class="moon">
    <span>The moon</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.// The rotation Angle is 0 by default, 10° per second}},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.// Can only be rotated vertically
              // 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>
Copy the code

The vue code structure will not be explained, so easy for echarts this plug-in briefly explained.

Container We use Echarts to realize data visualization. In fact, the resulting Canvas is always a Canvas, so before drawing, we need to prepare a DOM container with height and width for Echarts (mychart is a 400*400 div). The container is ready to initialize an echarts instance with the echarts.init method

Option Configuration Item Echarts has many configuration items. You can configure different options according to the diagram you draw. In general, echarts examples will have the corresponding option, we directly CV large method ok. There are several options that need to be explained for the moon example above

  • AutoRotate – Whether to enable the automatic rotation view around the object. This value is a Boolean and only true will have the automatic rotation effect
  • Distance — The distance from the default perspective to the subject, in the case of Globe from the earth’s surface, and in the case of other components such as grid3D and geo3D, from the central origin. Because the echarts container is 400*400, the moon is so large that it almost covers the entire container, and the Lego astronaut behind it is obscured. How can the Lego from my girlfriend be blocked?
  • Environment — Environment map. Support solid color, gradient color, panoramic map URL. This is the starry sky background. I definitely don’t have this Lego astronaut on the official website
  • BaseTexture – the texture of the surface of the Earth or moon. Here I use the image from the official website directly. Click here to preview the image directly

SetOption Generates diagrams using the setOption method after containers and configuration items are prepared

At this point, a simple moon rotation effect is done. I wish you a happy Mid-Autumn Festival in advance, and I wish you can find that guy or girl who takes the trouble to give you lego!