如何通过单个ECharts实例结合Timeline实现多图表展示

使用ECharts的timeline组件，要求仅通过单个ECharts实例（仅调用一次echarts.init）在页面中同时展示：

• 随timeline切换的动态图表（如柱状图）
• 与timeline独立的固定图表（如仪表盘）
  但当前配置无法实现固定仪表盘的需求，现有代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Gráfico com Timeline e Gauge</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        #chart {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>

<div id="chart"></div>

<script>
    const chartUse = echarts.init(document.getElementById('chart'));

    window.addEventListener("resize", () => {
        chartUse.resize();
    });

    const option = {
        baseOption: {
            timeline: {
                axisType: 'category',
                autoPlay: true,
                playInterval: 2000,
                rewind: false,
                data: ['Jan', 'Fev', 'Mar']
            },
            grid: {
                width: "40%",
                height: "50%",
                left: "5%"
            },
            xAxis: {
                type: "category",
                data: ["Jan", "Fev", "Mar"],
                gridIndex: 0
            },
            yAxis: {
                type: "value",
                gridIndex: 0
            },
            series: [
                {
                    // Gauge fixo, sempre visível
                    type: "gauge",
                    center: ['75%', '50%'], // Posiciona o gauge à direita
                    radius: '30%',
                    detail: { formatter: '{value}%' },
                    data: [{ value: 50, name: 'Progress' }]
                }
            ]
        },
        options: [
            // Opção 1: Gráfico de barras para janeiro
            {
                series: [
                    {
                        type: "bar",
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        data: [10, 20, 30]
                    }
                ]
            },
            // Opção 2: Gráfico de barras para fevereiro
            {
                series: [
                    {
                        type: "bar",
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        data: [15, 25, 35]
                    }
                ]
            },
            // Opção 3: Gráfico de barras para março
            {
                series: [
                    {
                        type: "bar",
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        data: [20, 30, 40]
                    }
                ]
            }
        ]
    };

    chartUse.setOption(option);
</script>

</body>
</html>

核心问题是timeline切换时，options中的series会完全覆盖baseOption的series，导致固定的仪表盘被动态柱状图替换。需要通过ECharts的series.timeline属性区分固定系列和动态系列，同时合理配置布局：

1. 标记固定系列：给baseOption中需要固定的gauge系列添加timeline: false，明确该系列不随timeline切换
2. 分离动态系列配置：在baseOption中定义动态bar系列的基础属性（类型、坐标轴关联等），options中仅通过series的index对应修改data，避免覆盖整个series数组
3. 优化布局：将grid配置改为数组，给柱状图分配独立的网格区域，避免和仪表盘布局冲突

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Gráfico com Timeline e Gauge</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        #chart {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>

<div id="chart"></div>

<script>
    const chartUse = echarts.init(document.getElementById('chart'));

    window.addEventListener("resize", () => {
        chartUse.resize();
    });

    const option = {
        baseOption: {
            timeline: {
                axisType: 'category',
                autoPlay: true,
                playInterval: 2000,
                rewind: false,
                data: ['Jan', 'Fev', 'Mar']
            },
            // 配置多个grid，第一个给柱状图，仪表盘不需要grid
            grid: [
                {
                    width: "40%",
                    height: "50%",
                    left: "5%",
                    top: "20%"
                }
            ],
            xAxis: {
                type: "category",
                data: ["Jan", "Fev", "Mar"],
                gridIndex: 0
            },
            yAxis: {
                type: "value",
                gridIndex: 0
            },
            series: [
                {
                    // 固定仪表盘：添加timeline: false标记不随时间轴切换
                    type: "gauge",
                    timeline: false,
                    center: ['75%', '50%'],
                    radius: '30%',
                    detail: { formatter: '{value}%' },
                    data: [{ value: 50, name: 'Progress' }]
                },
                {
                    // 动态柱状图的基础配置
                    type: "bar",
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    data: [] // 初始数据留空，由options填充
                }
            ]
        },
        options: [
            // 仅修改index为1的series（柱状图）的data
            { series: [{ index: 1, data: [10, 20, 30] }] },
            { series: [{ index: 1, data: [15, 25, 35] }] },
            { series: [{ index: 1, data: [20, 30, 40] }] }
        ]
    };

    chartUse.setOption(option);
</script>

</body>
</html>

内容的提问来源于stack exchange，提问作者neves