ECharts中使用dataset组件时图例（legend）无法显示的问题求助

我现在在配置两个ECharts图表，遇到了一个头疼的问题：当直接使用series.data时图例能正常显示，但改用dataset组件（也就是通过series.datasetIndex和series.encode来关联数据）的时候，对应的图例就完全不出来了。我试了好几种方法都没解决，想请大家帮忙看看问题出在哪。

先把我的代码贴出来：

JavaScript 代码 #

document.addEventListener("DOMContentLoaded", () => {

    // sytem
    const chartSystem = () => {
        return {
            "source": {
                "first": [
                    ["name", "value"],
                    ["Pressure", 40],
                    ["Temperature", 64],
                    ["Atmosphere", 89]
                ],
                "second": [
                    ["name", "value"],
                    ["Label 1", 15],
                    ["Label 2", 68]
                ]
            }
        }
    }

    // send
    const pullDataset = [];
    const pullData = [];

    const chartSend = () => {
        const { first, second } = chartSystem().source;

        pullDataset.push({
            source: first
            // sourceHeader: true
        });

        pullData.push(
            {
                data: second.slice(1).map(([name, value]) => ({
                    name,
                    value
                }))
            }
        );
    };

    chartSend();

    // frames
    const chartUse = echarts.init(document.getElementsByClassName("chart")[0]);

    function chartFrameSwitch0 () {

        const tooltip0 = {
            show: true
        };
        
        const useDataLegend = pullDataset[0].source.slice(1).map(item => item[0]);
        console.log(useDataLegend);

        // legend
        const legend0 = [
            {
                show: true,
                data: useDataLegend,
                borderWidth: 2,
                borderColor: 'red'
            },
            {
                show: true,
                data: pullData[0].data.map(item => item.name),
                borderWidth: 2,
                borderColor: 'blue',
                left: 'center',
                top: '5%'
            }
        ];

        const grid0 = [
            {
                top: '30%',
                left: '5%',
                width: '38%',
                height:'30%'
            }
        ];

        const xAxis0 = [
            {
                gridIndex: 0,
                type: 'category'
            }
        ];

        const yAxis0 = [
            {
                gridIndex: 0,
                type: 'value'
            }
        ];

        const series0 = [
            {
                type: 'bar',
                color: ['#49a6de', '#ff7500', '#ff00ff'],
                colorBy: 'data',
                datasetIndex: 0,
                encode: {
                    x: 0,
                    y: 1
                },
                xAxisIndex: 0,
                yAxisIndex: 0
            },
            {
                type: 'pie',
                legendIndex: 0,
                center: ['70%', '50%'],
                data: pullData[0].data
            }
        ];

        const option = {
            dataset: [pullDataset[0]],
            legend: legend0, // Keep both legends in the array
            tooltip: tooltip0,
            grid: grid0,
            xAxis: xAxis0,
            yAxis: yAxis0,
            series: series0
        };

        chartUse.setOption(option);
    }

    chartFrameSwitch0();

})

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>

我尝试手动从dataset里提取名称来设置legend.data，控制台打印useDataLegend的结果是：

[
  "Pressure",
  "Temperature",
  "Atmosphere"
]

能看到数据是完全正确的，但对应的红色边框图例还是没显示出来。我也试过用series.encode来关联图例，但看起来encode并不支持设置图例相关的映射关系。

有没有朋友知道这是哪里出问题了？怎么才能让用dataset的那个系列也正常显示图例呢？

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