From 2b63cd78c15952e0ad3693cde38c29002098d769 Mon Sep 17 00:00:00 2001
From: pissang <bm2736892@gmail.com>
Date: Mon, 25 Oct 2021 16:47:56 +0800
Subject: [PATCH] fix(line): fix visual gradient when coords are between two
 stops.

---
 src/chart/line/LineView.ts |  6 ++++++
 test/line-visual2.html     | 41 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 6da862814f..e062bb2c12 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -224,6 +224,12 @@ function clipColorStops(colorStops: ColorStop[], maxSize: number): ColorStop[] {
             if (prevInRangeColorStop) {
                 newColorStops.push(lerpStop(prevInRangeColorStop, stop, maxSize));
             }
+            else if (prevOutOfRangeColorStop) { // If there are two stops and coord range is between these two stops
+                newColorStops.push(
+                    lerpStop(prevOutOfRangeColorStop, stop, 0),
+                    lerpStop(prevOutOfRangeColorStop, stop, maxSize)
+                );
+            }
             // All following stop will be out of range. So just ignore them.
             break;
         }
diff --git a/test/line-visual2.html b/test/line-visual2.html
index 44f2b9ba2d..f45dad5cff 100644
--- a/test/line-visual2.html
+++ b/test/line-visual2.html
@@ -41,6 +41,7 @@
         <div id="main1"></div>
         <div id="main2"></div>
         <div id="main3"></div>
+        <div id="main4"></div>
 
 
 
@@ -495,5 +496,45 @@
             })
 
         </script>
+
+        <script>
+            require([
+                'echarts'
+            ], function (echarts) {
+
+                const option = {
+                    xAxis: {
+                        type: 'category',
+                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                    },
+                    yAxis: {
+                        type: 'value'
+                    },
+
+                    visualMap: {
+                        type: "piecewise",
+                        pieces: [{
+                                    gte: -1,
+                                    lte: 1,
+                                    color: '#000'
+                                }],
+                        outOfRange: { color: '#F43915' }
+                    },
+                    series: [
+                        {
+                        data: [0.2, 0.24, 0.18, 0.15, 0.18, 0.27, 0.25],
+                        type: 'line'
+                        }
+                    ]
+                };
+                const myChart = testHelper.create(echarts, 'main4', {
+                    title: [
+                        'Gradient should be black.',
+                        'https://github.com/apache/echarts/issues/15885'
+                    ],
+                    option: option
+                });
+            })
+        </script>
     </body>
 </html>