echarts+vue 个性化散点地图

html
做成了组件

<div class="histogram flex align-center justify-center pieChar">
    <div :id="chartId" :style="{width:stypeW+'vw',height:stypeH+'vh'}" class="pieChartmin"
      style=" margin-top:0.4vw;margin-left: 0.4vw;z-index: 999;"></div>
</div>

bd.json是中国地图点坐标数据
js
npm install echarts --save

获取离线地图json包

这里推荐使用阿里云提供的数据可视化平台

https://datav.aliyun.com/portal/school/atlas/area_selector

<script>
  import * as echarts from "echarts";
  import bd from "@/assets/js/bd.json";

  export default {
    name: 'mapEcharts',
    props: {
      //数据
      // pieDate: {
      //   type: Array,
      //   default: []
      // },
      // 宽
      stypeW: {
        type: [Number, String],
        default: 400
      },
      // 高
      stypeH: {
        type: [Number, String],
        default: 400
      },
      chartId: {
        type: String,
        default: ''
      }
    },
    computed: {

    },
    data() {
      return {

      }
    },
    mounted() {
      this.initMap(18, -70, 12, 90, 30, -40)

    },
    methods: {
      //   地图
      initMap(font, symbolOfh, tlinefontSize, syw, syh, symbolOfzz) {
        var that = this;
        const container = document.getElementById(that.chartId);
        that.echarts = echarts.init(container);
        // 中国地图geojson数据
        echarts.registerMap("bd", bd);
        // 区县信息

        // 背景贴图1
        const domImg = new Image();
        domImg.src =
          "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE4MTE0OTgyQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE4MTE0OTgzQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTgxMTQ5ODBBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTgxMTQ5ODFBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4v4trwAAAAVklEQVR42mL0D225cu0hAzWAjpY8C9CsL19/wIV4uDnI5gKNYmKgKhjcxrFAggBZiBIuyDhqRQWQOxoVo1ExGhWjUTEaFYMiKoB1LVq1TXZUAI0CCDAAcAlaxCt7dtQAAAAASUVORK5CYII=";
        // 背景贴图2
        const domImgHover = new Image();
        domImgHover.src =
          "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFDQ0Q2RjYyQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFDQ0Q2RjYzQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNDRDZGNjBBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNDRDZGNjFBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FboimAAAASklEQVR42mIUnL9XtHsDAzXA69IARjWtXJYX7+FCfyQEKeEyMVAVDG7jWCB+RhaihAsybjQqRqNiNCpGo2I0KoZZVDBSt9oGCDAAhYNrvRu3DWEAAAAASUVORK5CYII=";
        // 配置项
        // 颜色或文字的配置
        var option = {
          geo: {
            type: "map",
            aspectScale: 1, // 横向拉伸
            // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
            map: "bd",
            aspectScale: 0.75, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
            zoom: 1.7, //视觉比例大小,1.2即为原有大小的1.2倍
            offset: 5,
            // symbolOffset: [-10, -28],
            // symbolSize: [60, 30],
            roam: true,//可放大缩小
            center: [106, 36], // 初始化地图中心点位置
            label: {
              show: true,
              normal: {
                show: true, // 默认地图文字字号和字体颜色
                fontSize: 10,
                color: "#ffffff",
              },
              emphasis: {
                show: true,
                fontSize: 10, // 选中地图文字字号和字体颜色
                color: "#CFCFCF",
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#040c3c", //地图本身的颜色
                borderColor: "#00E3FE", //省份边框颜色
                borderWidth: 1, // 省份边框宽度
                opacity: 1, //图形透明度
                shadowBlur: 0,
                shadowOffsetX: 1,
                shadowOffsetY: 1,
                areaColor: {
                  image: domImg,
                  repeat: "repeat"
                },
              },
              emphasis: {
                areaColor: "#040c3c", // 高亮时候地图显示的颜色
                borderWidth: 0, // 高亮时的边框宽度
                areaColor: {
                  image: domImgHover,
                  repeat: "repeat"
                },
              },
            },
            textFixed: {
              Alaska: [20, -20],
            }
          },
          series: [
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              symbolSize: 12,
              zoom: 10,
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  shadowBlur: 10,
                  color: "#00E1FD",
                },
                emphasis: {
                  borderColor: "#fff",
                  borderWidth: 1,
                },
              },
              data: [
                { name: '北京', value: [116.405285, 39.904989, 2154] },
                { name: '天津', value: [117.190182, 39.125596, 1560] },
                { name: '上海', value: [121.472644, 31.231706, 2424] },
                { name: '重庆', value: [106.504962, 29.533155, 3102] },
                { name: '河北', value: [114.502461, 38.045474, 7556] },
                { name: '河南', value: [113.665412, 34.757975, 9605] },
                { name: '云南', value: [102.712251, 25.040609, 4830] },
                { name: '辽宁', value: [123.429096, 41.796767, 4359] },
                { name: '黑龙江', value: [126.642464, 45.756967, 3773] },
                { name: '湖南', value: [112.982279, 28.19409, 6899] },
                { name: '安徽', value: [117.283042, 31.86119, 6324] },
                { name: '山东', value: [117.000923, 36.675807, 10000] },
                { name: '新疆', value: [87.617733, 43.792818, 2487] },
                { name: '江苏', value: [118.767413, 32.041544, 8051] },
                { name: '浙江', value: [120.153576, 30.287459, 5737] },
                { name: '江西', value: [115.892151, 28.676493, 4648] },
                { name: '湖北', value: [114.298572, 30.584355, 5917] },
                { name: '广西', value: [108.320004, 22.82402, 4926] },
                { name: '甘肃', value: [103.823557, 36.058039, 2637] },
                { name: '山西', value: [112.549248, 37.857014, 3718] },
                { name: '内蒙古', value: [111.670801, 40.818311, 2534] },
                { name: '陕西', value: [108.948024, 34.263161, 3864] },
                { name: '吉林', value: [125.3245, 43.886841, 2704] },
                { name: '福建', value: [119.306239, 26.075302, 3941] },
                { name: '贵州', value: [106.713478, 26.578343, 3600] },
                { name: '广东', value: [113.280637, 23.125178, 11300] },
                { name: '青海', value: [101.778916, 36.623178, 603] },
                { name: '西藏', value: [91.132212, 29.660361, 344] },
                { name: '四川', value: [104.065735, 30.659462, 8341] },
                { name: '宁夏', value: [106.278179, 38.46637, 688] },
                { name: '海南', value: [110.33119, 20.031971, 934] },
                { name: '台湾', value: [121.509062, 25.044332, 2358] },
                { name: '香港', value: [114.173355, 22.320048, 745] },
                { name: '澳门', value: [113.54909, 22.198951, 63] },
                { name: '南海诸岛', value: [114.252615, 15.86029, 271.13] }
              ]
            },
          ],
        };
        that.echarts.setOption(option, true);
        that.echarts.on("click", function (e) {
          // var chooseName = mapDate.filter(item => {
          //   return item.name == e.name;
          // });
          // that.$emit("getisFazhidutu", chooseName);
        });
      }
    }
  }
</script>