ECharts钻取功能首次动画后无法继续触发问题求助

我做了一个支持钻取切换的ECharts图表，从饼图切换到柱状图这一步是正常工作的，但之后就没法让gaugeOn函数正常触发了，没法继续切换到仪表盘图表。

完整代码： #

<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 === "bar") {
          // Remove o cabeçalho ao filtrar os dados
          const filtered = pullDrillGauge.filter((row) => {
            return row[2] === params.data[2]
          })

          if (filtered.length) {
            // Prepara os dados para o gráfico gauge
            const prepared = filtered.map((row) => ({
              name: row[0],
              value: row[1],
              groupId: row[2],
            }))

            // Atualiza o gráfico de gauge
            drillCarrierGauge(prepared)

            // Exibe os dados no console para depuração
            console.log(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>

我觉得问题出在后续的点击事件上，gaugeOn里的console.log(prepared)根本没输出，点击柱状图完全没触发响应。

我还试过把barOn和gaugeOn合并到同一个drillChanges函数里，但还是不行，代码如下：

// drillChanges function
function drillChanges() {
  chartUse.on("click", params => {
  
    if (params.seriesType === "pie") {
    
      const filtered = pullDrillBar.filter(row => {
        return row[2] === params.data[2]
      })
      
      if (filtered.length) {
        drillCarrierBar(filtered)
      }
      
    } else if (params.seriesType === "bar") {
    
      const filtered = pullDrillGauge.filter(row => {
        return row[2] === params.data[2]
      }
    )
    
    if (filtered.length) {
        const prepared = filtered.map(row => ({
          name: row[0],
          value: row[1],
          groupId: row[2],
        }))
        drillCarrierGauge(prepared)
      }
      
    }
    
  })
}

drillChanges();

备注：内容来源于stack exchange，提问作者neves