echart实现地图3d自动旋转效果，领导都喜欢_echarts 3d地图

最近收到一个需求，要做一个大屏的3d地图，毕竟领导都喜欢这种花里胡哨的东西，但这可难为我们开发了，于是在掉了好多头发以后，总算把这个需求大致实现出来了。先来看一下静态效果：


动画效果: 动画链接

一.构建指定地区的地图，获取地图json

大家可以去看这篇文章：链接
以及截取json 工具的网址：链接
楼主在这边就不一一阐述了，下面是我获取到的json图片:

二.npm 安装echarts ，并引入

因为是要做成3d ,所以除了安装echarts，还需要安装echarts-gl,如果有小伙伴不懂echarts-gl的可以自行进行百度。

接下来就是在main.js中引入


同时在vue 的原型中自定义一个全局变量$echarts 指向echarts，这样方便在全局使用，不需要再导入一遍。

三.封装3d 地图 -----关键

在template 中定义一个div

<div>
    <div id="testLine" ref="testLine" style="height: calc(80vh);width: 100%;" />
  </div>
1
2
3

在script 中引入刚刚的json

在mounted 中调用方法

  mounted() {
    this.myChart = this.$echarts.init(this.$refs.testLine)
    this.initChart()
  },
1
2
3
4

在methods 中定义方法

 methods: {
    initChart() {
      const { myChart, option } = this
      this.$echarts.registerMap('SX', { geoJSON: shaoxingMap })
      myChart.setOption(option)
    }
  }
1
2
3
4
5
6
7

最重要的是data 中options 的定义，如下：

四.总结

这块总体来讲不是很难，就是会用到一些平时没用到过的语法，故可能会多花点时间

如需完整代码，请联系邮箱:1015095073@qq.com
1