diff --git a/frontend/src/views/chart/chart/bar/bar_antv.js b/frontend/src/views/chart/chart/bar/bar_antv.js
index b799ec2517..ef626eeabe 100644
--- a/frontend/src/views/chart/chart/bar/bar_antv.js
+++ b/frontend/src/views/chart/chart/bar/bar_antv.js
@@ -8,7 +8,8 @@ import {
   getYAxis,
   getPadding,
   getSlider,
-  getAnalyse
+  getAnalyse,
+  setGradientColor
 } from '@/views/chart/chart/common/common_antv'
 import { antVCustomColor } from '@/views/chart/chart/util'
 
@@ -105,7 +106,7 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
   options.color = antVCustomColor(chart)
   if (customAttr.color.gradient) {
     options.color = options.color.map((ele) => {
-      return `l(270) 0:#ffffff00 1:${ele}`
+      return setGradientColor(ele, customAttr.color.gradient, 270)
     })
   }
 
@@ -206,7 +207,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
   options.color = antVCustomColor(chart)
   if (customAttr.color.gradient) {
     options.color = options.color.map((ele) => {
-      return `l(0) 0:#ffffff00 1:${ele}`
+      return setGradientColor(ele, customAttr.color.gradient)
     })
   }
 
diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js
index 236d7da1b0..759f9c09a6 100644
--- a/frontend/src/views/chart/chart/common/common_antv.js
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@@ -879,3 +879,9 @@ function getLineDash(type) {
       return [0, 0]
   }
 }
+
+export function setGradientColor(rawColor, show = false, angle = 0) {
+  const item = rawColor.split(',')
+  item.splice(3, 1, '0.3)')
+  return show ? `l(${angle}) 0:${item.join(',')} 1:${rawColor}` : rawColor
+}
diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js
index b4b3844d6e..5070f6f2c1 100644
--- a/frontend/src/views/chart/chart/gauge/gauge_antv.js
+++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js
@@ -1,4 +1,4 @@
-import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv'
+import { getPadding, getTheme, setGradientColor } from '@/views/chart/chart/common/common_antv'
 import { Gauge } from '@antv/g2plot'
 import { DEFAULT_LABEL, DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
 import { getScaleValue } from '@/components/canvas/utils/style'
@@ -154,7 +154,9 @@ 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}`)
+    const colorList = (theme.styleSheet?.paletteQualitative10 || []).map((ele) => {
+      return setGradientColor(ele, customAttr.color.gradient)
+    })
     if (!options.range) {
       options.range = {
         color: colorList
diff --git a/frontend/src/views/chart/chart/line/line_antv.js b/frontend/src/views/chart/chart/line/line_antv.js
index d1a9c93948..c3ef3bfe59 100644
--- a/frontend/src/views/chart/chart/line/line_antv.js
+++ b/frontend/src/views/chart/chart/line/line_antv.js
@@ -8,7 +8,8 @@ import {
   getYAxis,
   getPadding,
   getSlider,
-  getAnalyse
+  getAnalyse,
+  setGradientColor
 } from '@/views/chart/chart/common/common_antv'
 import { antVCustomColor, handleEmptyDataStrategy } from '@/views/chart/chart/util'
 import _ from 'lodash'
@@ -183,10 +184,10 @@ export function baseAreaOptionAntV(plot, container, chart, action, isStack) {
   const areaColors = [...options.color, ...options.color]
   if (customAttr.color.gradient) {
     options.areaStyle = () => {
-      const cr = areaColors.shift()
-      if (cr) {
+      const ele = areaColors.shift()
+      if (ele) {
         return {
-          fill: `l(270) 0:#ffffff00 1:${cr}`
+          fill: setGradientColor(ele, customAttr.color.gradient, 270)
         }
       }
     }
