ECharts中使用getZr.on()绑定mouseout/globalout事件无法恢复仪表盘轴线默认颜色的问题求助

大家好，我现在遇到一个ECharts的问题，想请各位帮忙看看。

我写了一段代码，希望在鼠标移出折线图（seriesIndex === 0）的时候，把仪表盘的轴线颜色从红色（#f00）恢复回默认的深灰色（#333），但目前这段代码完全不起作用，鼠标移开后颜色还是红色。

我原本的实现思路是用chartUse.getZr().on('mouseout')来监听鼠标移出事件，触发时重新设置option把轴线颜色改回去，代码如下：

chartUse.getZr().on('mouseout', params => {
    if (params.seriesIndex === 0) {
        chartUse.setOption({
            series: [
                {},
                {
                    axisLine: {
                        lineStyle: {
                            color: [[1, '#333']]
                        }
                    }
                }
            ]
        })
    }
});

我还尝试过用globalout事件，结果也一样没效果：

chartUse.getZr().on('globalout', params => {
    if (params.seriesIndex === 0) {
        chartUse.setOption({
            series: [
                {},
                {
                    axisLine: {
                        lineStyle: {
                            color: [[1, '#333']]
                        }
                    }
                }
            ]
        })
    }
});

简单说下场景：当鼠标移动到折线图区域时，我会把仪表盘的轴线改成红色，同时更新仪表盘数据；但鼠标移开后，轴线颜色无法回到#333。

下面是我的完整代码，包含HTML和JS部分：

HTML代码 #

<head>
    <script src='https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js'></script>
</head>
<div class='chart' style='width: 100%; height: 100vh;'></div>

JavaScript代码 #

document.addEventListener("DOMContentLoaded", () => {
    const chartSystem = () => {
        return {
            "source": {
                "bar": [
                    ["x", "y", "groups"],
                    ["Jan", 20, "group1"],
                    ["Feb", 36, "group1"],
                    ["Mar", 55, "group1"],
                    ["Apr", 24, "group2"],
                    ["May", 81, "group2"],
                    ["Jun", 61, "group2"]
                ],
                "gauge": [
                    ["name", "value", "groups"],
                    ["Pressure", 30, "group1"],
                    ["Temperature", 66, "group2"]
                ]
            }
        }
    }

    const pullDataset = [];
    const pullData = [];

    const chartSend = () => {
        const { source } = chartSystem();
        pullDataset.push(...Object.values(source).slice(0, 1).map(item => ({
            source: item,
            sourceHeader: true
        })));
        pullData.push(...Object.values(source).slice(1).map(item => ({
            data: item.slice(1).map( ([name, value, groups]) => ({
                name, 
                value,
                groupId: groups,
                detail: {
                    backgroundColor: '#bcd090'
                }
            }))
        })));
    }

    chartSend();

    const chartUse = echarts.init(document.getElementsByClassName('chart')[0]);

    function chartFrameSwitch0 () {
        const tooltip0 = { show: true };
        const grid0 = [{ width: '40%', height: '35%', left: '5%' }];
        const xAxis0 = [{
            type: 'category',
            gridIndex: 0,
            name: 'months',
            nameTextStyle: { color: '#000' }
        }];
        const yAxis0 = [{ type: 'value', gridIndex: 0 }];
        const series0 = [
            {
                type: 'line',
                datasetIndex: 0,
                encode: { x: 0, y: 1, itemGroupId: 2 }
            },
            {
                type: 'gauge',
                center: ['75%', '50%'],
                min: 0,
                max: 100,
                axisLine: {
                    lineStyle: { width: 3, color: [[1, '#333']] }
                },
                data: pullData[0].data
            }
        ];
        const option = {
            dataset: [pullDataset[0]],
            tooltip: tooltip0,
            grid: grid0,
            xAxis: xAxis0,
            yAxis: yAxis0,
            series: series0
        };
        chartUse.setOption(option);
    }

    chartFrameSwitch0();
    
    // 鼠标移动事件，触发仪表盘变色和数据更新
    chartUse.getZr().on("mousemove", params => {
        const pixelCoords = [params.offsetX, params.offsetY];
        const isOverAxisChart = chartUse.containPixel({ gridIndex: 0 }, pixelCoords);
        
        if (isOverAxisChart) {
            const usePixel = chartUse.convertFromPixel({ gridIndex: 0 }, pixelCoords);
            chartUse.setOption({
                series: [
                    {}, 
                    {
                        axisLine: { lineStyle: { color: [[1, '#f00']] } },
                        detail: {
                            backgroundColor: '#bcd090',
                            formatter: value => value.toFixed(1)
                        },
                        data: [
                            { value: usePixel[0], detail: { offsetCenter: ['-20%', '70%'] } }, 
                            { value: usePixel[1], detail: { offsetCenter: ['20%', '70%'] } }
                        ]
                    }
                ]
            });
            chartUse.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: 1 });
        }
    });

    // 无效的mouseout事件
    chartUse.getZr().on('mouseout', params => {
        if (params.seriesIndex === 0) {
            chartUse.setOption({
                series: [
                    {},
                    {
                        axisLine: { lineStyle: { color: [[1, '#333']] } }
                    }
                ]
            })
        }
    });
});

有没有朋友能帮我看看问题出在哪？为什么mouseout/globalout事件无法触发颜色恢复的操作呢？

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