Javascript 使用带时间轴的ECharts visualMap

我正在使用Echarts，我想用不同的范围为我的系列（趋势，而不是背景）上色。这几乎就是我所需要的：

但有两个修改：

• 我有一个“时间”轴而不是“类别”轴
• 对于未在visualMap中指定的系列范围，我希望它们保持其原始的、随机生成的颜色

我只是修改了上一个示例中的代码来尝试这样做，但运气不好：

var values = [];

for(var i = 0; i < 15; i++) {
    var date = new Date();
    date.setDate(date.getDate() + i);
    values.push([date, i])
}

const firstDate = values[1][0];
const lastDate = values[5][0];

option = {
    xAxis: {
        type: 'time',
        boundaryGap: false,
    },
    yAxis: {
        type: 'value',
    },
    visualMap: {
        pieces: [{
            gt: firstDate,
            lte: lastDate,
            color: 'green'
        }]
    },

    series: [
        {
            type: 'line',
            data: values, 
        }
    ]
};

var值=[]；
对于（变量i=0；i<15；i++）{
变量日期=新日期（）；
date.setDate（date.getDate（）+i）；
值。推送（[日期，i]）
}
const firstDate=值[1][0]；
const lastDate=值[5][0]；
选项={
xAxis：{
键入：“时间”，
边界间隙：false，
},
亚克斯：{
类型：“值”，
},
可视化地图：{
作品：[{
gt:firstDate，
lte:lastDate，
颜色：“绿色”
}]
},
系列：[
{
键入：“行”，
数据：价值观，
}
]
};

我只会遇到如下错误：

• 未捕获的DomeException:未能对“CanvasGradient”执行“addColorStop”：无法将提供的值（“未定义”）解析为颜色
• t、 indexOf不是py的函数（echarts.min.js:formatted:15975）

---

我在visualMap文档中没有看到任何与时间轴相关的信息。。。。有什么想法吗？

提供虚拟数据以供使用。请参阅。@Marcourelio Fernandezreyes我相信我添加的代码只是一个简单的示例，因为它生成了一个日期数组作为伪数据，并且非常简单。要运行它，只需转到并粘贴它。请改用JSFIDLE，或者使用堆栈溢出中的代码片段创建[mvce]——在该页面中粘贴代码会显示您提到的错误。这可能是使用该API配置图表所需的其他内容。我想知道为什么他们没有一个样本…似乎echarts需要更多的设置（并且这些设置必须在特定的顺序中）才能正常工作。关于我在JSFIDLE中使用echarts时遇到的一个错误，请看这篇文章。我将与您分享我在代码中犯下的错误，在尝试了一段时间后，您必须检查文档，在Google上搜索工作示例，然后重试。此API图表需要更多设置，但我不太清楚错误详细信息，无法继续。我希望这个样本能给你一些有用的东西。祝你好运