地图数据获取阿里云数据可视化平台
选中想要的地图然后右侧其他类型复制即可

<template>
  <div class="chartBox">
    <div id="mapChart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>
<script>
import JSON from "./map.json";
import * as echarts from "echarts";
export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      echarts.registerMap("南阳市", JSON);
      var myChart = echarts.init(document.getElementById("mapChart"));
      let option = {
        title: {
          text: "各区县新车数量分布", //标题的文本内容
          x: "left", //标题的水平对齐方式
        },
        tooltip: {
          trigger: "item", //提示框的触发方式
          // 提示框的格式化函数，用于自定义提示框的内容
          formatter: function (data) {
            if (data.data && data.data.name) {
              return (
                "分布数量" +
                "<br/>" +
                data.data.name +
                ":" +
                data.data.value +
                "辆"
              );
            } else {
              return "";
            }
          },
        },
        //工具箱
        toolbox: {
          show: true, //是否显示工具箱
          orient: "vertical", //工具箱的布局方向，可以设置为"horizontal"表示水平布局，或"vertical"表示垂直布局
          left: "right", //工具箱的水平位置，可以设置为具体的像素值或百分比，或使用预定义的值如"left"、"center"、"right"等
          top: "center", //工具箱的垂直位置，可以设置为具体的像素值或百分比，或使用预定义的值如"top"、"middle"、"bottom"等
          //工具箱中的功能按钮，可以通过设置不同的属性来定义不同的功能按钮
          feature: {
            //下载
            dataView: { readOnly: false },
            restore: {}, //重置按钮
            saveAsImage: {}, //保存为图片按钮
          },
        },
        // 视觉映射
        visualMap: {
          min: 10, //数据的最小值，用于确定颜色映射的最小值
          max: 500, //数据的最大值，用于确定颜色映射的最大值
          text: ["辆", "数量"], //颜色映射的文本标签，数组的第一个元素表示最小值的文本，第二个元素表示最大值的文本
          realtime: false, //是否实时刷新视觉映射的颜色，设置为false时，只在初始化时计算颜色映射
          calculable: true, //是否显示拖拽用于调整颜色映射范围的手柄
          //颜色映射的范围，可以设置为一个颜色数组，表示最小值到最大值之间的颜色渐变
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        series: [
          {
            map: "南阳市", //地图的名称，可以是预定义的地图名称，也可以是自定义的地图名称
            zoom: 1, //当前视角的缩放比例
            roam: true, //是否开启平游或缩放
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 4,
            },
            name: "", //系列名称
            type: "map", //系列类型，用于指定图表的类型
            mapType: "南阳市", // 自定义扩展图表类型
            label: {
              //标签设置
              show: true,
              color: "black",
            },
            layoutCenter: ["50%", "50%"], //图表布局的中心位置
            layoutSize: "100%", //图表布局的大小
            data: [
              { name: "卧龙区", value: 150 },
              { name: "内乡县", value: 480 },
              { name: "方城县", value: 500 },
              { name: "宛城区", value: 80 },
              { name: "社旗县", value: 320 },
              { name: "唐河县", value: 252 },
              { name: "邓州市", value: 108 },
              { name: "西峡县", value: 481 },
              { name: "新野县", value: 200 },
              { name: "南召县", value: 211 },
              { name: "淅川县", value: 98 },
              { name: "桐柏县", value: 170 },
              { name: "镇平县", value: 360 },
            ],
            // 名称映射，用于自定义地图区域的名称
            nameMap: {},
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style scoped>
.chartBox {
  width: 50%;
  height: 50vh;
}
</style>