以厦门市为例做地区悬浮上浮效果

echarts用地图还挺复杂的，

先展示下成果，Make A Pie - 以厦门市为例做地区悬浮事件上浮效果

参考了这个老铁的作品，Make A Pie - echarts地图渲染（厦门市）

结合Echarts官网关于shadowBlur和它的小伙伴的介绍，Documentation - Apache ECharts

地图geoJson文件来自于这个网站，echarts-map最新实时geoJson文件下载_hxkj.vip_HashTang

上vue代码

<template>
  <div>
    <el-card id="mapTest" style=" 900px; height: 700px"></el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    (window.onresize = () => {
      this.myChart.resize();
    }),
      this.drawMap();
  },
  methods: {
    drawMap() {
      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose();
      }
      this.$nextTick(() => {
        let self = this;
        this.myChart = echarts.init(document.getElementById("mapTest"));
        // HuaiAn
        // let geoJson = "http://localhost:8080/static/mapHuaiAn.geoJson";
        // XiaMen
        let geoJson = "http://localhost:8080/static/mapXiaMen.geoJson";
        // let geoJson =
        //   "https://geo.datav.aliyun.com/areas_v3/bound/350200_full.json";
        //   "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=350200_full";
        // var uploadedDataURL = "/asset/get/s/data-1628045698067-F_q-w3jYq.json";

        $.get(geoJson, (res) => {
          var mapData = res;
          echarts.registerMap("xiamen", mapData);
          var centerMap = {};
          if (mapData && mapData.features && mapData.features.length > 0) {
            for (var i = 0; i < mapData.features.length; i++) {
              var feature = mapData.features[i];
              var properties = feature.properties || {};
              if (properties && properties.name) {
                centerMap[properties.name] = properties.cp || [];
              }
            }
          }
          console.log("centerMap:", centerMap);

          var option = {
            backgroundColor: "#fff",
            title: {
              text: "厦门市",
            },
            // visualMap: {
            //     show: false,
            //     max: 100,
            //     seriesIndex: [3],
            //     inRange: {
            //         color: ['#A5DCF4', '#006edd'],
            //     },
            // },
            tooltip: {
              trigger: "item",
              formatter: function (params) {
                console.log(params);
                return params.name + params.data;
              },
            },
            geo: [
              {
                map: "xiamen",
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: "630",
                itemStyle: {
                  borderColor: "#2b9bf9", //省市边界线,
                  borderWidth: 2,
                  normal: {
                    show: false,
                    color: "#e9e6b3", //地图背景色
                    borderColor: "#2b9bf9", //省市边界线
                    borderWidth: 1,
                  },
                  emphasis: {
                    show: true,
                    color: "#d6eaff", //悬浮背景
                    // focus: "self",  // emphasis only itself [default:none]
                    // itemStyle: {
                    shadowOffsetX: 5,
                    shadowOffsetY: 5,
                    //   shadowColor: "rgba(0, 0, 0, 0.5)",
                    shadowBlur: 5,
                    // },
                  },
                },
                label: {
                  show: true,
                },
                // roam:true, // control the zoom
                regions: [
                  {
                    name: "湖里区", //区块名称
                    itemStyle: {
                      normal: {
                        areaColor: "#ebccb9",
                      },
                    },
                  },
                  {
                    name: "思明区", //区块名称
                    itemStyle: {
                      normal: {
                        areaColor: "#e4a2a3",
                      },
                    },
                  },
                  {
                    name: "翔安区", //区块名称
                    itemStyle: {
                      normal: {
                        areaColor: "#d8c0d6",
                      },
                    },
                  },
                  {
                    name: "海沧区", //区块名称
                    itemStyle: {
                      normal: {
                        areaColor: "#acd4a0",
                      },
                    },
                  },
                  {
                    name: "集美区", //区块名称
                    itemStyle: {
                      normal: {
                        areaColor: "#b4d3d6",
                      },
                    },
                  },
                  {
                    name: "同安区", //区块名称
                    itemStyle: {
                      normal: {
                        areaColor: "#e9e6b3",
                      },
                    },
                  },
                ],
              },
            ],
            series: [
              {
                type: "scatter",
                coordinateSystem: "geo",
                data: [
                  {
                    name: "湖里区",
                    value: 10,
                  },
                  {
                    name: "思明区",
                    value: 1123,
                  },
                  {
                    name: "集美区",
                    value: 3421,
                  },
                  {
                    value: [112.68353, 22.38265],
                  },
                ],
                symbolSize: "10",
                itemStyle: {
                  normal: {
                    color: "rgba(209,248,0,1)",
                  },
                },
              },
            ],
          };

          self.myChart.setOption(option);
        });

        // jQuery---
        // $.get(geoJson, function (res) {
        //   echarts.registerMap("huaiAn", res);
        //   self.myChart.setOption({
        //     series: [
        //       {
        //         type: "map",
        //         map: "huaiAn",
        //       },
        //     ],
        //   });
        // });
        // Axios---
        // this.get(geoJson)
        //   .then((res) => {
        //     echarts.registerMap("HuaiAn", res);
        //     this.myChart.setOption({
        //       series: [
        //         {
        //           type: "map",
        //           map: "HuaiAn",
        //         },
        //       ],
        //     });
        //   })
        //   .catch((err) => {
        //     console.log("ERR", err);
        //   });

        // });
      });
    },
  },
};
</script>

<style>
</style>

目前没做到用网址引入，一直报错403

大概效果如图

label: {
                    show: true,
                    color: "#222",
                  },