echarts 因为visualMap报错Cannot read properties of undefined (reading ‘coord‘)

为了画一个折线图，实现0轴之上显示红色，0轴之下显示绿色，添加了visualMap后就报错，先上我之前的代码

option = {
    title: {
        text: '分时图'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'time',
        boundaryGap: false,
        axisLabel: {
            formatter: '{HH}:{mm}'
        }
    },
    yAxis: {
        type: 'value',
        scale: true
    },
  visualMap: {
        show: true,  // 改为true以便调试时查看
         type: "piecewise",
        dimension: 1,
        seriesIndex: 0,
        pieces: [
            { gt: 0, color: '#f6416c' }, // 涨-红色
            { lte: 0, color: '#00b8a9' } // 跌-绿色
        ],
        outOfRange: {
            color: '#999' // 默认颜色
        }
    },
    series: [{
        name: '价格',
        type: 'line',
        showSymbol: false,
        data: generateChartData() // 返回包含时间和值的数组
    }]
};

function generateChartData() {
    var data = [];
    var baseTime = new Date().setHours(9,0,0,0);
    for(var i = 0; i < 240; i++) {
        data.push([
            new Date(baseTime + i*60000), // x轴时间
            Math.random() * 10 - 5        // y轴值
        ]);
    }
    return data;
}

经过各种查询这个事情其实很简单，就是visualMap的区间要有上下值，我只写了大于0显示什么颜色，小于0显示什么颜色，一定是一个区间范围的值，比如大于0 小于50。改正后的visualMap如下：

  visualMap: {
        show: true,  // 改为true以便调试时查看
         type: "piecewise",
        dimension: 1,
        seriesIndex: 0,
        pieces: [
            { gt: 0,lte: 50, color: '#f6416c' }, // 涨-红色
            { gt: -50,lte: 0, color: '#00b8a9' } // 跌-绿色
        ],
        outOfRange: {
            color: '#999' // 默认颜色
        }
    },