vue中实现echarts的3d中国地图

echarts的地图是需要json文件的，而网上的地图json文件大多都需要收费，我们这里用阿里提供的免费的json文件，下载：前往下载地图json文件
3d的echarts地图需要安装以下两个插件：

npm install echarts --save
npm install echarts-gl --save

在main.js中全局引入：

import * as echarts from 'echarts';	// 引入echarts
import 'echarts-gl'  // 引入echarts-gl

vue中json文件的数据是通过axios请求回来的；刚开始我是把json文件放在同一个目录下，然后通过相对路径去发送请求，结果请求不到数据，提示跨域了，这是我踩的坑；
在网上看到大部分都是把json文件放到public文件夹下：

然后通过绝对路径的方式去请求就可以请求到数据：

getData() {
  axios.get('/json/china.json').then((res) => {
    console.log(res.data)
  })
}

注：/代表的就是public这个文件夹
完整代码：

<template>
  <div ref="chinaMap" style="width: 800px; height: 600px"></div>
</template>

<script>
import axios from 'axios'
import * as echarts from 'echarts';
import 'echarts-gl'
export default {
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios.get('/json/china.json').then((res) => {
        this.initMap('china', res.data)
      })
    },
    initMap(name, data) {
      echarts.registerMap(name, data);  // 注册矢量地图数据
      let map = echarts.init(this.$refs.chinaMap);
      let option = {
        series: [
          {
            type: 'map3D',
            map: name
          }
        ]
      };
      map.setOption(option, true);
    }
  }
}
</script>

需要美化一下的配置：

series: [
  {
    type: 'map3D',
    map: name,
    selectedMode: 'single', //地图高亮单选
    regionHeight: 4, //地图高度
    // boxDepth: 145,//地图倾斜度
    viewControl: {
      distance: 90, //地图视角 控制初始大小
      rotateSensitivity: [2, 2],
      zoomSensitivity: 2, //缩放操作的灵敏度
      panSensitivity: 2, //平移操作的灵敏度
      rotateMouseButton: 'left', //旋转操作使用的鼠标按键
      panMouseButton: 'right', //平移操作使用的鼠标按键
    },
    label: {
      show: true, //是否显示市
      textStyle: {
        color: 'white', //文字颜色
        fontSize: 14, //文字大小
      },
    },
    itemStyle: {
      color: '#2B5890', //地图颜色
      borderWidth: 2, //分界线wdith
      borderColor: '#5578A5', //分界线颜色
    },
    emphasis: {
      label: {
        show: true, //是否显示高亮
        textStyle: {
          color: '#fff', //高亮文字颜色
        },
      },
      itemStyle: {
        color: '#0489d6', //地图高亮颜色
      },
    },
    data: [],
  }
]

效果如下：