请教一下，要实现绿色图标一直旋转的效果该怎么做呢？

Question

因为无法上传视频，这边只能截图出来。视频中这个页面上绿色图标是一直旋转的。

以上是视频中效果

下面是我这边在具体实现时加载png图片

不知道如何让其旋转

    initEMap () {
      echarts.registerMap("china", this.mapData)
      var setOption={

    tooltip: {//鼠标移入提示框
            trigger: 'item', //出发方式
    borderColor: "rgba(167, 218, 234, 1)",
            textStyle: {
                color: '#000',
                decoration: 'none',
            },
            textStyle:{
              color:'white'
            },
          formatter:function(params, ticket, callback){
              if(params.seriesType=="scatter") {
                  //return params.data.name;
                  let res = `<div class="mapInfos">
                    <div class="mapInfos-item">
                      <div class="round round_1"></div>
                      <span class="label">${params.data.name}</span>
                    </div>
                    <div class="mapInfos-item">
                      <div class="round round_4"></div>
                      <span class="label">设备总数：</span>
                      <span class="num">${params.data.devices}</span>
                    </div>
                    <div class="mapInfos-item">
                      <div class="round round_5"></div>
                      <span class="label">告警数：</span>
                      <span class="num">${params.data.devices}</span>
                    </div>
                </div>`
                    return res
              }
          } 
        },
        geo: [
          {
          map: 'china',
          aspectScale:0.75, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
          zoom:1.2, //视觉比例大小,1.2即为原有大小的1.2倍
          layoutCenter: ["53%", "46%"],
          layoutSize: "100%",
          show: true,
          roam: false, // 一定要关闭拖拽
          // center: [105, 36], // 调整地图中心位置
            label: {
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#c0f3fb",
                borderWidth: 1,
                shadowColor: "#8cd3ef",
                shadowOffsetY: 10,
                shadowBlur: 120,
                areaColor: "transparent",
              },
            },
            // 这里是重点！！！
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  }
                },
                label: {
                  show: false // 隐藏文字
                }
              }
            ],
          },
          
          // 重影
          {
            type: "map",
            map: "china",
            zlevel: -1,
          aspectScale:0.75, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
          zoom:1.2, //视觉比例大小,1.2即为原有大小的1.2倍
            layoutCenter: ["53%", "47%"],
            layoutSize: "100%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor:"rgba(17, 149, 216,0.6)",
                borderColor: "rgba(58,149,253,0.8)",
                shadowColor: "rgba(172, 122, 255,0.5)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
            // 这里是重点！！！
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ],
          },
          {
            type: "map",
            map: "china",
            zlevel: -2,
          aspectScale:0.75, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
          zoom:1.2, //视觉比例大小,1.2即为原有大小的1.2倍
            layoutCenter: ["53%", "48%"],
            layoutSize: "100%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor: "rgba(57, 132, 188,0.4)",
                borderColor: "rgba(58,149,253,0.6)",
                shadowColor: "rgba(65, 214, 255,1)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "transpercent",
              },
            },
            // 这里是重点！！！
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ],
          },
          {
            type: "map",
            map: "china",
            zlevel: -3,
          aspectScale:0.75, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
          zoom:1.2, //视觉比例大小,1.2即为原有大小的1.2倍
            layoutCenter: ["53%", "49%"],
            layoutSize: "100%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor: "rgba(11, 43, 97,0.8)",
                borderColor: "rgba(58,149,253,0.4)",
                shadowColor: "rgba(58,149,253,1)",
                shadowOffsetY: 15,
                shadowBlur: 10,
                areaColor: "transpercent",
              },
            },
            // 这里是重点！！！
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ],
          },
          {
            type: "map",
            map: "china",
            zlevel: -4,
          aspectScale:0.75, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
          zoom:1.2, //视觉比例大小,1.2即为原有大小的1.2倍
            layoutCenter: ["53%", "50%"],
            layoutSize: "100%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 5,
                // borderColor: "rgba(11, 43, 97,0.8)",
                borderColor: "rgba(5,9,57,0.8)",
                shadowColor: "rgba(29, 111, 165,0.8)",
                shadowOffsetY: 15,
                shadowBlur: 10,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
            // 这里是重点！！！
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ],
          },
        ],
        series: [
          {
            type: "map",
            map: "china", // 自定义扩展图表类型
            aspectScale: 0.75,
            zoom: 1.2, // 缩放
            showLegendSymbol: true,
            label: {
              normal: {
                show: true,
                textStyle: { color: "#fff", fontSize: "75%" },
              },
              emphasis: {
                 show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
                borderColor: "#fff",
                borderWidth: 0.2,
              },
              emphasis: {
                show: false,
                color: "#fff",
                areaColor: "rgba(0,254,233,0.6)",
              },
            },
            layoutCenter: ["53%", "46%"],
            layoutSize: "100%",
            markPoint: {
              symbol: "none",
            },
            data: ["name":"点","station":"Jshdsroom","value":[117.31272800759257,34.29390337865003],"devices":9}],
          },

        {//散点形式
          name: '站点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: ["name":"点","station":"Jshdsroom","value":[117.31272800759257,34.29390337865003],"devices":9}],
            symbol: 'image://'+require('../../../assets/images/stationImg.png'),
            symbolSize: 50,
            itemStyle: {
                normal: {
                    //color: 'green',
                    borderWidth: 2,
                    borderColor: 'white'
                }
            },
            zlevel: 1,
    symbolRotate: 1
        },
        
        ],

      }
      this.chart.setOption(setOption);
      this.chart.off("click");//在渲染点击事件之前先清除点击事件以防止重复触发
       this.chart.on("click", ({ data}) => {
        debugger;
        if(data!=undefined && data!=null){
          //alert(data.name+"："+data.station)
          this.$cache.session.set("aqyx_pdzfid",data.station);
          this.$cache.session.set("stationName",data.name);
              this.$router.push({ path: "/aqyx/ssjk/zdkb" });
        }
        //data就是你点击那个柱子在系列中绑定的数据
      }); 
      window.addEventListener('resize', () => {
        // 自动渲染echarts
        this.chart.resize();
      })
    },

Answer 1

希望可以帮到你

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 66px;
            height: 66px;
            animation: rotate 1.3s infinite forwards linear;
        }
        @keyframes rotate {
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <img src="https://image-static.segmentfault.com/167/904/1679047249-64efe48f208a7_fix732" alt="">
</body>
</html>

Answer 2

做成webp，gif等动图，有工具可以自己生成。

Answer 3

默认echarts是使用canvas绘制，这个不能渲染动态图
echarts 社区给的方式:

https://github.com/apache/echarts/issues/7027
https://github.com/apache/echarts/issues/9530
https://github.com/apache/echarts/issues/10417

使用SVG 绘制应该也可以:

https://echarts.apache.org/zh/tutorial.html#%E5%9C%B0%E7%90%8...

示例:

https://echarts.apache.org/examples/zh/editor.html?c=geo-beef...