1.安装 echarts

npm install echarts  -D

2.封装组件
Map.vue

<template>
  <div class="chinaecharts">
    <!-- <h1>河北省地图</h1> -->
    <div id="mapChart" ref="mapChart"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts/map/js/province/hebei.js";
import "echarts/map/json/province/hebei.json";

export default {
  name: "HeBeiEcharts",
  methods: {
    mapFn() {
      // 基于准备好的dom，初始化echarts实例
      var mapChart = echarts.init(this.$refs.mapChart);
      var option = {
        tooltip: {
          trigger: "item",
          //formatter: "名称:{a}<br />坐标:{c}"
          formatter: function (params) {
            // 为名字加前缀
            var res = "地址:" + "北京" + "<br/>" + "设备数量:" + 2; //暂时写死
            return res;
          },
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            symbolSize: 6,
            itemStyle: {
              normal: {
                color: "#1a97b1",
              },
            },
            data: "河北",
          },
          {
            name: "categoryA", //用于自动弹出提示信息，配合dispatchAction使用
            type: "map",
            geoIndex: 0,
            data: [
              { name: "石家庄" },
              { name: "保定" },
              { name: "张家口" },
              { name: "承德" },
              { name: "秦皇岛" },
              { name: "唐山" },
              { name: "廊坊" },
              { name: "沧州" },
              { name: "邯郸" },
              { name: "衡水" },
              { name: "邢台" },
            ],
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            symbolSize: 6,
            itemStyle: {
              normal: {
                color: "#dc863c",
              },
            },
            data: "河北",
          },
        ],
        geo: {
          map: "河北",
          zoom: 1.12, //当前视角的缩放比例
          roam: true, //是否开启平游或缩放
          label: {
            normal: {
              show: true,
              position: "right",
              textStyle: { color: "#4F6276" }, //省的文字颜色
            },
            emphasis: {
              textStyle: {
                color: "red",
              },
            },
          },
          itemStyle: {
            normal: {
              // 省的边缘颜色
              borderColor: "#999",
              areaColor: "#E8EDF3", //背景色
            },
            // 鼠标触发时省的颜色
            emphasis: {
              areaColor: "#B7CCEE",
              borderWidth: 0,
            },
          },
          regions: [
            {
              name: "北京",
              itemStyle: {
                normal: {
                  areaColor: "#18a8d8",
                },
              },
            },
          ],
          animation: false,
        },
      };
      mapChart.setOption(option),
        window.addEventListener("resize", () => {
          // 自动渲染echarts
          mapChart.resize();
        });
    },
  },
  mounted() {
    this.mapFn();
  },
};
</script>
<style scoped>
.chinaecharts {
  position: relative;
  width: 60%;
  height: 500px;
  background-color: green;
  bottom: 50px;
  left: 50px;
}
#mapChart {
  width: 100%;
  height: 100%;
}
</style>

3.在父组件中使用

(1)导入
import Map from "./components/map/Map.vue";
(2)注册
  components: {
    Map
  },
(3)在template中使用
<template>
  <div>
    <h1>我是首页</h1>
    <Map></Map>
  </div>
</template>

效果图如下所示:

Map.png