diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 75277831cc..7416bd843a 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -915,6 +915,7 @@ export default {
     password_input_error: 'Original password input error'
   },
   chart: {
+    gradient: 'Gradient',
     layer_controller: 'Quota switch',
     suspension: 'Suspension',
     chart_background: 'Component background',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 34cb3bb7f6..c62f20507e 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -915,6 +915,7 @@ export default {
     password_input_error: '原始密碼輸入錯誤'
   },
   chart: {
+    gradient: '漸變',
     layer_controller: '指標切換',
     suspension: '懸浮',
     chart_background: '組件背景',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index a29a2b0b17..d36c92ed67 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -914,6 +914,7 @@ export default {
     password_input_error: '原始密码输入错误'
   },
   chart: {
+    gradient: '渐变',
     layer_controller: '指标切换',
     suspension: '悬浮',
     chart_background: '组件背景',
diff --git a/frontend/src/views/chart/chart/bar/bar_antv.js b/frontend/src/views/chart/chart/bar/bar_antv.js
index 8a95f15dd8..b799ec2517 100644
--- a/frontend/src/views/chart/chart/bar/bar_antv.js
+++ b/frontend/src/views/chart/chart/bar/bar_antv.js
@@ -103,6 +103,11 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
   options.isPercent = chart.type === 'percentage-bar-stack'
   // custom color
   options.color = antVCustomColor(chart)
+  if (customAttr.color.gradient) {
+    options.color = options.color.map((ele) => {
+      return `l(270) 0:#ffffff00 1:${ele}`
+    })
+  }
 
   // 开始渲染
   if (plot) {
@@ -199,6 +204,11 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
   }
   // custom color
   options.color = antVCustomColor(chart)
+  if (customAttr.color.gradient) {
+    options.color = options.color.map((ele) => {
+      return `l(0) 0:#ffffff00 1:${ele}`
+    })
+  }
 
   // 开始渲染
   if (plot) {
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index a1083cc57a..c9c81595cc 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -28,6 +28,7 @@ export const DEFAULT_COLOR_CASE = {
   tableBorderColor: '#E6E7E4',
   seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
   areaBorderColor: '#303133',
+  gradient: false,
   areaBaseColor: '#FFFFFF'
 }
 
diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js
index 86473dab33..e7a25db3f7 100644
--- a/frontend/src/views/chart/chart/gauge/gauge_antv.js
+++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js
@@ -124,6 +124,8 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
       }
     }
   }
+  console.log('hasThreshold', hasThreshold)
+
   if (hasThreshold) {
     options.range = {
       color: theme.styleSheet.paletteQualitative10,
@@ -152,6 +154,17 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
     }
   }
 
+  if (customAttr.color.gradient) {
+    const colorList = (theme.styleSheet?.paletteQualitative10 || []).map((ele) => `l(0) 0:#ffffff00 1:${ele}`)
+    if (!options.range) {
+      options.range = {
+        color: colorList
+      }
+    } else {
+      options.range.color = colorList
+    }
+  }
+
   // 开始渲染
   if (plot) {
     plot.destroy()
diff --git a/frontend/src/views/chart/chart/line/line_antv.js b/frontend/src/views/chart/chart/line/line_antv.js
index 52cd766dfe..fa6f38bf52 100644
--- a/frontend/src/views/chart/chart/line/line_antv.js
+++ b/frontend/src/views/chart/chart/line/line_antv.js
@@ -178,6 +178,17 @@ export function baseAreaOptionAntV(plot, container, chart, action, isStack) {
   }
   // custom color
   options.color = antVCustomColor(chart)
+  const areaColors = [...options.color, ...options.color]
+  if (customAttr.color.gradient) {
+    options.areaStyle = () => {
+      const cr = areaColors.shift()
+      if (cr) {
+        return {
+          fill: `l(270) 0:#ffffff00 1:${cr}`
+        }
+      }
+    }
+  }
 
   // 开始渲染
   if (plot) {
diff --git a/frontend/src/views/chart/chart/pie/pie_antv.js b/frontend/src/views/chart/chart/pie/pie_antv.js
index 00fbb8ba81..b3ad13f44a 100644
--- a/frontend/src/views/chart/chart/pie/pie_antv.js
+++ b/frontend/src/views/chart/chart/pie/pie_antv.js
@@ -82,6 +82,12 @@ export function basePieOptionAntV(plot, container, chart, action) {
   // custom color
   options.color = antVCustomColor(chart)
 
+  if (customAttr.color.gradient) {
+    options.color = options.color.map((ele) => {
+      return `l(270) 0:#ffffff00 1:${ele}`
+    })
+  }
+
   // 开始渲染
   if (plot) {
     plot.destroy()
@@ -159,6 +165,12 @@ export function basePieRoseOptionAntV(plot, container, chart, action) {
   // custom color
   options.color = antVCustomColor(chart)
 
+  if (customAttr.color.gradient) {
+    options.color = options.color.map((ele) => {
+      return `l(270) 0:#ffffff00 1:${ele}`
+    })
+  }
+
   // 开始渲染
   if (plot) {
     plot.destroy()
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index c14f28c8d7..6a0593eed8 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -280,6 +280,7 @@ export const TYPE_CONFIGS = [
       'color-selector': [
         'value',
         'custom',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -464,7 +465,8 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
-        'alpha'
+        'alpha',
+        'gradient'
       ],
       'size-selector-ant-v': [
         'lineWidth',
@@ -624,6 +626,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -703,6 +706,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -782,6 +786,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -861,6 +866,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1004,6 +1010,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1083,6 +1090,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1160,6 +1168,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1219,6 +1228,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1279,6 +1289,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1336,6 +1347,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1396,6 +1408,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
diff --git a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
index 6c8d7a0749..03bbf03191 100644
--- a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
@@ -151,6 +151,17 @@
             </el-popover>
           </el-form-item>
 
+          <el-form-item
+            v-show="showProperty('gradient')"
+            :label="$t('chart.gradient')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="colorForm.gradient"
+              @change="changeColorCase('gradient')"
+            />
+          </el-form-item>
+
           <el-form-item
             v-show="showProperty('quotaColor')"
             :label="$t('chart.quota_color')"
@@ -420,6 +431,7 @@ export default {
   },
   methods: {
     gradientColorChange(colorDto) {
+      console.log('gradientColorChange')
       const modifyNames = ['value', 'colors', 'seriesColors']
       modifyNames.forEach(item => {
         this.colorForm['modifyName'] = item