当x轴为时间轴时，visualMap展示的颜色不对

[bnuzhengshan]

Version

5.1.2

Steps to reproduce

x轴设为时间轴，visualMap设置pieces和outOfRange，series的data的值都在pieces的范围之外，线条颜色显示不正确

What is expected?

线条显示灰色

What is actually happening?

线条显示红色

{
        title: {
            text: 'Beijing AQI',
            left: '1%'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '5%',
            right: '15%',
            bottom: '10%'
        },
        xAxis: {
            "type": "time",
            "boundaryGap": true,
        },
        yAxis: {},
        toolbox: {
            right: 10,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [{
            startValue: '2014-06-01'
        }, {
            type: 'inside'
        }],
        visualMap: {
            top: 50,
            right: 10,
            pieces: [
              {
                "gte": 300,
                "lt": 400,
                "color": "#FF2E00"
              },
              {
                "gte": 400,
                "color": "#D00000"
              }
            ],
            outOfRange: {
                color: '#999'
            }
        },
        series: {
            name: 'Beijing AQI',
            type: 'line',
            data: [
        {
          "name": "474eb6f5",
          "value": [
            1626943980000,
            128
          ]
        },
        {
          "name": "474eb6f5",
          "value": [
            1626944040000,
            186
          ]
        },
        {
          "name": "474eb6f5",
          "value": [
            1626944100000,
            262
          ]
        },
        {
          "name": "474eb6f5",
          "value": [
            1626944160000,
            231
          ]
        },
        {
          "name": "474eb6f5",
          "value": [
            1626944220000,
            65
          ]
        },
        {
          "name": "474eb6f5",
          "value": [
            1626944280000,
            227
          ]
        },
        {
          "name": "474eb6f5",
          "value": [
            1626944340000,
            31
          ]
        },
        {
          "name": "474eb6f5",
          "value": [
            1626944400000,
            241
          ]
        },
        {
          "name": "474eb6f5",
          "value": [
            1626944460000,
            103
          ]
        },
        {
          "name": "474eb6f5",
          "value": [
            1626944520000,
            172
          ]
        },
        {
          "name": "474eb6f5",
          "value": [
            1626944580000,
            241
          ]
        },
        {
          "name": "474eb6f5",
          "value": [
            1626944640000,
            222
          ]
        }],
        }
    }

[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 it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

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 question.

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

Have a nice day! 🍵

[echarts-bot]

@bnuzhengshan It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

When the x-axis is the time axis, the color displayed by visualMap is incorrect

BODY

Version

5.1.2

Steps to reproduce

The x-axis is set as the time axis, visualMap sets pieces and outOfRange, the data value of the series is outside the range of pieces, and the line color is not displayed correctly

What is expected?

The line is gray

What is actually happening?

The line is red

---

{
title: {
text:'Beijing AQI',
left: '1%'
},
tooltip: {
trigger:'axis'
},
grid: {
left: '5%',
right: '15%',
bottom: '10%'
},
xAxis: {
"type": "time",
"boundaryGap": true,
},
yAxis: {},
toolbox: {
right: 10,
feature: {
dataZoom: {
yAxisIndex:'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [{
startValue: '2014-06-01'
}, {
type:'inside'
}],
visualMap: {
top: 50,
right: 10,
pieces: [
{
"gte": 300,
"lt": 400,
"color": "#FF2E00"
},
{
"gte": 400,
"color": "#D00000"
}
],
outOfRange: {
color:'#999'
}
},
series: {
name:'Beijing AQI',
type:'line',
data: [
{
"name": "474eb6f5",
"value": [
1626943980000,
128
]
},
{
"name": "474eb6f5",
"value": [
1626944040000,
186
]
},
{
"name": "474eb6f5",
"value": [
1626944100000,
262
]
},
{
"name": "474eb6f5",
"value": [
1626944160000,
231
]
},
{
"name": "474eb6f5",
"value": [
1626944220000,
65
]
},
{
"name": "474eb6f5",
"value": [
1626944280000,
227
]
},
{
"name": "474eb6f5",
"value": [
1626944340000,
31
]
},
{
"name": "474eb6f5",
"value": [
1626944400000,
241
]
},
{
"name": "474eb6f5",
"value": [
1626944460000,
103
]
},
{
"name": "474eb6f5",
"value": [
1626944520000,
172
]
},
{
"name": "474eb6f5",
"value": [
1626944580000,
241
]
},
{
"name": "474eb6f5",
"value": [
1626944640000,
222
]
}],
}
}

[bnuzhengshan]

使用4.x版本的echarts并不会有这个问题，这个问题是升级5.1.2之后出现的

[susiwen8]

Little workaround for now

                visualMap: {
                    top: 50,
                        right: 10,
                            pieces: [
                                {
                                    "gte": 300,
                                    "lt": 400,
                                    "color": "yellow"
                                },
                                {
                                    "gte": 400,
                                    "lt": 500, // add lt
                                    "color": "green"
                                }
                            ],
                                outOfRange: {
                        color: '#999'
                    }
                },

Or downgrade to 5.1.1

[susiwen8]

Relate to #14602

echarts/src/chart/line/LineView.ts

Line 246 in cf7c4ef

coord: axis.toGlobalCoord(axis.dataToCoord(stop.value, true)),

[susiwen8]

@plainheart Could you take a look on this?