vue+echarts如何绘制市级地图？

话不多说 先看效果图 这里以深圳市为例

接下来看实现步骤

一、先建以下三个空文件

map.json 
maputil.js 
index.vue

二、这三个文件分别放什么内容？

（1）首先进入 地图获取数据 下载市级地图json数据然后拷贝放到 map.json文件里 。

（2）maputil.js 文件代码如下：

import shenzhen from "./json/shenzhen.json";

const mapDict = {
//注释掉的这些是要做下钻的功能 有空会完善
  // 秀洲区: "xiuzhou",
  // 南湖区: "nanhu",
  // 嘉善县: "jiashan",
  // 平湖市: "pinghu",
  // 桐乡市: "tongxiang",
  // 海宁市: "haining",
  // ...
};

const mapData = {
//注释掉的这些是要做下钻的功能
  // xiuzhou,
  // nanhu,
  // jiashan,
  // pinghu,
  // tongxiang,
  // haining,
  // ...
};

export function getMap(mapName) {
//注释掉的这些是要做下钻的功能
  //   const cityName = mapDict[mapName];
  //   if (cityName) {
  //     return [cityName, mapData[cityName]];
  //   }
  return ["shenzhen", shenzhen];
}

（3）index.vue文件代码如下：

  <h1>深圳市相关产业分布数据</h1>
          <div
            ref="charts"
            class="map"
            style="width: 900px; height: 600px"
          ></div>

<script>
import * as echarts from "echarts";
import { getMap } from "./maputil.js";
  mounted() {
    this.initMap();
  },
 methods: {
 	initMap() {
      // 可以多次使用
      const charts = echarts.init(this.$refs.charts);
      const option = {
        // 背景颜色
        // backgroundColor: "#404a59",
        // 提示浮窗样式
        // tooltip: {
        //   show: true,
        //   trigger: "item",
        //   alwaysShowContent: false,
        //   backgroundColor: "#0C121C",
        //   borderColor: "rgba(0, 0, 0, 0.16)",
        //   hideDelay: 100,
        //   triggerOn: "mousemove",
        //   enterable: true,
        //   textStyle: {
        //     color: "#DADADA",
        //     fontSize: "33",
        //     width: 20,
        //     height: 30,
        //     overflow: "break",
        //   },
        //   showDelay: 100,
        // },
        // 地图配置
        geo: {
          map: "shenzhen",
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                fontSize: 14,
                color: "#666666",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              // borderColor: "rgba(147, 235, 248, 1)",
              borderColor: "#A5BDF2",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },
        graphic: [
          {
            type: "text",
            left: "10%",
            top: "10%",
            style: {
              textStyle: {
                fontSize: 10,
              },
              font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
              fill: "#fff",
            },
          },
        ],
      };

      console.log(getMap());
      // 获得数据
      const [mapName, mapJson] = getMap();
      option.geo.map = mapName;
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap(mapName, mapJson);

      charts.setOption(option);

	      charts.on("click", ({ name }) => {
	      //点击各区事件 我这里功能是点击出现弹框
	        this.show = true;
	        this.name = name;
	        document.addEventListener("click", function (e) {
	          var x = e.pageX;
	          var y = e.pageY;
	          var pic = document.querySelector(".info-box");
	          pic.style.left = x - 250 + "px";
	          pic.style.top = y - 150 + "px";
	        });
	        // 注册地图
	        echarts.registerMap(mapName, mapJson);
	        // 渲染
	        charts.setOption(option, true);
	      });
      }
    },
  </script>