echarts-中国地图实现自定义标记点为icon图片

最近碰到的新需求，搞了老半天，主要还是对api的不了解。

效果图如下所示：

效果图.png

js代码，主要是series这一块的配置，自定义的时候一定要设置type: "custom"，以下是关于renderItem函数的一些介绍，介绍链接 - https://echarts.apache.org/zh/option.html#%2Fsearch%2FrenderItem

renderItem函数介绍.png

        // options的局部配置文件
        series: [
          {
            name: "设备分布",
            type: "effectScatter",
            coordinateSystem: "geo",
            type: "custom",
            renderItem: function(params, api) {
              const data = convertData(data); // 处理数据
              let index = params.dataIndex;
              let deviceType = + data[index].deviceType;
              let array = [imgIcon1,imgIcon2,imgIcon3]; // 此处为引进的三张图片路径import imgIcon1 from '../路径'
              return that.addImage(array[deviceType-1], params, api, data);
            },
            data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true
              }
            },
            zlevel: 1
          }
        ]
       // 添加图片的方法
        addImage(url, params, api, realData) {
             // console.log(url,params,api,realData,'2222')
             return {
             type: "image",
             style: {
               image: url,
               x: api.coord([
                 realData[params.dataIndex].value[0],
                 realData[params.dataIndex].value[1]
               ])[0],
               y: api.coord([
                 realData[params.dataIndex].value[0],
                 realData[params.dataIndex].value[1]
               ])[1],
               width: 40,
               height: 40
             }
           };
         },