echarts 折线图坐标轴类型为time，如何用visualMap中的pieces来分段？

Question

echarts 折线图，X坐标轴类型为time，想用visualMap来分段显示折线，但是用visualMap中的pieces来分段时遇到问题，用lt或gt来分段不知道如何赋值。
如下配置错误，请问该如何配置。
option = {

xAxis: {
    type: 'time',
},
yAxis: {
    type: 'value',
},
visualMap: {
    show: false,
    type: 'piecewise',
    dimension: 0,
    pieces: [{
        lte: '2021-6-8T4:00:00',
        color: 'green'
    },
    {
        gt: '2021-6-8T4:00:00',
        lte: '2021-6-8T8:00:00',
        color: 'red'
    }]
},
series: [{
    data: [['2021-6-8T2:00:00', 150], ['2021-6-8T4:00:00', 200], ['2021-6-8T6:00:00', 100], ['2021-6-8T8:00:00', 150]],
    type: 'line'
}]

};

Answer 1

你好！我根据 echarts 官方提供的 demo 改写了一下你的 code：

var option = {
            xAxis: {
                type: 'category',
            },
            yAxis: {
                type: 'value',
            },
            visualMap: {
                show: false,
                type: 'piecewise',
                dimension: 0,
                pieces: [{
                        gt: 1,
                        lt: 3,
                        color: 'green'
                    },
                    {
                        gt: 5,
                        lt: 7,
                        color: 'red'
                    }
                ]
            },
            series: [{
                lineStyle: {
                    color: 'yellow',
                    width: 5
                },
                areaStyle: {},
                data: [
                    ['2021-6-8T2:00:00', 150],
                    ['2021-6-8T4:00:00', 200],
                    ['2021-6-8T6:00:00', 100],
                    ['2021-6-8T8:00:00', 150],
                    ['2021-6-8T10:00:00', 350],
                    ['2021-6-8T12:00:00', 150],
                    ['2021-6-8T14:00:00', 300],
                    ['2021-6-8T16:00:00', 450],
                    ['2021-6-8T18:00:00', 400]
                ],
                type: 'line'
            }]
        }

大概是这个效果，不知道是否满足你的预期：

Answer 2

我也是x轴为time轴并且转换成了毫秒，但设施visiualMap时失效，只显示一种颜色，但图例是有颜色的，能看下你的代码吗!这是我的，x轴的显示我是格式化过的

这是visiualMap