最近搞echarts搞的要起飞了。
上边文章已经说了基本地图的功能实现，下边开始自定义图片,样式如下

在这里插入图片描述

我们需要对已经存在的资源池进行地区的显示。百度了之后发现代码都没实现成功，应该是我的写法，或者我没抄对吧。还是看看文档自己思考吧。
官网介绍传送门
完整代码

需要给myMap增加固定的高和宽
<div id="myMap" ref="myMap" class="border"></div>
<script>
import {
  defineComponent,
  ref,
  getCurrentInstance,
  onMounted,
} from "vue";
export default defineComponent({
setup(){
let { proxy } = getCurrentInstance();
const chart = ref(null);
const mapOption = ref({
      backgroundColor: "#FFFFFF",
      geo: {
        map: "china",
        roam: false,
        zoom: 1.2,
        scaleLimit: { min: 0, max: 3 }, // 缩放级别
        regions: [
          {
            name: "南海诸岛",
            value: 0,
            itemStyle: {
              normal: {
                opacity: 0,
                label: {
                  show: false,
                },
              },
            },
          },
        ],
        itemStyle: {
          areaColor: "#BEDAEE", //默认的地图板块颜色
          borderWidth: 1,
          borderColor: "#009ce0",
        },
      },
      title: {
        text: "资源池分步",
        x: "center",
        y: 20,
      },
      tooltip: {
        trigger: "item",
        formatter: function(params) {
          return `
                  <div>资源池名称</div>
                  <div>节点数量</div>
                `;
        },
      },

      //配置属性
      series: [
        {
          name: "数据",
          type: "map",
          mapType: "china",
          roam: false,
          geoIndex: 0,
          label: {
            normal: {
              show: false, //省份名称,
            },
            emphasis: {
              show: false,
            },
          },
          renderItem: function(params, api) {
            return addImage(params, api);
          },
          //value的两个值必须存在，这两个值为我们地图上该地区的中心横纵坐标点，地图上图片的显示需要用到该值
          data: [
            { name: "北京", value: [116.41989, 40.189913] },
            // { name: "天津", value: [117.351154, 39.28914] },
            // { name: "上海", value: [121.438732, 31.072508] },
            // { name: "重庆", value: [107.88398, 30.067321] },
            // { name: "河北", value: [114.502461, 38.045474] },
            // { name: "河南", value: [113.619918, 33.902738] },
            // { name: "云南", value: [101.485108, 25.008649] },
            // { name: "辽宁", value: [122.606135, 41.300702] },
            // { name: "黑龙江", value: [127.693002, 48.040469] },
            // { name: "湖南", value: [111.754313, 27.655081] },
            // { name: "安徽", value: [117.226894, 31.849585] },
            // { name: "山东", value: [118.186283, 36.374485] },
            // { name: "新疆", value: [85.294712, 41.371801] },
            // { name: "江苏", value: [119.48196, 32.985864] },
            // { name: "浙江", value: [120.109522, 29.181876] },
            // { name: "江西", value: [115.732937, 27.636129] },
            // { name: "湖北", value: [112.271042, 30.98802] },
            // { name: "广西", value: [108.794237, 23.833575] },
            // { name: "甘肃", value: [103.823557, 36.058039] },
            // { name: "山西", value: [112.305144, 37.619053] },
            // { name: "内蒙古", value: [114.059024, 44.315561] },
            // { name: "陕西", value: [108.887567, 35.263665] },
            // { name: "吉林", value: [126.171246, 43.703944] },
            // { name: "福建", value: [118.005928, 26.070282] },
            // { name: "贵州", value: [106.88108, 26.826362] },
            // { name: "广东", value: [113.429877, 23.334664] },
            // { name: "青海", value: [96.043531, 35.726402] },
            // { name: "西藏", value: [88.388277, 31.56375] },
            // { name: "四川", value: [102.693438, 30.674548] },
            // { name: "宁夏", value: [106.169867, 37.291331] },
            // { name: "海南", value: [109.754777, 19.189617] },
            // { name: "台湾", value: [120.971486, 23.749452] },
            // { name: "香港", value: [114.134394, 22.377371] },
            // { name: "澳门", value: [113.56642, 22.159262] },
          ], //数据
        },
      ],
    });
    const addImage = (params, api) => {
      console.log(params, api.value, china);
      return {
        type: "image",
        style: {
          image: Photopng,//图片地址
          x: api.coord([api.value(0), api.value(1)])[0],//该值为上边value的值
          y: api.coord([api.value(0), api.value(1)])[1],//该值为上边value的值
          width: 20,//图片宽度
          height: 19,//图片高度
        },
      };
    };
    onMounted(() => {
      console.log(proxy, chart.value, mapOption.value);
      chart.value = proxy.$echarts.init(
        document.getElementById("myMap"),
        "macarons"
      );
      chart.value.setOption(mapOption.value);
      // this.chart.on("click", function(params) {
      //   //此点击事件也可以做为其他echarts图表的点击 事件
      //   alert(params.name);
      //   console.info(params);
      // });
    });
}
})

如果有更好的解决办法欢迎一起交流-_-