echarts绘制3D旋转地球

效果图

代码展示

import React, {
    Component, Fragment } from 'react';
import ReactEcharts from "echarts-for-react";
import echarts from 'echarts';
import 'echarts-gl';
import _ from 'lodash';
import world from './world.json';

echarts.registerMap('world',world);

class Earthgraph extends Component {
   
    constructor(props) {
   
        super(props);
        this.getApi = this.getApi.bind(this);
        this.getGraph = this.getGraph.bind(this);
        this.GetRandomNum = this.GetRandomNum.bind(this);
        this.state= {
   
            earthgraph:{
   },
            geoCoordMap:{
   
                '起点': [-90.696295, -35.679979],
                '111': [-90.696295, 30.679979],
                '222': [-110.696295, 30.679979],
                '333': [-120.696295, 30.679979],
                '444': [-130.696295, 0.679979],
                '555': [-100.696295, 0.679979],
                '666': [-90.696295, 0.679979],
                '777': [-80.696295, 0.679979],
                '888': [-70.696295, 0.679979],
                '999': [-60.696295, 0.679979]

            },
            addrData: [
                ['111',[[{
   
                    name: '111'
                    }, {
   
                        name: "起点",
                        value: 90
                    }]]
                ],
                ["222",[[{
   
                        name: '222'
                    }, {
   
                        name: "起点",
                        value: 90
                    }]]
                ],
                ['333',[[{
   
                        name: '333'
                    }, {
   
                        name: "起点",
                        value: 90
                    }]]
                ],
                ['444',[[{
   
                        name: '444'
                    }, {
   
                        name: "起点",
                        value: 90
                    }]]
                ],
                ['555',[[{
   
                        name: '555'