echarts 地图点位图标为动图,且可以多个不同图标

根据项目需求,echarts地图点位图标要是动图,且可以设置不同图标,经过多方查找,找到解决方案,可以用svg使gif动起来

      let myChartChina = echarts.init(document.getElementById("myChartChina"), "transparent", {
        renderer: "svg"
      });

其中transparent是地图背景色,可设置其他颜色

也可以设置多个不同图标

     series: [
          {
            name: "数据",
            type: "map",
            mapType: "chinaJson",
            roam: false, //可缩放、拖动
            zoom: 1.2, //视觉比例大小,1.2即为原有大小的1.2倍
            // aspectScale: 0.8, // 拉伸地图 值为0-1
            label: {
              normal: {
                show: false //省份名称
              },
              emphasis: {
                show: true,
                color: "#fff"
              }
            },
            itemStyle: {
              normal: {
                areaColor: "#272235",
                borderColor: "#043C6A",
                fontWeightL: 700,
                borderWidth: 1
              }
            },
            emphasis: {
              show: true,
              itemStyle: {
                areaColor: "#457efa" // 鼠标hover省份颜色
              }
            },
            data: regionsData //数据
          },
          {
            type: "scatter", //类型：散点
            coordinateSystem: "geo", //使用地理坐标系
            geoIndex: 0,
            symbol: "image://" + img1,
            symbolSize: 40, //散点大小
            encode: {
              tooltip: 2
            },
            data: yiji,
            zlevel: 1
          },
          {
            type: "scatter", //类型：散点
            coordinateSystem: "geo", //使用地理坐标系
            geoIndex: 0,
            symbol: "image://" + img2,
            symbolSize: 40, //散点大小
            encode: {
              tooltip: 2
            },
            data: erji,
            zlevel: 1
          },
          {
            type: "scatter", //类型：散点
            coordinateSystem: "geo", //使用地理坐标系
            geoIndex: 0,
            symbol: "image://" + img3,
            symbolSize: 40, //散点大小
            encode: {
              tooltip: 2
            },
            data: sanji,
            zlevel: 1
          }
        ]