vue3 eacharts 地图渲染

效果

<template>
  <div class="map">
    <div ref="char" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue"; //watch
import "../../assets/map";
import { indu as indus } from "@/store/industry";
const char = ref(null);
const indu = indus();
const initCharts = () => {
  const charts = echarts.init(char.value);
  const option = {
    // 背景颜色
    backgroundColor: "rgba(255,255,255,0)",
    // 提示浮窗样式
    tooltip: {
      show: true,
      trigger: "item",
      alwaysShowContent: false,
      backgroundColor: "rgba(255,255,255,0.9)",
      borderColor: "rgba(0, 0, 0, 0.16);",
      hideDelay: 100,
      triggerOn: "mousemove",
      enterable: true,
      textStyle: {
        color: "#333",
        fontSize: "12",
        width: 20,
        height: 30,
        overflow: "break",
      },
      showDelay: 100,
    },
    series: [
      {
        type: "map",
        map: "xiaoshan",
        layoutCenter: ["50%", "48%"],
        label: {
          // 通常状态下的样式
          normal: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          // 鼠标放上去的样式
          emphasis: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        zoom: 1.2,
        // 地图区域的样式设置
        itemStyle: {
          normal: {
            borderColor: "#fff",
            borderWidth: 1,
            areaColor: {
              type: "radial",
              x: 0.1,
              y: 0.1,
              r: 0.1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(4, 80, 183, 1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#226bfc", // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
            shadowColor: "#1F5E97",
            shadowOffsetX: 4,
            shadowOffsetY: 5,
            shadowBlur: 2,
          },
          // 鼠标放上去高亮的样式
          emphasis: {
            areaColor: "#03ccfe",
            borderWidth: 0,
          },
        },
        // 单选 点击高亮
        selectedModeL: "single",
        select: {
          label: {
            show: true,
            color: "#fff",
          },
          itemStyle: {
            areaColor: "#03ccfe",
          },
        },
      },
    ],
  };

  // 地图注册，第一个参数的名字必须和option.geo.map一致
  charts.setOption(option);

  window.addEventListener("resize", () => {
    charts.resize();
  });

  charts.on("click", function (el) {
    console.log(el);
    indu.townlist.forEach((al) => {
      if (al.label == el.name) {
        indu.town = al.label;
        indu.towns = al.value;
      }
    });
  });
};
// 监听清空村社选择框  取消地图选中
// watch(
//   () => [indu.town],
//   () => {
//     if (indu.town == "" || indu.town == null) {
//       aaa.dispatchAction({
//         type: "unselect",
//       });
//       console.log(aaa);
//     }
//   }
// );
onMounted(() => {
  initCharts();
});
</script>
<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>

map.js 地图 json数据

(function (root, factory) {
  console.log("root", root);
  if (typeof define === "function" && define.amd) {
    // AMD. Register as an anonymous module.
    define(["exports", "echarts"], factory);
  } else if (
    typeof exports === "object" &&
    typeof exports.nodeName !== "string"
  ) {
    // CommonJS
    factory(exports, require("echarts"));
  } else {
    // Browser globals
    factory({}, window.echarts);
  }
})(this, function (exports, echarts) {
  var log = function (msg) {
    if (typeof console !== "undefined") {
      console && console.error && console.error(msg);
    }
  };
  if (!echarts) {
    log("ECharts is not Loaded");
    return;
  }
  if (!echarts.registerMap) {
    log("ECharts Map is not loaded");
    return;
  }
  echarts.registerMap("xiaoshan", {
    type: "FeatureCollection",
    crs: {
      type: "name",
      properties: {
        name: "urn:ogc:def:crs:OGC:1.3:CRS84",
      },
    },  features: [
    // ************************************这里配置地图数据 **************************************
      {
        geometry: {
          coordinates: [
            [
              [
                [120.4037364520001, 30.13978430300005],
                [120.404045781, 30.13971886800005],
                [120.4043432140001, 30.13973076500006],
                [120.404575212, 30.13976050900003],
                [120.4046882360001, 30.13810083500002],
                [120.4010778080001, 30.13783238100011],
                [120.4010173300001, 30.13857746100003],
                [120.4009262300001, 30.13878845700008],
                [120.4006624040001, 30.13907169700006],
                [120.4003387600001, 30.13934358100009],
                [120.400126846, 30.13943017700006],
                [120.401040522, 30.14030025000002],
                [120.4015782800001, 30.14018127700003],
                [120.4021969400001, 30.14002899100004],
                [120.4029726450001, 30.139957607],
                [120.403415224, 30.13989574100003],
                [120.4037364520001, 30.13978430300005],
              ],
            ],
            [
              [
                [120.407829739, 30.16549231700004],
                [120.407597742, 30.16408843500006],
                [120.4072319000001, 30.1641865880001],
                [120.4070861580001, 30.16387130900003],
                [120.40716349, 30.16353818500009],
                [120.4071248240001, 30.16313070200004],
                [120.407062363, 30.16242876100005],
                [120.40636683, 30.16241368800004],
                [120.4064807630001, 30.16321743300002],
                [120.4064807630001, 30.16384561100004],
                [120.406445071, 30.16443095900007],
                [120.4063986710001, 30.1648521230001],
                [120.4062808890001, 30.165191196],
                [120.40614169, 30.165433901],
                [120.4058704320001, 30.16570159100004],
                [120.406041753, 30.16591931100002],
                [120.4063237190001, 30.16614060100003],
                [120.4064736250002, 30.16626552300007],
                [120.406479909, 30.1662756150001],
                [120.4066281110001, 30.16624184700006],
                [120.4068065710001, 30.16615261800005],
                [120.407035594, 30.16595928600004],
                [120.4071664640001, 30.16584923600009],
                [120.4073627700001, 30.16560831600005],
                [120.407829739, 30.16549231700004],
              ],
            ],
            [
              [
                [120.404382971, 30.16346727700009],
                [120.4039261140001, 30.16346727700009],
                [120.403874016, 30.16464516300002],
                [120.404340141, 30.16466414600009],
                [120.404382971, 30.16346727700009],
              ],
            ],
          ],
          type: "MultiPolygon",
        },
        properties: {
          UserID: 0,
          XZQHBM: "330109108001",
          ZZYWID_CS: "",
          area: 130398,
          cunshe: "毕公桥社区",
          length: null,
          quxian: "萧山区",
          zhenjie: "衙前镇",
          name: "毕公桥社区",
        },
        type: "Feature",
      },
       ],
  });
});

main.ts 全局配置

window.echarts = echarts;