echar3D地图+3D柱形图

这是动起来的效果还是很流畅的，废话不多说 直接上代码

这是代码片段： 可能不是太清晰 为了不影响需要的人使用这里做一下解释吧，哈哈 小白一个。
这个echar geo3D 如果直接用 可能会有一些报错，不过吧 我也是看别人的博客解决的，这里就只能让你们自行搜索了，还是很容易的。如果你想预览，你可以把代码片段 复制到 echar的3D地图 替换来预览效果。

代码中：animationDurationUpdate 是控制动画过渡的（ecahr文档中也有，我也是后来发现）
alpha: 90
beta: 0
distance: 100
分别 代表的 是 视图的 角度 和 缩放度，在ecahr文档中搜索也能有详情的介绍，
做到上面这种效果 可以用 js 直接动态改变一下就能会用过渡动画实现上面的效果啦。

踩坑： 之前没有这个动画效果的时候，我就用js 定时器一直改变x轴平移视觉，导致渲染出来的效果非常的卡顿，之后看到了动画效果试了一下，发现效果比手动的好太多了。（毕竟网上看到没几个比较符合我需求的 只能东拼西凑了。）

 const data = [
         [116.41433, 39.91095, 100000],
         [116.41433, 38.91095, 50],
         [116.41433, 37.91095, 60],
         [117.191041, 39.134857, 20],
         [114.511934, 38.058785, 30],
         [112.543424, 37.887658, 40],
         [111.694848, 40.836106, 50]
       ]
  mychinamap.setOption({
        geo3D: {
          environment: 'auto',
          shading: 'realistic', // 这是 地图的高亮 （不需要的可以不要）
          map: 'china',
          itemStyle: {
            // areaColor: ['#007BC7', 'red', 'green', 'yellow'],
            areaColor: '#0688C9',
            opacity: 1,
            borderWidth: 1.5,
            borderColor: '#CE7521'
          },
          label: {
            show: true,
            textStyle: {
              color: 'rgba(248,248,248,1)',
              fontSize: 16,
              opacity: 1,
              backgroundColor: 'rgba(0,0,0,0)'
            },
            distance: 0
          },
          emphasis: {
            label: {
              show: true,
              textStyle: {
                color: '#E1EFFF',
                fontSize: 14
              }
            }
          },
          light: {
            main: {
              color: '#fff',
              intensity: 0.5,
              shadow: false,
              alpha: 100,
              beta: 180
            },
            ambient: {
              intensity: 0.2
            }
          },
          viewControl: {
            animationDurationUpdate: 8000, // 这个是动起来流畅的关键
            // autoRotate: true,
            minBeta: -720,
            maxBeta: 720,
            // autoRotateSpeed: 10,
           // alpha: this.alpha,
           // beta: this.beta,
           // distance: this.distance,
           alpha: 90,
           beta: 0,
           distance: 100,
            center: [0, -10, 0]
          }
        },
        series: [{
          label: {
            show: true,
            // formatter: function (a) { return a.data[2] },
            textStyle: {
              color: '#EFE900',
              fontSize: 14,
              fontWeight: 'bold',
              backgroundColor: 'rgb(225,225,225,0.2)'
            },
            distance: 0
          },
          type: 'bar3D',
          coordinateSystem: 'geo3D',
          shading: 'lambert',
          data: data,
          barSize: 0.3,  // 这里设置 柱子的粗细
          minHeight: 0.2, // 这里设置柱子的最低高度
          // minHeight: 1,
          silent: true,
          itemStyle: {
            color: 'rgba(255, 0, 0, 0.9)'
            // colorAlpha: 0.1
          }
        }]
      })

结语：项目需要所以东拼西凑，凑了一个比较简单的地图效果，这里就不深入研究了。