[Bug] visualMap实现折线颜色渐变渲染问题

[luolongsen]

Version

5.2.2

Link to Minimal Reproduction

No response

Steps to Reproduce

折线图通过设置配置visualMap属性配置阈值颜色变化，但当有两个连续的拐点值，比如下文12值的两个点，会出现一条平行线，有两种颜色
visualMap: {
show: true,
type:'piecewise',
top: '13%',
right: '2%',
orient: 'horizontal',
pieces: [
{ gt: -4, lte: 0, color: '#7088ff' },
{ gt: 0, lte: 4, color: '#75cfff' },
{ gt: 4, lte: 8, color: '#ffc619' },
{ gt: 8, lt: 12, color: '#ff8766' },
{ gt: 12, lte: 16, color: '#483D8B' }
],
outOfRange: { color: '#999' }
},

Current Behavior

折线图通过设置配置visualMap属性配置阈值颜色变化，但当有两个连续的拐点值，比如下文12，会出现一条平行线，有两种颜色
visualMap: {
show: true,
type:'piecewise',
top: '13%',
right: '2%',
orient: 'horizontal',
pieces: [
{ gt: -4, lte: 0, color: '#7088ff' },
{ gt: 0, lte: 4, color: '#75cfff' },
{ gt: 4, lte: 8, color: '#ffc619' },
{ gt: 8, lt: 12, color: '#ff8766' },
{ gt: 12, lte: 16, color: '#483D8B' }
],
outOfRange: { color: '#999' }
},

Expected Behavior

预期折线图颜色显示应该和配置保持一致，小于等于拐点一种颜色，大于拐点另一种颜色

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[echarts-bot]

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

TRANSLATED

TITLE

[Bug] VisualMap implements polyline color gradient rendering issues

BODY

Version

5.2.2

Link to Minimal Reproduction

No response

Steps to Reproduce

The line chart configures the threshold color change by setting the visualMap property, but when there are two consecutive inflection point values, such as 12 below, a parallel line will appear with two colors
visualMap: {
show: true,
type:'piecewise',
top: '13%',
right: '2%',
orient: 'horizontal',
pieces: [
{ gt: -4, lte: 0, color: '#7088ff' },
{ gt: 0, lte: 4, color: '#75cfff' },
{ gt: 4, lte: 8, color: '#ffc619' },
{ gt: 8, lt: 12, color: '#ff8766' },
{ gt: 12, lte: 16, color: '#483D8B' }
],
outOfRange: { color: '#999' }
},

Current Behavior

The line chart configures the threshold color change by setting the visualMap property, but when there are two consecutive inflection point values, such as 12 below, a parallel line will appear with two colors
visualMap: {
show: true,
type:'piecewise',
top: '13%',
right: '2%',
orient: 'horizontal',
pieces: [
{ gt: -4, lte: 0, color: '#7088ff' },
{ gt: 0, lte: 4, color: '#75cfff' },
{ gt: 4, lte: 8, color: '#ffc619' },
{ gt: 8, lt: 12, color: '#ff8766' },
{ gt: 12, lte: 16, color: '#483D8B' }
],
outOfRange: { color: '#999' }
},

Expected Behavior

It is expected that the color display of the line chart should be consistent with the configuration, one color less than or equal to the inflection point, and another color greater than the inflection point

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[Ovilia]

Please follow #17138

[ye-congwang]

我5.2.1的版本也有这个问题，本来点和线应该是绿色的，好像是pieces里面不能同时存在正负值，不知道咋解决