From 1cf2e1faa5f9f48ecd58032bf79421873c8b6952 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Mon, 3 Jun 2024 17:37:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=8A=98=E7=BA=BF?=
 =?UTF-8?q?=E5=9B=BE=E6=B8=90=E5=8F=98=E8=89=B2=E6=98=BE=E7=A4=BA=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#9907
---
 .../chart/components/js/panel/charts/line/area.ts   | 11 +++++++++--
 .../chart/components/js/panel/common/common_antv.ts | 13 +++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
index 5b5c376214..43f49f815f 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
@@ -177,8 +177,12 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
     let areaStyle
     if (customAttr.basicStyle.gradient) {
       const colorMap = new Map()
+      const yAxis = parseJson(chart.customStyle).yAxis
+      const axisValue = yAxis.axisValue
+      const start =
+        !axisValue?.auto && axisValue.min && axisValue.max ? axisValue.min / axisValue.max : 0
       areaStyle = item => {
-        let ele
+        let ele: string
         const key = `${item.field}-${item.category}`
         if (colorMap.has(key)) {
           ele = colorMap.get(key)
@@ -188,9 +192,12 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
         }
         if (ele) {
           return {
-            fill: setGradientColor(hexColorToRGBA(ele, alpha), true, 270)
+            fill: setGradientColor(hexColorToRGBA(ele, alpha), true, 270, start)
           }
         }
+        return {
+          fill: 'rgba(255,255,255,0)'
+        }
       }
     }
     return {
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
index 510086322b..ebed648536 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
@@ -799,11 +799,20 @@ export function getLineDash(type) {
  * @param rawColor 原始 RGBA 颜色
  * @param show
  * @param angle 渐变角度
+ * @param start 起始值
  */
-export function setGradientColor(rawColor: string, show = false, angle = 0) {
+export function setGradientColor(rawColor: string, show = false, angle = 0, start = 0) {
   const item = rawColor.split(',')
   item.splice(3, 1, '0.3)')
-  return show ? `l(${angle}) 0:${item.join(',')} 1:${rawColor}` : rawColor
+  let color: string
+  if (start == 0) {
+    color = `l(${angle}) 0:${item.join(',')} 1:${rawColor}`
+  } else if (start > 0) {
+    color = `l(${angle}) 0:rgba(255,255,255,0) ${start}:${item.join(',')} 1:${rawColor}`
+  } else {
+    color = `l(${angle}) 0:rgba(255,255,255,0) 0.1:${item.join(',')} 1:${rawColor}`
+  }
+  return show ? color : rawColor
 }
 
 export function transAxisPosition(position: string): string {