Two animations in the same graphic (ECHARTS)

  const mychartspider1 = echarts.init(document.getElementById('gaugespiderinc1'));
  const maxValue = 100;
  const numPointers = 4; // Number of pointers
  let randomValuesInterval;
  let randomColorsInterval;
  let centerAnimationInterval;

  function getRandomValue(min, max) {
    return Math.random() * (max - min) + min;
  }

  function setRandomValues() {
    let data = [];

    for (let i = 0; i < numPointers; i++) {
      data.push({
        value: getRandomValue(0, maxValue)
      });
    }

    updateGaugeSpider(data);
  }

  function updateGaugeSpider(data) {
    option = {
      series: [{
          type: 'gauge',
          min: 0,
          max: 100,
          splitNumber: 10,
          radius: '75%',
          center: ['50%', '150%'],
          axisLine: {
            lineStyle: {
              color: [
                [1, '#49a6de']
              ],
              width: 3.5
            }
          },
          splitLine: {
            distance: -28,
            length: 28,
            lineStyle: {
              width: 5,
              color: '#49a6de'
            }
          },
          axisTick: {
            distance: -12,
            length: 10,
            lineStyle: {
              width: 2,
              color: '#49a6de'
            }
          },
          axisLabel: {
            distance: -64,
            color: '#49a6de',
            fontSize: 36,
            fontFamily: 'D-DIN',
            textStyle: {
              textBorderWidth: 1,
              textBorderColor: '#020202'
            }
          },
          anchor: {
            show: true,
            size: 25,
            itemStyle: {
              borderColor: "#020202",
              borderWidth: 2
            }
          },
          pointer: {
            offsetCenter: [0, "10%"],
            icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
            length: "115%",
            itemStyle: {
              borderWidth: 1,
              borderColor: "#020202",
              shadowOffsetX: 4,
              shadowOffsetY: 4,
              shadowColor: "#020202",
              shadowBlur: 10,
            }
          },
          detail: {
            valueAnimation: true,
            borderWidth: 3,
            borderColor: '#858383',
            borderRadius: 5,
            color: '#020202',
            fontWeight: 'bold',
            width: 23,
            height: 18,
            fontSize: 20,
            fontFamily: 'DS-Digital',
            formatter: function(value) {
              return value.toFixed(0) + '%';
            }
          },
          data: data.map((item, index) => {
            const colors = ['#dd4b39', 'orange', 'lime', 'cyan'];
            const titleName = ['Name 1', 'Name 2', 'Name 3', 'Name 4'];
            const offsetName = [
              ['-45%', '70%'],
              ['-15%', '70%'],
              ['15%', '70%'],
              ['45%', '70%']
            ];
            const offsetDetail = [
              ['-45%', '84%'],
              ['-15%', '84%'],
              ['15%', '84%'],
              ['45%', '84%']
            ];
            return {
              value: item.value,
              itemStyle: {
                color: colors[index % colors.length]
              },
              name: titleName[index % titleName.length],
              title: {
                offsetCenter: offsetName[index % offsetName.length],
                color: colors[index % colors.length]
              },
              detail: {
                backgroundColor: colors[index % colors.length],
                offsetCenter: offsetDetail[index % offsetDetail.length]
              }
            };
          })
        },
        {
          type: 'gauge',
          min: 0,
          max: 60,
          splitNumber: 6,
          radius: '70%',
          center: ['50%', '150%'],
          axisLine: {
            lineStyle: {
              color: [
                [1, '#fee200']
              ],
              width: 3.5
            }
          },
          splitLine: {
            distance: 10,
            length: 28,
            lineStyle: {
              width: 5,
              color: '#fee200'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            distance: 10,
            fontSize: 33,
            color: '#fee200',
            fontFamily: 'D-DIN',
            textStyle: {
              textBorderWidth: 1,
              textBorderColor: '#020202'
            }
          },
          pointer: {
            show: false
          },
          title: {
            show: false
          },
          anchor: {
            show: true,
            size: 14,
            itemStyle: {
              color: "#f00",
              borderColor: "#020202",
              borderWidth: 1
            }
          }
        }
      ]
    };

    mychartspider1.setOption(option);
  }

  let colorIndex = 0; // Variável para controlar o índice da cor a ser aplicada

  function setNextColor() {
    const colors = ['#f00', '#49a6de'];
    const color = colors[colorIndex]; // Seleciona a cor atual com base no índice
    colorIndex = (colorIndex + 1) % colors.length; // Atualiza o índice para a próxima cor
    return color;
  }

  function setRandomColors() {
    const color = setNextColor(); // Obtém a próxima cor sequencialmente
    mychartspider1.setOption({
      series: [{
        axisLabel: {
          color: color,
        },
        axisLine: {
          lineStyle: {
            color: [
              [1, color]
            ],
          }
        },
        splitLine: {
          lineStyle: {
            color: color
          }
        },
        axisTick: {
          lineStyle: {
            color: color
          }
        }
      }]
    });
  }

  // Button click event
  $('#startgaugeeffectbtnanimation1').one('click', function() {
    // Configure random values and colors initially
    setRandomValues();
    setRandomColors();

    // Update random values and colors every 500 milliseconds for 5 seconds
    randomValuesInterval = setInterval(setRandomValues, 500);
    randomColorsInterval = setInterval(setRandomColors, 500);

    setTimeout(() => {
      // Stop updating after 5 seconds
      clearInterval(randomValuesInterval);
      clearInterval(randomColorsInterval);

      // Restore input values
      let value1 = Number($('#number1').val());
      let value2 = Number($('#number2').val());
      let value3 = Number($('#number3').val());
      let value4 = Number($('#number4').val());
      updateGaugeSpiderFromInputs(value1, value2, value3, value4);
    }, 5000);
  });

  function updateGaugeSpiderFromInputs(value1, value2, value3, value4) {
    value1 = Number($('#number1').val());
    value2 = Number($('#number2').val());
    value3 = Number($('#number3').val());
    value4 = Number($('#number4').val());

    // Verifique se o intervalo está definido e, se sim, pare a animação
    if (randomValuesInterval) {
      clearInterval(randomValuesInterval);
      clearInterval(randomColorsInterval);
    }

    // Defina as cores finais diretamente
    updateGaugeSpider([{
        value: value1
      },
      {
        value: value2
      },
      {
        value: value3
      },
      {
        value: value4
      }
    ]);
  }

  // Input change event
  $('#number1, #number2, #number3, #number4').on('change', function() {
    updateGaugeSpiderFromInputs();
  });

  updateGaugeSpiderFromInputs();

  // animation center downUp
  // Função para iniciar a animação do centro do gauge para '50%'
  function startCenterAnimation() {
    let centerPosition = 150; // Inicializa a posição central
    let startTime; // Armazena o horário de início da animação

    function animateCenterChange(timestamp) {
      const duration = 5000; // Duração da animação em milissegundos
      const startValue = centerPosition; // Valor inicial da posição central
      const endValue = 50; // Valor final da posição central
      const progress = (timestamp - startTime) / duration; // Progresso da animação

      // Calcula o próximo valor da posição central com base no progresso
      const nextValue = startValue + (endValue - startValue) * progress;

      // Define o centro do gráfico com base no próximo valor
      mychartspider1.setOption({
        series: [{
            center: ['50%', nextValue + '%']
          },
          {
            center: ['50%', nextValue + '%']
          }
        ]
      });

      // Continua a animação se ainda não atingiu o fim
      if (progress < 1) {
        requestAnimationFrame(animateCenterChange);
      }
    }

    function handleClick() {
      startTime = performance.now(); // Obtém o horário de início da animação
      requestAnimationFrame(animateCenterChange); // Inicia a animação
    }

    document.getElementById('startgaugeeffectbtnanimation1').addEventListener('click', handleClick, {
      once: true
    });
  }

  // Inicializa a animação do centro do gauge quando o botão for clicado
  startCenterAnimation();

#gaugespiderinc1 {
  height: 500px;
  width: 500px;
}

body {
  background: #333;
}

<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<input type="range" id="number1" min="0" max="100" value="25">
<input type="range" id="number2" min="0" max="100" value="50">
<input type="range" id="number3" min="0" max="100" value="75">
<input type="range" id="number4" min="0" max="100" value="100">

<div id='gaugespiderinc1'></div>

<button id='startgaugeeffectbtnanimation1'>
  Click me
</button>