The drilldown is not working after the first animation

I’ve created a drilldown chart to transact the graphs. The first configuration (from pie chart to bar chart) works. But from then on I couldn’t configure the gaugeOn function to make it work.

Code:

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
</head>

<div class="chart"></div>

<style>
  .chart {
    width: 400px;
    height: 430px;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const chartUse = echarts.init(document.getElementsByClassName("chart")[0])

    function chartSystem() {
      return {
        source: {
          first: [
            ["x", "y", "childs"],
            ["Cars", 49, "cars"],
            ["Bikes", 65, "bikes"],
            ["Engines", 23, "eng"],
          ],
        },
        drill: {
          bar: [
            ["x", "y", "groups", "childs"],
            ["Mazda", 100, "cars", "bra"],
            ["Mass.", 120, "cars", "bra"],
            ["Accura", 150, "cars", "bra"],
            ["Kaw.", 20, "bikes", "arg"],
            ["Honda", 50, "bikes", "arg"],
            ["Yamaha", 80, "bikes", "arg"],
            ["V8", 60, "eng", "ned"],
            ["V10", 120, "eng", "ned"],
            ["V12", 20, "eng", "ned"],
          ],
          gauge: [
            ["name", "value", "groups"],
            ["Joao", 100, "bra"],
            ["Maria", 120, "bra"],
            ["Carlos", 20, "arg"],
            ["Bruna", 50, "arg"],
            ["Fabricio", 120, "ned"],
            ["Giovana", 20, "ned"],
          ],
        },
      }
    }

    let pullDataset = []
    let pullData = []
    let pullDrillBar = []
    let pullDrillGauge = []

    function chartSend() {
      const dfInit = chartSystem()
      const sourceIndex = dfInit.source
      const drillName = dfInit.drill

      pullDataset = [
        {
          source: sourceIndex.first, // Acessa "first"
          sourceHeader: true,
        },
      ]

      // Todos os dados de drill
      pullDrillBar = drillName.bar

      pullDrillGauge = drillName.gauge
    }

    chartSend()

    function chartFrameSwitch0() {
      const series0 = {
        type: "pie",
        color: ["#008cba", "#ff7400", "#00ff00"],
        radius: ["80%", "60%"],
        padAngle: 4,
        animationDurationUpdate: 1000,
        universalTransition: {
          enabled: true,
          divideShape: "split",
        },
        itemStyle: {
          borderRadius: 10,
          borderWidth: 1,
          borderColor: "#242832",
        },
        datasetIndex: 0,
        encode: {
          itemName: 0,
          value: 1,
          itemChildGroupId: 2,
        },
      }

      const option = {
        dataset: [pullDataset[0]],
        series: [series0],
      }

      // Define o gráfico inicial
      chartUse.setOption(option, { notMerge: true })
    }

    chartFrameSwitch0()

    // Evento de clique no gráfico de pizza
    function barOn() {
      chartUse.on("click", (params) => {
        if (params.seriesType === "pie") {
          const filtered = pullDrillBar.filter((row) => {
            return row[2] === params.data[2]
          })

          if (filtered.length) {
            const preparedData = [...filtered]
            drillCarrierBar(preparedData) // Gera o gráfico com o cabeçalho incluído
          }
        }
      })
    }

    barOn()

    // Evento de clique no gráfico de gauge
    function gaugeOn() {
      chartUse.on("click", (params) => {
        if (params.seriesType === "gauge") {
        
          const filtered = pullDrillGauge.filter((row) => {
            return row[2] === params.data[2]
          })

          if (filtered.length) {
            const prepared = filtered.slice(1).map((row) => ({
              name: row[0],
              value: row[1],
              groupId: row[2],
            }))
            drillCarrierGauge(prepared)
          }
        }
      })
    }

    gaugeOn()

    function drillCarrierGauge(data) {
      const series0 = {
        type: "gauge",
        data: [...data],
        universalTransition: {
          enabled: true,
          divideShape: "split",
        },
      }

      const option = {
        series: [series0],
      }

      chartUse.setOption(option, { notMerge: true })
    }

    function drillCarrierBar(data) {
      const xAxis0 = {
        type: "category",
        axisLabel: {
          color: "#000",
          fontSize: 14,
        },
      }
      const yAxis0 = {
        type: "value",
      }

      const series0 = {
        type: "bar",
        datasetIndex: 0,
        encode: {
          x: 0,
          y: 1,
          itemGroupId: 2,
          itemChildGroupId: 3,
        },
        color: ["#008cba", "#ff7400", "#00ff00"],
        animationDurationUpdate: 1000,
        universalTransition: {
          enabled: true,
          divideShape: "split",
        },
      }

      const option = {
        dataset: [
          {
            source: [...data],
            sourceHeader: false,
          },
        ],
        xAxis: [xAxis0],
        yAxis: [yAxis0],
        series: [series0],
      }

      // Atualiza o gráfico com as barras
      chartUse.setOption(option, { notMerge: true })
    }
  })
</script>

I just need to adjust the structure below to make it work when there is no dataset resource, as is the case with type: 'gauge'.

    function gaugeOn() {
      chartUse.on("click", (params) => {
        if (params.seriesType === "gauge") {
        
          const filtered = pullDrillGauge.filter((row) => {
            return row[2] === params.data[2]
          })

          if (filtered.length) {
            const prepared = filtered.slice(1).map((row) => ({
              name: row[0],
              value: row[1],
              groupId: row[2],
            }))
            drillCarrierGauge(prepared)
          }
        }
      })
    }