fix(line): normalize the infinite value when calculating the visual g…

…radient, resolves #15407.

src/chart/line/LineView.ts

@@ -29,7 +29,7 @@ import {ECPolyline, ECPolygon} from './poly';
 import ChartView from '../../view/Chart';
 import {prepareDataCoordInfo, getStackedOnPoint} from './helper';
 import {createGridClipPath, createPolarClipPath} from '../helper/createClipPathFromCoordSys';
-import LineSeriesModel, { LineEndLabelOption, LineSeriesOption } from './LineSeries';
+import LineSeriesModel, { LineSeriesOption } from './LineSeries';
 import type GlobalModel from '../../model/Global';
 import type ExtensionAPI from '../../core/ExtensionAPI';
 // TODO
@@ -59,11 +59,16 @@ import { convertToColorString } from '../../util/format';
 
 type PolarArea = ReturnType<Polar['getArea']>;
 type Cartesian2DArea = ReturnType<Cartesian2D['getArea']>;
-
 interface SymbolExtended extends SymbolClz {
     __temp: boolean
 }
 
+interface ColorStop {
+    offset: number
+    coord?: number
+    color: ColorString
+}
+
 function isPointsSame(points1: ArrayLike<number>, points2: ArrayLike<number>) {
     if (points1.length !== points2.length) {
         return;
@@ -233,17 +238,17 @@ function getVisualGradient(
     // LinearGradient to render `outerColors`.
 
     const axis = coordSys.getAxis(coordDim);
+    const axisScaleExtent = axis.scale.getExtent();
 
-    interface ColorStop {
-        offset: number
-        coord?: number
-        color: ColorString
-    }
     // dataToCoord mapping may not be linear, but must be monotonic.
     const colorStops: ColorStop[] = zrUtil.map(visualMeta.stops, function (stop) {
+        let coord = axis.toGlobalCoord(axis.dataToCoord(stop.value));
+        // normalize the infinite value
+        isNaN(coord) || isFinite(coord)
+            || (coord = axis.toGlobalCoord(axis.dataToCoord(axisScaleExtent[+(coord < 0)])));
         return {
             offset: 0,
-            coord: axis.toGlobalCoord(axis.dataToCoord(stop.value, true)),
+            coord,
             color: stop.color
         };
     });