echarts，绘制局部地图 全国地图

下载各个地区的json数据

<template>
  <div id="map_chart" style="width: 100%;height: 100%;"></div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "vmap",
  mounted() {
    this.drawMapLine();
  },
  methods: {
    drawMapLine() {
      let geoCoordMap = require("./../assets/data.json");
      let Chart3 = echarts.init(document.getElementById("map_chart"));
      const mapData = require("./../assets/area.json");
      const name = "地图";
      this.$echarts.registerMap(name, mapData);
      Chart3.setOption({
        geo: {
          zoom: 1.1,
          map: name,
          aspectScale: 0.75,
          roam: true,
          label: {
            show: true,
            color: "rgba(138,146,246,0.58)",
            fontSize: 14
          },
          scaleLimit: {
            min: 1,
            max: 8
          },
          emphasis: {
            label: {
              color: "#fff",
              show: true
            }
          },
          itemStyle: {
            normal: {
              borderColor: "#0177ff",
              borderWidth: 1,
              areaColor: "rgba(7,21,57,0.5)",

              label: {
                show: true,
                fontWeight: "bold",
                opacity: 0.54,
                color: "rgba(138,146,246,0.58)",
                letterSpacing: "12.3px",
                textAlign: "right"
              }
            }
          }
        },

        series: [
          {
            name: "地点",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke"
            },
            label: {
              emphasis: {
                show: true,
                position: "right",
                formatter: "{b}"
              }
            },
            symbolSize: 10,
            showEffectOn: "render",
            itemStyle: {
              normal: {
                color: "#46bee9"
              }
            },
            data: geoCoordMap
          }
        ]
      });
    }
  }
};
</script>

data.json

[
  {
    "name": "A",
    "value": [
      118.81626,
      24.14538
    ]
  },
  
  {
    "name": "A1",
    "value": [
      118.20967,
      24.70439
    ]
  },
  {
    "name": "A2",
    "value": [
      117.733489,
      24.352094
    ]
  },
  {
    "name": "A3",
    "value": [
      118.79928,
      24.02182
    ]
  },
  {
    "name": "A4",
    "value": [
      119.128853,
      25.819481
    ]
  },
  {
    "name": "A5",
    "value": [
      116.17992,
      23.20149
    ]
  },
  {
    "name": "A6",
    "value": [
      121.56271,
      30.98827
    ],
    "symbolSize": 20 //数字越大圈越大
  },
  {
    "name": "A7",
    "value": [
      120.75364,
      36.10638
    ]
  },
  {
    "name": "A7",
    "value": [
      112.89846,
      30.44473
    ]
  },
  {
    "name": "A8",
    "value": [
      121.832477,
      30.117331
    ]
  },
  {
    "name": "A9",
    "value": [
      121.738287,
      29.225121
    ]
  }
]