visualMap on time series incorrect line color

[souperk]

Version

4.7.0

Steps to reproduce

option = {
    xAxis: { type: 'time' },
    yAxis: { type: 'value' },
    visualMap: {
        type: 'piecewise',
        show: false,
        dimension: 0,
        max:   new Date('2020-04-01T01:00'),
        inRange: { color: "blue" },
        outOfRange: { color: "red" }
    },
    tooltip:{ trigger: "axis" },
    series: [{
        type: 'line',
        data: [
            ['2020-04-01T00:00', 200],
            ['2020-04-01T01:00', 400],
            ['2020-04-01T02:00', 650],
            ['2020-04-01T03:00', 500]
        ]
    }]
};

What is expected?

Line and points before 2020-04-01 01:00 to be colored blue. Line and points after 2020-04-01 01:00 to be colored red.

What is actually happening?

Points before 2020-04-01 01:00 are colored blue (correct) but line is colored red (wrong). Points and lines after 2020-04-01 01:00 are colored red (correct).

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[echarts-bot]

@souperk Please provide a demo for the issue either with https://jsfiddle.net/ovilia/n6xc4df3/ or https://gallery.echartsjs.com/editor.html.

[souperk]

https://gallery.echartsjs.com/editor.html?c=xx0mG_wXBJ&v=1

[100pah]

This option works.

option = {
    xAxis: { type: 'time' },
    yAxis: { type: 'value' },
    visualMap: {
        type: 'piecewise',
        show: false,
        dimension: 0,
        pieces: [{
            gt: +new Date('2020-04-01T00:00'),
            lte: +new Date('2020-04-01T01:00'),
            color: 'blue'
        }, {
            gt: +new Date('2020-04-01T01:00'),
            lte: +new Date('2020-04-01T04:00'),
            color: 'red'
        }]
    },
    tooltip:{ trigger: "axis" },
    series: [{
        type: 'line',
        data: [
            ['2020-04-01T00:00', 200],
            ['2020-04-01T01:00', 400],
            ['2020-04-01T02:00', 650],
            ['2020-04-01T03:00', 500]
        ]
    }]
};

But notice each piece should both contain lt/lte and gt/gte.
(this should be enhanced)