diff --git a/frontend/src/views/chart/chart/pie/pie_antv.js b/frontend/src/views/chart/chart/pie/pie_antv.js
index b3ad13f44a..00fbb8ba81 100644
--- a/frontend/src/views/chart/chart/pie/pie_antv.js
+++ b/frontend/src/views/chart/chart/pie/pie_antv.js
@@ -82,12 +82,6 @@ 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()
@@ -165,12 +159,6 @@ 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 5e04f41dc9..9df0f4cf53 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -947,6 +947,7 @@ export const TYPE_CONFIGS = [
       'color-selector': [
         'value',
         'custom',
+        'gradient',
         'alpha'
       ],
       'label-selector-ant-v': [
@@ -1172,7 +1173,6 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
-        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1232,7 +1232,6 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
-        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1293,7 +1292,6 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
-        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1351,7 +1349,6 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
-        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
diff --git a/frontend/src/views/chart/chart/waterfall/waterfall.js b/frontend/src/views/chart/chart/waterfall/waterfall.js
index 61a20c363e..79797d01c3 100644
--- a/frontend/src/views/chart/chart/waterfall/waterfall.js
+++ b/frontend/src/views/chart/chart/waterfall/waterfall.js
@@ -4,7 +4,8 @@ import {
   getTheme,
   getTooltip,
   getXAxis,
-  getYAxis
+  getYAxis,
+  setGradientColor
 } from '@/views/chart/chart/common/common_antv'
 import { Waterfall } from '@antv/g2plot'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
@@ -28,11 +29,17 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
   }
   // data
   const data = chart.data.data
+  const [risingColorRgba, fallingColorRgba, totalColorRgba] = theme.styleSheet.paletteQualitative10
+
+  let customAttrCopy = {}
+  if (chart.customAttr) {
+    customAttrCopy = JSON.parse(chart.customAttr)
+  }
   // total
   const total = {
     label: '合计',
     style: {
-      fill: theme.styleSheet.paletteQualitative10[2]
+      fill: setGradientColor(totalColorRgba, customAttrCopy.color.gradient, 270)
     }
   }
   // options
@@ -50,25 +57,25 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
       items: [
         { name: '增加', marker: {
           style: {
-            fill: theme.styleSheet.paletteQualitative10[0]
+            fill: setGradientColor(risingColorRgba, customAttrCopy.color.gradient, 270)
           }
         }},
         { name: '减少', marker: {
           style: {
-            fill: theme.styleSheet.paletteQualitative10[1]
+            fill: setGradientColor(fallingColorRgba, customAttrCopy.color.gradient, 270)
           }
         }},
         { name: '合计', marker: {
           style: {
-            fill: theme.styleSheet.paletteQualitative10[2]
+            fill: setGradientColor(totalColorRgba, customAttrCopy.color.gradient, 270)
           }
         }}
       ]
     },
     xAxis: xAxis,
     yAxis: yAxis,
-    risingFill: theme.styleSheet.paletteQualitative10[0],
-    fallingFill: theme.styleSheet.paletteQualitative10[1],
+    risingFill: setGradientColor(risingColorRgba, customAttrCopy.color.gradient, 270),
+    fallingFill: setGradientColor(fallingColorRgba, customAttrCopy.color.gradient, 270),
     total: total,
     interactions: [
       {
@@ -79,7 +86,7 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
       }
     ]
   }
-  // size
+
   let customAttr = {}
   if (chart.customAttr) {
     customAttr = JSON.parse(chart.customAttr)
diff --git a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
index 3390f8b5ef..00a1682af8 100644
--- a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
@@ -491,6 +491,7 @@ export default {
 
           this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
           this.colorForm.tableHeaderFontColor = this.colorForm.tableHeaderFontColor ? this.colorForm.tableHeaderFontColor : this.colorForm.tableFontColor
+          this.$set(this.colorForm, 'gradient', this.colorForm.gradient || false)
           this.colorForm.tableScrollBarColor = this.colorForm.tableScrollBarColor ? this.colorForm.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
 
           this.initCustomColor()
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 9b0b7ff39e..992f8bb1c4 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1661,6 +1661,8 @@ export default {
   name: 'ChartEdit',
   components: {
     PositionAdjust,
+    // eslint-disable-next-line
+    MarginSelector,
     ScrollCfg,
     CalcChartFieldEdit,
     ChartFieldEdit,