使用Echarts实现地图3D效果

1.安装echarts

2.获取坐标数据

可以在该网站中选择对应的城市，获取json数据

3.引入坐标json数据，初始化echarts并注册地图

<div id="main" style="width: 600px; height: 500px;"></div>

import jiangsu from "./jiangsu.json" // 引入地图json数据
import echarts from "echarts"
export default {
  name: "app",
  data(){
	  return {}
  },
  mounted(){
	  let chart = echarts.init(document.getElementById('main')); // 初始化echarts
	  echarts.registerMap('JS',jiangsu); // 注册地图
  }
}

3. 使用geo属性生成地图

data(){
	  return {
		  option:{
			  geo:[
				  {
					map:'JS',
					label:{
						show:true,
						color: '#eee'
					},
					itemStyle:{
						color:'#2075B8', // 背景
						borderWidth:'1', // 边框宽度
						borderColor:'#fff', // 边框颜色
					}
				  }				  
			  ]
		  }
	  }
  },
  mounted(){
	  let chart = echarts.init(document.getElementById('main'));
	  echarts.registerMap('JS',jiangsu);
	  chart.setOption(this.option)
  }

至此，一个简单的地图生成 ，效果如下：

 

 4.使用geo的top和zlevel属性来实现地图的堆叠效果

*geo属性可以是一个数组，构建多个相同的map，根据实际效果调整top值来实现堆叠效果，zlevel值越大，图层则越往上

data() {
			return {
				option: {
					geo: [{
							map: 'JS',
							zlevel:5,
							label: {
								show: true,
								color: '#eee'
							},
							itemStyle: {
								color: '#2075B8', // 背景
								borderWidth: '1', // 边框宽度
								borderColor: '#fff', // 边框颜色
							}
						},
						{
							map: 'JS',
							top:'11%',
							zlevel:4,
							itemStyle: {
								color: '#3C5FA1', // 背景
								borderWidth: '1', // 边框宽度
								borderColor: '#3C5FA1', // 边框颜色
							}
						},
						{
							map: 'JS',
							top:'12%',
							zlevel:3,
							itemStyle: {
								color: '#163F6C', // 背景
								borderWidth: '1', // 边框宽度
								borderColor: '#163F6C', // 边框颜色
							}
						},
						{
							map: 'JS',
							top:'13%',
							zlevel:2,
							itemStyle: {
								color: '#31A0E6', // 背景
								borderWidth: '1', // 边框宽度
								borderColor: '#31A0E6', // 边框颜色
								shadowColor: '#fff',  // 外部阴影 
								shadowBlur:'10'
							}
						}
					]
				}
			}
		}

 效果如下：