Echarts—根据地理坐标被标注的中国地图（标记可以自定义为图片）

实现效果图

这是一个有阴影的,并且根据坐标点被标记的地图展示，下面我们就把实现的代码贴出来，老样子，还是开袋即食！

创建echartChina.vue组件

1.点击下载中国地图json文件

把中国地图的json数据下载下来，放到项目本地中的utils文件夹下；位置随意，想放哪里都可以，能找到就行！

2.先写一个echartChina.vue组件
为了方便复用，我们可以先写一个地图组件，因为要实现地图阴影的效果，所以组件中对地图渲染了两次进行重叠，第一次是初始化地图阴影，第二次初始化就是实现地图功能效果的；

组件全部代码如下，直接粘贴即可；

<template>
   <div id="china_map"></div>
</template>

<script>
import * as echarts from 'echarts';
import china from '@/utils/china.json'
echarts.registerMap('china', china)

export default {
  data() {
    return {
    };
  },
  
  methods: {
    //初始化中国地图
    initEchartMap() {
      let mapDiv = document.getElementById('china_map');
      let myChart = echarts.init(mapDiv);
      var options
      options =  {
        tooltip: {
          show:false,
          triggerOn: "mousemove",   //mousemove、click
          padding:8,
          backgroundColor:'rgba(0,0,0,0.6)',
          borderWidth:0,
          textStyle:{
            color:'#fff',
            fontSize:12
          },
        },
        geo: {
          map: "china",
          roam: false,// 一定要关闭拖拽
          zoom: 1.6,
          center: [102, 36], // 调整地图位置
          aspectScale: 0.80, //长宽比
          label: {
            normal: {
              show: false, //关闭省份名展示
              fontSize: "10",
              color: "rgba(0,0,0,0.7)"
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#0d0059",
              borderColor: "#389dff",
              borderWidth: 1, //设置外层边框
              shadowBlur: 6,
              shadowOffsetY: 12,
              shadowOffsetX: -5,
              shadowColor: "#01012a"
            },
            emphasis: {
              areaColor: "#184cff",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        series:[
          {
            type: "map",
            map: "china",
            roam: false,
            zoom: 1.6,
            center: [102, 36],
            data:[],
            // geoIndex: 1,
            aspectScale: 0.80, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: "#0d0059",
                borderColor: "#389dff",
                borderWidth: 0.5
              },
              emphasis: {
                areaColor: "#17008d",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
      myChart.setOption(options);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
          myChart.resize();
      });

    },

    initChina(echartData){
      let mapDiv = document.getElementById('china_map');
      let myChart = echarts.init(mapDiv);
      var dataValue = echartData;
      var data1 = dataValue.splice(0, 4);
      var option = {
        series: [
          {
            type: "map",
            map: "china",
            roam: false,
            zoom: 1.6,
            center: [102, 36],
            aspectScale: 0.80, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(36,83,255,1)'
                        }, {
                            offset: 1, color: 'rgba(10,29,255,1)'
                        }],
                        global: false
                    },
                borderColor: "#389dff",
                borderWidth: 0.5
              },
              emphasis: {
                areaColor: "#17008d",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "",
            type: "scatter",
            coordinateSystem: "geo",
            data: dataValue,
            symbol: "circle",
            symbolSize: 10,
            hoverSymbolSize: 10,
            tooltip: {
              formatter(value) {
                return value.data.name + "<br/>" + "设备数：" + "22";
              },
              show: true
            },
            encode: {
              value: 2
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false
            },
            itemStyle: {
              color: "#e0eb40"
            },
            emphasis: {
              label: {
                show: false
              }
            }
          },
          //下面是前五产生涟漪动画
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: data1,
            symbolSize: 15,
            tooltip: {
              formatter(value) {
                return value.data.name + "<br/>" + "设备数：" + "22";
              },
              show: true
            },
            encode: {
              value: 2
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
              color: "#e0eb40",
              period: 9,
              scale: 5
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              show: true
            },
            itemStyle: {
              color: "#e0eb40",
              shadowBlur: 2,
              shadowColor: "#333"
            },
            zlevel: 1
          }
        ]
      };
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
          myChart.resize();
      });
    }
  }
 
};
</script>

<style scoped>
   #china_map{
        height: 100%;
    }
</style>

使用echartChina.vue组件

在需要使用地图的组件，直接引入即可，然后把需要展示的坐标地点传给地图组件，全部代码如下：

<template>
  <div class="echartChina">
    <EchartChina ref="myEchart4"/>
  </div>
</template>
<script>
import EchartChina from '@/components/bigEcharts/echartChina'
export default {
    data(){
      return {
         geoCoordMap:{
          哈尔滨: [126.63, 45.75],
          北京: [116.46, 39.92],
          广州: [113.23, 23.16],
          ...
         }
      }
    },
    components:{
        EchartChina,
    },
    mounted(){
       const {geoCoordMap} = this
       this.initChinaMap(geoCoordMap)
    },
    methods:{
      dealWithData(geoCoordMap) {
        var mapData = geoCoordMap
        var data = [];
        for (var key in mapData) {
          data.push({ name: key, value: mapData[key] });
        }
        return data;
      },
      initChinaMap(geoCoordMap){
         var chinaData = this.dealWithData(geoCoordMap)
         this.$nextTick(() => {
           this.$refs.myEchart4.initEchartMap()
           this.$refs.myEchart4.initChina(chinaData)
         })
      }
    }
}
</script>
<style lang='less' scoped>
.echartChina{
    height:100%;
    width: 100%;
    position: relative;
}
</style>

修改标记图标为图片

...
//引入图片
import gaoji from '@/assets/images/gaoji.png'
import chache from '@/assets/images/chache.png'
...
  {
     name: "",
     type: "scatter",
     coordinateSystem: "geo",
     data: dataValue,
     symbol: function(value,param){
        if(param.data.type == 0){
           return "image://" + chache;
        }else{
            return "image://" + gaoji;
        }
     },
     symbolSize: 20,
     hoverSymbolSize: 20,
   },