The installation

From NPM

npm install echarts --save
npm install echarts-gl --save
Copy the code

Note: if the echarts version in 5.0 the following, please install echarts – gl2.0 version below, otherwise it may report errors (not Found echarts/lib/label/labelStyle)

The introduction of

const echarts = require("echarts/lib/echarts");
require('echarts-gl');
Copy the code

usage

html:

  <div id="globe"></div>
Copy the code

Prepare a map of the earth like this:

js:

var chartDom = document.getElementById('globe');
var myChart = echarts.init(chartDom);
 myChart.setOption({
    backgroundColor: '# 000'.// Background color
    globe: {
      baseTexture: url,// Earth texture. A string that supports image paths, images, or Canvas objects
      heightTexture:url,// Earth's height texture
      shading: 'lambert'.// Color effect of 3d graphics in earth
      light: {
        ambient: {
          intensity: 0.2.// Ambient light intensity
        },/ / the ambient light
        main: {
          intensity: 0.8// Light intensity
        }/ / the main light source
      },// Lighting Settings
    },
    series: {
          type: 'lines3D'.coordinateSystem: 'globe'.blendMode: 'source-over'.effect: {show:true,},lineStyle: {
            width: 1.color: 'RGB (255, 255255).opacity: 1.trailWidth:4.trailLength:0.01,},/ / 3 d chart
      data[[[:112.40.2].// The longitude, latitude and altitude coordinates of the destination
              [120.20.1].// The longitude, latitude and altitude coordinates of the starting point], [[112.40.2],  
              [20, -40.1],], [[112.40.2], [...60.60.1],], [[112.40.2],  
              [40.0.1],], [[112.40.2], [...20.20.1],], [[112.40.2], [...39, -40.1],], [[112.40.2],  
              [67.43.1],], [[112.40.2],  
              [160, -18.1],], [[112.40.2],  
              [145.66.1],], [[112.40.2],  
              [1790.42.1[,],]}}); }); option && myChart.setOption(option);Copy the code

For more information about earth, see the official document: Globe

For more information about 3D ray Settings, see lines3D Atmosphere

The effect

conclusion

  • The shape of the earth depends on the skin, which isbaseTextureandheightTexture;
  • If nebula effect is set around it, setlayers;
  • The real-time attack line is inseries.dataSet the longitude and latitude of the starting point and end point;
  • Various light effects flare inlight
  • Outside glow effect inatmosphere
          atmosphere: {
            show: true.offset: 0.5.color: "Rgba (255255255,0.2)".glowPower: 2.innerGlowPower: 1.5,},Copy the code