使用echarts 画地球 带lines3D 并有动画效果

代码

  //绘制地球
      var canvas = document.createElement("canvas");
      var texture = this.Echarts.init(canvas, null, {
        width: 4096,
        height: 2048,
      });
      texture.setOption({
        backgroundColor: "rgba(3,28,72,0.3)",
        geo: {
          type: "map",
          map: "world",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          silent: false, //图形是否不响应和触发鼠标事件
          boundingCoords: [
            [-180, 90],
            [180, -90],
          ],
          itemStyle: {
            normal: {
              borderColor: "#3fdaff",
              borderWidth: 2,
              areaColor: "transparent",
            },
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
          nameMap: nameMap,
          label: {
            show: false,
            formatter: "{a}",
            textStyle: {
              color: "red",
              fontSize: 30,
            },
          },
          emphasis: {
            label: {
              show: true,
              distance: 2,
              formatter: "{b}",
              textStyle: {
                color: "#2038cc",
                fontSize: 30,
              },
            },
          },
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 3,
            symbolSize: 20,
            rippleEffect: {
              period: 4,
              brushType: "stroke",
              scale: 4,
            },
            label: {
              normal: {
                show: false,
                position: "left",
                fontSize: 18,
                formatter: "{b}",
              },
            },
            itemStyle: {
              normal: {
                color: "red",
              },
            },
            emphasis: {
              label: {
                show: true,
                color: "red",
                fontSize: 30,
              },
              itemStyle: {
                symbolSize: 25,
              },
            },
            data: [
              { name: "香港", value: [114.15, 22.15] },
              { name: "台湾", value: [121.5, 25.05] },
              { name: "菲律宾", value: [120, 15] },
              { name: "美国", value: [-77.013222, 38.913611] },
              { name: "缅甸", value: [96.066023, 20.08684] },
            ],
          },
        ],
      });
      var option = {
        globe: {
          show: true,
          shading: "lambert",
          baseTexture: texture,
          // baseTexture: 'assets/images/world.jpg',
          // heightTexture:'../assets/images/world.jpg',
          light: {
            ambient: {
              //环境光强度
              intensity: 1,
            },
            main: {
              //主光源强度
              intensity: 0.8,
            },
          },
          //视角控制
          viewControl: {
            rotateSensitivity: 3, //鼠标旋转灵敏度，设置为0后无法旋转。
            zoomSensitivity: 3, //鼠标缩放灵敏度
            autoRotate: true, //自动旋转
            autoRotateAfterStill: 1, //鼠标停止后多久恢复旋转(为0时暂停后不恢复旋转)
            alpha:160,//视角绕 x 轴，即上下旋转的角度
            beta:-20,//视角绕 y 轴，即左右旋转的角度。
            // targetCoord: [120.52, 30.4], //定位到哪里
          },
        },
        series: [
          {
            type: "scatter3D",
            coordinateSystem: "globe",
            symbol: "circle",
            symbolSize: 6,
            itemStyle: {
              color: "#64f2ff",
            },
            emphasis: {
              itemStyle: {
                borderColor: "yellow",
              },
              label: {
                show: true,
                formatter: "{b}",
                position: "bottom",
              },
            },
            data: [
              { name: "上海", value: [120.52, 30.4] }, //东经  北纬
              { name: "福建", value: [119.313244, 26.083285] },
              { name: "广州", value: [113.261081, 23.153679] },
              { name: "重庆", value: [106.564186, 29.554545] },
              { name: "杭州", value: [120.210336, 30.261318] },
              { name: "南宁", value: [108.366555, 22.813813] },
              { name: "南京", value: [118.808171, 32.0835] },
              { name: "北京", value: [116.407063, 39.916901] },
              { name: "济南", value: [117.08328, 36.664197] },
              { name: "天津", value: [117.150024, 39.114174] },
              { name: "西安", value: [108.952789, 34.364196] },
              { name: "成都", value: [104.076769, 30.596155] },
              { name: "乌鲁木齐", value: [82.625682, 43.664149] },
              { name: "哈尔滨", value: [126.668811, 45.659686] },
              { name: "西宁", value: [100.139909, 36.703785] },
            ],
          },
          {
            type: "lines3D",
            coordinateSystem: "globe",
            // 动画效果
            effect: {
              show: true,
              period: 4, //特效动画的时间，单位为 s
              trailLength: 0.2, //特效尾迹的长度。0~1数值越大尾迹越长
              color: "#64f2ff",
              symbol: "arrow", //箭头图标
              symbolSize: 10, //图标大小
            },
            lineStyle: {
              normal: {
                color: "#00FEFF",
                width: 1,
                curveness: 0.3,
              },
            },
            blendMode: "lighter",
            data: [
              {
                coords: [
                  [120.52, 30.4], //上海
                  [114.15, 22.15], //香港
                ],
              },
              {
                coords: [
                  [119.313244, 26.083285], //福建
                  [114.15, 22.15], //香港
                ],
              },
              {
                coords: [
                  [113.261081, 23.153679], //广州
                  [114.15, 22.15], //香港
                ],
              },

              {
                coords: [
                  [126.668811, 45.659686], //哈尔滨
                  [114.15, 22.15], //香港
                ],
              },

              {
                coords: [
                  [106.564186, 29.554545], //重庆
                  [121.5, 25.05], //台湾
                ],
              },
              {
                coords: [
                  [100.139909, 36.703785], //西宁
                  [121.5, 25.05], //台湾
                ],
              },
              {
                coords: [
                  [120.210336, 30.261318], //杭州
                  [121.5, 25.05], //台湾
                ],
              },

              {
                coords: [
                  [82.625682, 43.664149], //乌鲁木齐
                  [121.5, 25.05], //台湾
                ],
              },
              {
                coords: [
                  [108.366555, 22.813813], //南宁
                  [121.5, 25.05], //台湾
                ],
              },
              {
                coords: [
                  [118.808171, 32.0835], //南京
                  [120, 15], //菲律宾
                ],
              },

              {
                coords: [
                  [116.407063, 39.916901], //北京
                  [120, 15], //菲律宾
                ],
              },
              {
                coords: [
                  [117.08328, 36.664197], //济南
                  [-77.013222, 38.913611], //美国
                ],
              },
              {
                coords: [
                  [117.150024, 39.114174], //天津
                  [-77.013222, 38.913611], //美国
                ],
              },
              {
                coords: [
                  [108.366555, 22.813813], //南宁
                  [-77.013222, 38.913611], //美国
                ],
              },
              {
                coords: [
                  [104.076769, 30.596155], //成都
                  [96.066023, 20.08684], //缅甸
                ],
              },
              {
                coords: [
                  [108.952789, 34.364196], //西安
                  [96.066023, 20.08684], //缅甸
                ],
              },
            ],
          },
        ],
      };
      this.chart.setOption(option);