echarts基于地图的散点图部分散点间隔放大动态效果实现

echarts图中，基于地图，利用timeline组件实现气泡图动态跳转效果

问题描述

在开发中，要求对气泡图部分气泡进行轮播放大效果

echarts.registerMap("graphData", baiseArea);  //注册地图数据
let myChart = echarts.init(document.getElementById("paoGraph"));
let currentIndex = 0； //当前动态放大的点的定位，初始为0
//气泡图数据（进行数据处理，让需要动态效果的点放在数组前面）
let points = [
        {
          name: "学校1",
          value: [100.01, 30.76, 0, 0],  //[坐标，坐标，index，type]
          type: 0, //1不需要轮转放大效果  0需要
          itemStyle: {
            color: "#FF543A"
          }
        },
        {
          name: "学校2",
          value: [100.03, 30.88, 0, 1],
          type: 0, 
          itemStyle: {
            color: "#FF543A"
          }
        },
        {
          name: "学校3",
          value: [100.00, 30.86, 1, 2],
          type: 1, 
          itemStyle: {
            color: "#30D077"
          }
       }]
    let  notAchieveNum  = 2;  //需要乱转效果的气泡点个数
   // option
   let option = {
   // 时间轴
        timeline: {
          data: ["0", "3", "6"],
          axisType: "category",
          autoPlay: true,  //自动播放
          playInterval: 2000,   //播放间隔时间
          show: false,  //保留功能但是不展示时间轴
          left: "0",
          bottom: "-50px",  //将时间轴位置放在可视区域外
          width: "60px",
          label: {
            show: false
          },
          currentIndex: _this.currentIndex,
          symbolSize: 1,
          lineStyle: {
            color: "transparent"
          },
          checkpointStyle: {
            color: "transparent",
            symbolSize: 0.5
          },
          controlStyle: {
            showNextBtn: false, //不展示后一个按钮
            showPrevBtn: false, //不展示前一个按钮
            showPlayBtn: false  //不展示播放按钮
          }
        },
        // 鼠标悬浮到气泡上的toolTip
        tooltip: {
          trigger: "item",
          formatter: function(item) {
            if (item.componentSubType === "effectScatter") {
              let tipHtml1 = "";
              tipHtml1 =
                '<div style="height:20px;font-size:14px;line-height:20px;margin:0 2px;">' +
                item.data.name +
                "</div>";
              return tipHtml1;
            } else {
              return "";
            }
          }
        },
        geo: {
          map: "grapData",  //此处为注册的地图数据
          zoom: 1.1,
          scaleLimit: {
            min: 1,
            max: 3
          },
          roam: false,
          itemStyle: {
            areaColor: {
              type: "radial",
              x: 0,
              y: 0,
              r: 0.5,
              // color: "#053387",
              colorStops: [
                {
                  offset: 0,
                  color: "#059764" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#059764" // 100% 处的颜色
                }
              ],
              globalCoord: true // 缺省为 false
            },
            borderColor: "rgb(32,102,890)",
            borderWidth: 2,
            shadowColor: "#059953",
            shadowOffsetX: 6,
            shadowOffsetY: 16
          }
        },
        series: [
          {
            type: "map",
            map: "grapData",
            roam: false,
            label: {
              show: false
            },

            itemStyle: {
              borderColor: "#8de6f6",
              borderWidth: 2,
              areaColor: {
                type: "radial",
                x: 0,
                y: 0,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: "#059764" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#059764" // 100% 处的颜色
                  }
                ],
                globalCoord: true // 缺省为 false
              }
            },
            emphasis: {
              itemStyle: {
                label: {
                  show: false
                }
              }
            },
            zoom: 1.1
          },
          {
            type: "effectScatter",   //气泡图相关参数
            coordinateSystem: "geo",
            showEffectOn: "render",
            zlevel: 1,
            rippleEffect: {
              normal: {
                period: 3,
                scale: 3,
                brushType: "fill"
              }
            },
            emphasis: {
              scale: true
            },
            label: {
              formatter: "{b}",
              position: "right",
              offset: [15, 0],
              color: "#fff",
              fontSize: 14,
              show: true
            },
            symbolSize: function(val) {
              // 关键处，当气泡点需要跳转效果且与当前定位相匹配时候，将气泡设置的更大
              if (val[2] === 0 && val[3] === _this.currentIndex) {
                return 16;
              }
              return 10;
            },
            data: points
          }
        ]
   }
    // 绘制图表
      myChart.setOption(option);
	//监听时间轴切换事件  借助此方式进行不达标动态展示效果
	      myChart.off("timelinechanged");
	      myChart.on("timelinechanged", params => {
	        console.log("时间轴-- ", params);
	        if (currentIndex < notAchieveNum - 1) {
	          currentIndex++;
	        } else {
	          currentIndex = 0;
	        }
      });

--------------------------分割线------------------------
//在绘制图表后调用此方法可实现间隔展示对应点的toolTip
autohover(myChart, notAchieveNum) {
      let timeTicket = null;
      let _this = this;
      timeTicket && clearInterval(timeTicket);
      timeTicket = setInterval(function() {
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 1,
          dataIndex: _this.currentIndex
        });
        if (_this.currentIndex < notAchieveNum - 1) {
          _this.currentIndex++;
        } else {
          _this.currentIndex = 0;
        }
      }, 2000);
    }

效果

最后效果就是几个需要轮播的红点循环放大

参考文章：
https://www.makeapie.com/editor.html?c=x0-uCepnPl
https://blog.csdn.net/weixin_43927699/article/details/108255873