ECharts 置信带（线）图表默认为 0，空值

Question

我正在将 Google Chart 置信带（线）转换为 Apache Echarts，在使用空值折线图中的置信带堆叠上使用 areaStyle 时，我遇到了一个主要问题。

仅当最小/最大行中有空值时才会出现此问题。 connectNulls 似乎不会影响绘制实际线条的 areaStyle。此外，跳过 y 轴值为空的 x 轴值的选项不是一个选项，因为在某些情况下，将显示多个置信带集（如第二个屏幕截图所示）。

这里是一个简化的数据和选项：

var dataPoints = [
    {
        "date": "1988",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "1993",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "1994",
        "value": -25.06951746031746,
        "max": -4.489982345190423,
        "min": -45.6490525754445
    },
    {
        "date": "1995",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "1996",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "1997",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "1998",
        "value": -22.481579457241587,
        "max": -13.261933619688394,
        "min": -31.70122529479478
    },
    {
        "date": "1999",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "2001",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "2002",
        "value": -15.762091749175111,
        "max": -7.987435161930629,
        "min": -23.536748336419592
    },
    {
        "date": "2004",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "2005",
        "value": -15.991292690156723,
        "max": -10.553503467629257,
        "min": -21.42908191268419
    },
    {
        "date": "2006",
        "value": -15.571244626678256,
        "max": -10.249573325928019,
        "min": -20.892915927428493
    },
    {
        "date": "2008",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "2009",
        "value": -15.220561608383338,
        "max": -10.272665580901526,
        "min": -20.168457635865153
    },
    {
        "date": "2010",
        "value": -14.663968598988458,
        "max": -9.842327372229358,
        "min": -19.48560982574756
    },
    {
        "date": "2011",
        "value": -12.819286135182983,
        "max": -7.97250885239146,
        "min": -17.666063417974506
    },
    {
        "date": "2012",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "2014",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "2015",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "2016",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "2017",
        "value": -13.945108519331527,
        "max": -9.216373427532616,
        "min": -18.673843611130437
    },
    {
        "date": "2018",
        "value": null,
        "max": null,
        "min": null
    },
    {
        "date": "2019",
        "value": -13.384577319672625,
        "max": -9.017162823138271,
        "min": -17.751991816206978
    }
];

option =
    {
        grid: {
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: '#38393c',
            textStyle: {
                color: "#FFF",
            },
        },
        legend: {
            show: true,
            top: 'top',
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dataPoints.map(function (item) {
                return item.date;
            }),
        },
        yAxis: {
        },
        series: [
        {   //Max Line
            name: 'Max',
            type: 'line',
            data: dataPoints.map(function (item) {
                return item.max;
            }),
            lineStyle: {
                opacity: 1,
            },
            areaStyle: {
                color: 'transparent',
                opacity: 1,
            },
            stack: 'confidence-band',
            stackStrategy: 'all',
            symbol: 'none',
            connectNulls: true,
        },
        {   //Min Line
            name: 'Min',
            type: 'line',
            data: dataPoints.map(function (item) {
                return item.min - item.max;
            }),
            lineStyle: {
                opacity: 1,
            },
            areaStyle: {
                color: 'red',
                opacity: 0.5,
            },
            stack: 'confidence-band',
            stackStrategy: 'all',
            symbol: 'none',
            connectNulls: true,
        },
        {   //Value Line
            name: 'Mean Values',
            type: 'line',
            data: dataPoints.map(function (item) {
                return item.value;
            }),
            itemStyle: {
                color: 'teal',
            },
            showSymbol: false,
            connectNulls: true,
        },
    ],
    };

这里是带有可重现示例的 echarts 的链接

谢谢！