vue中Echarts实现伪3D地图

1.需求3d切面地图，颜色渐变，选中阴影，可切换地市，点击时展示地理数据，由于echarts 3d地图无法渐变，地图比例大小效果不好改成理想效果，所以通过伪3d方式实现。最终实现如下图：

2.代码

<template>
  <div ref="myEchart" class="map-echart">
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: "map",
  data() {
    return{
        myChartMap: '',
    }
  },
  mounted() {
    const uploadedDataURL = require(`@/assets/json/map/provice/shandong.json`)
    echarts.registerMap('shandong', uploadedDataURL)
    this.myChartMap = echarts.init(this.$refs.myEchart)
    this.myChartMap.on('click', params=>{
        this.powerClick(params, 'echartClick')
    })
    this.initEcharts()
  }
  methods: {
    //画图
    initEcharts() {
       this.$nextTick(() => {
          const seriesData = [{
            name: '济南',
            value: [117.200, 36.791]
          },{
            name: '青岛',
            value: [120.253, 36.529]
          },{
            name: '莱芜',
            value: [117.676, 36.33]
          },{
            name: '潍坊',
            value: [119.09, 36.712]
          },{
            name: '枣庄',
            value: [117.46, 34.96]
          },{
            name: '东营',
            value: [118.66, 37.59]
          },{
            name: '德州',
            value: [116.619, 37.112]
          },{
            name: '烟台',
            value: [120.79, 37.101]
          },{
            name: '临沂',
            value: [118.286, 35.167]
          },{
            name: '日照',
            value: [119.150, 35.436]
          },{
            name: '济宁',
            value: [116.505, 35.385]
          },{
            name: '聊城',
            value: [115.878, 36.321]
          },{
            name: '淄博',
            value: [118.007648, 36.674939]
          },{
            name: '泰安',
            value: [116.800, 36.015]
          },{
            name: '威海',
            value: [122.100, 37.255691]
          },{
            name: '滨州',
            value: [117.850974, 37.693542]
          },{
            name: '菏泽',
            value: [115.700381, 35.220]
          }]
          const options = {
              // 悬浮窗
              tooltip: {
                trigger: 'item',
                formatter: function(point, params, dom, rect, size) {
                  //这里可以自定义浮窗的dom节点及样式
                  return `${params.name}: ${params.value || 0}`
                }
              },
              geo: [{
                //第一层需要操作点击展示的地图
                show: true,
                map: 'shandong',
                z: 1,//层级，zLevel优先级 > z
                aspectScale: 1,
                zoom: 1.15,//控制整体视图缩放
                roam: false,//控制是否可拖动
                label: {//初始标签样式
                  show: true,
                  color: '#fff',
                  position: "inside",
                  distance: 0,
                  fontSize: 12
                },
                // 所有地图的区域颜色
                itemStyle: {
                  normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        x2: 0,
                        y: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: '#0843a9' },
                            { offset: 0.9, color: '#001c80' }
                        ]
                    },
                    borderWidth: 1,//分界线width
                    borderColor: '#55bef2'
                  }
                },
                emphasis: {//鼠标移入显示效果
                  label:{
                    show: true,//是否显示高亮
                    textStyle: {
                        color: '#fff',
                        fontSize: 15  //高亮放大字体
                    }
                  },
                  itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        x2: 0,
                        y: 0,
                        y2: 1,
                        colorStops: [
                             { offset: 0, color: '#12F5D9' },
                             { offset: 0.49, color: '#08BCEE' },
                             { offset: 0.5, color: '#08BCEE' },
                             { offset: 1, color: '#0194FD' }
                        ]
                    },
                    shadowColor: 'rgba(255,248,74,0.8)',//阴影颜色
                    shadowBlur: 3,//阴影大小
                    shadowOffsetX: 10,//沿x轴宽度 
                    shadowOffsetY: 10,//沿y轴宽度
                    borderCap: 'square'
                  }
                },
                // 针对点击或特别区域做一些特别的样式
                // regions: [{
                //   name: '山东省',
                //   itemStyle: {
                //     areaColor: 'yellow',
                //     color: 'black',
                //     borderColor: 'pink'
                //   }
                // }]
              },{
                show: true,
                map: 'shandong',
                z: 0,
                top: 75,
                left: 100,
                aspectScale: 1,
                zoom: 1.15,
                roam: false,
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: 'rgba(5, 32, 136, 1)',
                        borderColor: 'transparent',
                        borderWidth: 5
                    },
                    emphasis: {
                        areaColor: 'rgba(5, 32, 136, 1)'
                    }
                }
              }],  
              // 数据
              series: [
                {
                  type: 'scatter',
                  itemStyle: {
                    color: '#efe244',
                    opacity: 1,
                    shadowColor: 'rgba(255, 248, 74, 0.8)',
                    shadowBlur: 10,
                    shadowOffsetX: 1,
                    shadowOffsetY: 1
                  },
                  symbol: 'diamond',
                  coordinateSystem: 'geo',
                  zlevel: 100,
                  geoIndex: 0,
                  top: 10,
                  symbolSize: 10,
                  data: seriesData,
                }
              ]
            }
            this.myChartMap.setOption(options)   
       })    
    },
    powerClick(params, fromEven){
        //...其他判断逻辑

        //点击时地图上色
        //tip:其他地方如果需要清除选中效果，需要置空regions 
        //this.myChartMap.setOption({geo: {regions: []}})
        this.myChartMap.setOption({
            geo: {
                regions: [
                    {
                        name: params.name,
                        value: 0,
                        selected: true,
                        itemStyle: {
                           color: {
                               type: 'linear',
                               x: 0,
                               x2: 0,
                               y: 0,
                               y2: 1,
                               colorStops: [
                                 { offset: 0, color: '#12F5D9' },
                                 { offset: 0.49, color: '#08BCEE' },
                                 { offset: 0.5, color: '#08BCEE' },
                                 { offset: 1, color: '#0194FD' }
                               ]
                            },
                            opacity: 1,
                            borderWidth: 0,
                            shadowColor: 'rgba(255,248,74,0.8)',//阴影颜色
                            shadowBlur: 3,//阴影大小
                            shadowOffsetX: 10,//沿x轴宽度 
                            shadowOffsetY: 10,//沿y轴宽度
                        },
                        label: {
                            color: '#fff',
                            fontSize: 15,
                            shadowColor: 'rgba(255, 248, 74, 0.8)',
                            shadowBlur: 10,
                            shadowOffsetX: 1,
                            shadowOffsetY: 1
                        }
                    }
                ]
            }
        })
    }
  }
  
}
</script>

<style>
.map-echart {
  height: 600px;
  width: 900px;
}
</style>

 3.地图json数据下载地址：

地图选择器

4.更灵巧的优化方案，如果需要设计感、立体感更强，可以切16地市的图片（每单个地市高亮），背景样式（width：100%;height: 100%），通过点击城市切换背景图片即可~