diff --git a/core/core-frontend/src/views/chart/components/js/G2TooltipCarousel.ts b/core/core-frontend/src/views/chart/components/js/G2TooltipCarousel.ts
index d43b1fd1a5..31ad27d644 100644
--- a/core/core-frontend/src/views/chart/components/js/G2TooltipCarousel.ts
+++ b/core/core-frontend/src/views/chart/components/js/G2TooltipCarousel.ts
@@ -204,7 +204,7 @@ class G2TooltipCarousel {
         this.restart()
         lastRect = newRect
       }
-    }, 200)
+    }, 16)
   }
 
   private restart = this.debounce(() => {
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts
index 0185e5f8e2..55fd14d191 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts
@@ -101,6 +101,13 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
       return
     }
     const data = cloneDeep(drawOptions.chart.data?.data)
+    if (this.name === 'bar-group') {
+      if (!chart.xAxisExt[0]) {
+        data.forEach(item => {
+          item[this.intervalOptions.encode.color] = ' '
+        })
+      }
+    }
     const initOptions: ViewSpec = {
       type: 'view',
       data: data,
@@ -298,7 +305,7 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
       scale.x.paddingInner = -0.21
     }
     if (this.name === 'bar-group') {
-      scale.x.paddingInner = -0.1
+      scale.x.paddingInner = -0.2
     }
     const basicStyle = parseJson(chart.customAttr).basicStyle
     const { radiusColumnBar, columnBarRightAngleRadius } = basicStyle
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-bar.ts
index 794d1eb620..88de9a5c52 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-bar.ts
@@ -3,7 +3,12 @@ import {
   BAR_EDITOR_PROPERTY,
   BAR_EDITOR_PROPERTY_INNER
 } from '@/views/chart/components/js/panel/charts/g2/bar/common'
-import { flow, parseJson, setUpGroupSeriesColor } from '@/views/chart/components/js/util'
+import {
+  flow,
+  hexColorToRGBA,
+  parseJson,
+  setUpGroupSeriesColor
+} from '@/views/chart/components/js/util'
 import { StackBar } from '@/views/chart/components/js/panel/charts/g2/bar/stack-bar'
 import { Chart as G2Column } from '@antv/g2'
 import { ViewSpec } from '@/views/chart/components/js/panel/charts/g2/bar/barUtil'
@@ -11,6 +16,8 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { G2DrawOptions } from '@/views/chart/components/js/panel/types/impl/g2'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { addExtremumText } from '@/views/chart/components/js/extremumUitl'
+import { setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
+import { defaultsDeep } from 'lodash-es'
 
 const { t } = useI18n()
 /**
@@ -99,6 +106,53 @@ export class GroupBar extends StackBar {
     return setUpGroupSeriesColor(chart, data)
   }
 
+  protected configColor(chart: Chart, options: ViewSpec): ViewSpec {
+    const { basicStyle } = parseJson(chart.customAttr)
+    const { seriesColor } = basicStyle
+    if (!seriesColor?.length) {
+      return options
+    }
+    const { xAxis, xAxisExt, yAxis } = chart
+    if (!xAxis?.length || !yAxis?.length) {
+      return options
+    }
+    const relations = []
+    if (xAxisExt?.length) {
+      seriesColor.forEach(item => {
+        let color = hexColorToRGBA(item.color, basicStyle.alpha)
+        if (basicStyle.gradient) {
+          color = setGradientColor(color, true, 270)
+        }
+        relations.push([item.id, color])
+      })
+    } else {
+      const colorMap = seriesColor.reduce((pre, next) => {
+        pre[next.id] = next.color
+        return pre
+      }, {})
+      yAxis.forEach(item => {
+        if (colorMap[item.id]) {
+          let color = hexColorToRGBA(colorMap[item.id], basicStyle.alpha)
+          if (basicStyle.gradient) {
+            color = setGradientColor(color, true, 270)
+          }
+          relations.push([' ', color])
+        }
+      })
+    }
+    if (relations.length) {
+      const scaleOptions = {
+        scale: {
+          color: {
+            relations
+          }
+        }
+      }
+      defaultsDeep(options, scaleOptions)
+    }
+    return options
+  }
+
   protected setupOptions(chart: Chart, options: ViewSpec): ViewSpec {
     return flow(
       this.configTheme,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-stack-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-stack-bar.ts
index 66a31a2130..cdf6ae4296 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-stack-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-stack-bar.ts
@@ -13,6 +13,7 @@ import {
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import {
   TOOLTIP_ITEM_TPL,
+  toLinearGradient,
   TOOLTIP_TITLE_TPL
 } from '@/views/chart/components/js/panel/common/common_antv'
 import { defaultsDeep, isEmpty } from 'lodash-es'
@@ -96,7 +97,7 @@ export class GroupStackBar extends StackBar {
             })
             const itemsHtml = result
               .map(item => {
-                const marker = item.color
+                const marker = toLinearGradient(item.color)
                 const label = item.name
                 const value = item.value
                 return TOOLTIP_ITEM_TPL.replace('{marker}', marker)
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/horizontal-bar.ts
index c86001d717..7e2ac1128a 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/horizontal-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/horizontal-bar.ts
@@ -3,7 +3,12 @@ import {
   BAR_EDITOR_PROPERTY,
   BAR_EDITOR_PROPERTY_INNER
 } from '@/views/chart/components/js/panel/charts/g2/bar/common'
-import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
+import {
+  flow,
+  hexColorToRGBA,
+  parseJson,
+  setUpStackSeriesColor
+} from '@/views/chart/components/js/util'
 import { ViewSpec } from '@/views/chart/components/js/panel/charts/g2/bar/barUtil'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Bar } from '@/views/chart/components/js/panel/charts/g2/bar/bar'
@@ -11,6 +16,7 @@ import { getLineDash, setGradientColor } from '@/views/chart/components/js/panel
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { Chart } from '@antv/g2'
 import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
+import { defaultsDeep } from 'lodash-es'
 
 const { t } = useI18n()
 /**
@@ -87,7 +93,11 @@ export class HorizontalBar extends Bar {
         columnWidthRatio
       }
     }
-    if (this.name === 'bar-stack-horizontal' || this.name === 'progress-bar') {
+    if (
+      this.name === 'bar-stack-horizontal' ||
+      this.name === 'progress-bar' ||
+      this.name === 'bar-range'
+    ) {
       children[0].scale.x = {
         type: 'band',
         paddingInner: 0.01
@@ -234,10 +244,62 @@ export class HorizontalBar extends Bar {
     return false
   }
 
+  public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
+    return setUpStackSeriesColor(chart, data)
+  }
+
+  protected configColor(chart: Chart, options: ViewSpec): ViewSpec {
+    const { basicStyle } = parseJson(chart.customAttr)
+    const { seriesColor } = basicStyle
+    if (!seriesColor?.length) {
+      return options
+    }
+    const { xAxis, yAxis, extStack } = chart
+    if (!xAxis?.length || !yAxis?.length) {
+      return options
+    }
+    const relations = []
+    if (extStack?.length) {
+      seriesColor.forEach(item => {
+        let color = hexColorToRGBA(item.color, basicStyle.alpha)
+        if (basicStyle.gradient) {
+          color = setGradientColor(color, true)
+        }
+        relations.push([item.id, color])
+      })
+    } else {
+      const colorMap = seriesColor.reduce((pre, next) => {
+        pre[next.id] = next.color
+        return pre
+      }, {})
+      yAxis.forEach(item => {
+        if (colorMap[item.id]) {
+          let color = hexColorToRGBA(colorMap[item.id], basicStyle.alpha)
+          if (basicStyle.gradient) {
+            color = setGradientColor(color, true)
+          }
+          relations.push([item.chartShowName ?? item.name, color])
+        }
+      })
+    }
+    if (relations.length) {
+      const scaleOptions = {
+        scale: {
+          color: {
+            relations
+          }
+        }
+      }
+      defaultsDeep(options, scaleOptions)
+    }
+    return options
+  }
+
   protected setupOptions(chart: Chart, options: ViewSpec): ViewSpec {
     return flow(
       this.configTheme,
       this.configBasicStyle,
+      this.configColor,
       this.configLabel,
       this.configTooltip,
       this.configLegend,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-bar.ts
index 71ecb011f2..d0536f71e6 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-bar.ts
@@ -7,10 +7,11 @@ import {
 } from '@/views/chart/components/js/panel/charts/g2/bar/barUtil'
 import { GroupStackBar } from '@/views/chart/components/js/panel/charts/g2/bar/group-stack-bar'
 import {
+  toLinearGradient,
   TOOLTIP_ITEM_TPL,
   TOOLTIP_TITLE_TPL
 } from '@/views/chart/components/js/panel/common/common_antv'
-import { defaultsDeep, isEmpty } from 'lodash-es'
+import { isEmpty } from 'lodash-es'
 
 /**
  * 百分比堆叠柱状图
@@ -113,7 +114,7 @@ export class PercentageStackBar extends GroupStackBar {
             })
             const itemsHtml = result
               .map(item => {
-                const marker = item.color
+                const marker = toLinearGradient(item.color)
                 const label = item.name
                 const value = item.value
                 return TOOLTIP_ITEM_TPL.replace('{marker}', marker)
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-horizontal-bar.ts
index 301ea8e4f5..96c05b8bd7 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-horizontal-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-horizontal-bar.ts
@@ -7,6 +7,7 @@ import {
 } from '@/views/chart/components/js/panel/charts/g2/bar/barUtil'
 import {
   TOOLTIP_ITEM_TPL,
+  toLinearGradient,
   TOOLTIP_TITLE_TPL
 } from '@/views/chart/components/js/panel/common/common_antv'
 import { isEmpty } from 'lodash-es'
@@ -105,7 +106,7 @@ export class PercentageStackBar extends HorizontalStackBar {
             })
             const itemsHtml = result
               .map(item => {
-                const marker = item.color
+                const marker = toLinearGradient(item.color)
                 const label = item.name
                 const value = item.value
                 return TOOLTIP_ITEM_TPL.replace('{marker}', marker)
@@ -129,6 +130,7 @@ export class PercentageStackBar extends HorizontalStackBar {
     return flow(
       this.configTheme,
       this.configBasicStyle,
+      this.configColor,
       this.configLabel,
       this.configTooltip,
       this.configLegend,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts
index ea75c98a74..04d9cd6487 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts
@@ -16,6 +16,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import {
   handleChartDashboardHidden,
   setGradientColor,
+  toLinearGradient,
   TOOLTIP_ITEM_TPL,
   TOOLTIP_TITLE_TPL
 } from '@/views/chart/components/js/panel/common/common_antv'
@@ -320,7 +321,7 @@ export class ProgressBar extends HorizontalStackBar {
             })
             const itemsHtml = result
               .map(item => {
-                const marker = item.color
+                const marker = toLinearGradient(item.color)
                 const label = item.name
                 const value = item.value
                 return TOOLTIP_ITEM_TPL.replace(
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-bar.ts
index 7e3072296d..84ed38d3ee 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-bar.ts
@@ -2,7 +2,12 @@ import {
   BAR_EDITOR_PROPERTY,
   BAR_EDITOR_PROPERTY_INNER
 } from '@/views/chart/components/js/panel/charts/g2/bar/common'
-import { flow, parseJson, setUpStackSeriesColor } from '@/views/chart/components/js/util'
+import {
+  flow,
+  hexColorToRGBA,
+  parseJson,
+  setUpStackSeriesColor
+} from '@/views/chart/components/js/util'
 import { Bar } from '@/views/chart/components/js/panel/charts/g2/bar/bar'
 import { formatterItem, valueFormatter } from '@/views/chart/components/js/formatter'
 import { groupBy } from 'lodash'
@@ -13,10 +18,12 @@ import {
   ViewSpec
 } from '@/views/chart/components/js/panel/charts/g2/bar/barUtil'
 import {
+  setGradientColor,
+  toLinearGradient,
   TOOLTIP_ITEM_TPL,
   TOOLTIP_TITLE_TPL
 } from '@/views/chart/components/js/panel/common/common_antv'
-import { isEmpty } from 'lodash-es'
+import { defaultsDeep, isEmpty } from 'lodash-es'
 
 /**
  * 堆叠柱状图
@@ -136,7 +143,7 @@ export class StackBar extends Bar {
             })
             const itemsHtml = result
               .map(item => {
-                const marker = item.color
+                const marker = toLinearGradient(item.color)
                 const label = item.name
                 const value = item.value
                 return TOOLTIP_ITEM_TPL.replace('{marker}', marker)
@@ -194,6 +201,53 @@ export class StackBar extends Bar {
     return setUpStackSeriesColor(chart, data)
   }
 
+  protected configColor(chart: Chart, options: ViewSpec): ViewSpec {
+    const { basicStyle } = parseJson(chart.customAttr)
+    const { seriesColor } = basicStyle
+    if (!seriesColor?.length) {
+      return options
+    }
+    const { xAxis, xAxisExt, yAxis, extStack } = chart
+    if (!xAxis?.length || !yAxis?.length) {
+      return options
+    }
+    const relations = []
+    if (xAxisExt?.length || extStack?.length) {
+      seriesColor.forEach(item => {
+        let color = hexColorToRGBA(item.color, basicStyle.alpha)
+        if (basicStyle.gradient) {
+          color = setGradientColor(color, true, 270)
+        }
+        relations.push([item.id, color])
+      })
+    } else {
+      const colorMap = seriesColor.reduce((pre, next) => {
+        pre[next.id] = next.color
+        return pre
+      }, {})
+      yAxis.forEach(item => {
+        if (colorMap[item.id]) {
+          let color = hexColorToRGBA(colorMap[item.id], basicStyle.alpha)
+          if (basicStyle.gradient) {
+            color = setGradientColor(color, true, 270)
+          }
+          relations.push([item.chartShowName ?? item.name, color])
+        }
+      })
+    }
+    if (relations.length) {
+      const scaleOptions = {
+        scale: {
+          color: {
+            relations
+          }
+        }
+      }
+      defaultsDeep(options, scaleOptions)
+    }
+    return options
+  }
+
   protected setupOptions(chart: Chart, options: ViewSpec): ViewSpec {
     return flow(
       this.configTheme,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-horizontal-bar.ts
index 6aed6a8daf..b42b807d50 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-horizontal-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-horizontal-bar.ts
@@ -8,6 +8,7 @@ import {
 import { useI18n } from '@/hooks/web/useI18n'
 import {
   TOOLTIP_ITEM_TPL,
+  toLinearGradient,
   TOOLTIP_TITLE_TPL
 } from '@/views/chart/components/js/panel/common/common_antv'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
@@ -103,7 +104,7 @@ export class HorizontalStackBar extends HorizontalBar {
             })
             const itemsHtml = result
               .map(item => {
-                const marker = item.color
+                const marker = toLinearGradient(item.color)
                 const label = item.name
                 const value = item.value
                 return TOOLTIP_ITEM_TPL.replace('{marker}', marker)
@@ -127,6 +128,7 @@ export class HorizontalStackBar extends HorizontalBar {
     return flow(
       this.configTheme,
       this.configBasicStyle,
+      this.configColor,
       this.configLabel,
       this.configTooltip,
       this.configLegend,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/line/area.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/line/area.ts
index 02ff931be3..2896bbcb14 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/line/area.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/line/area.ts
@@ -23,6 +23,7 @@ import { DEFAULT_YAXIS_STYLE } from '@/views/chart/components/editor/util/chart'
 import {
   handleChartDashboardHidden,
   setGradientColor,
+  toLinearGradient,
   TOOLTIP_ITEM_TPL,
   TOOLTIP_TITLE_TPL
 } from '../../../common/common_antv'
@@ -598,7 +599,7 @@ export class Area extends G2ChartView {
             })
             const itemsHtml = result
               .map(item => {
-                const marker = item.color
+                const marker = toLinearGradient(item.color)
                 const label = item.name
                 const value = item.value
                 return TOOLTIP_ITEM_TPL.replace('{marker}', marker)
@@ -840,7 +841,7 @@ export class StackArea extends Area {
             })
             const itemsHtml = result
               .map(item => {
-                const marker = item.color
+                const marker = toLinearGradient(item.color)
                 const label = item.name
                 const value = item.value
                 return TOOLTIP_ITEM_TPL.replace('{marker}', marker)
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-group.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-group.ts
index bb7e50e9f3..82d5643c3a 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-group.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-group.ts
@@ -19,6 +19,7 @@ import {
 import {
   handleChartDashboardHidden,
   setGradientColor,
+  toLinearGradient,
   TOOLTIP_ITEM_TPL,
   TOOLTIP_TITLE_TPL
 } from '../../../common/common_antv'
@@ -593,7 +594,7 @@ export class GroupLineMix extends G2ChartView {
             })
             const itemsHtml = result
               .map(item => {
-                const marker = item.color
+                const marker = toLinearGradient(item.color)
                 const label = item.name
                 const value = item.value
                 return TOOLTIP_ITEM_TPL.replace('{marker}', marker)
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-stack.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-stack.ts
index 249a0ed87a..47778ffb51 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-stack.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-stack.ts
@@ -18,6 +18,7 @@ import {
 import {
   handleChartDashboardHidden,
   setGradientColor,
+  toLinearGradient,
   TOOLTIP_ITEM_TPL,
   TOOLTIP_TITLE_TPL
 } from '../../../common/common_antv'
@@ -591,7 +592,7 @@ export class StackLineMix extends G2ChartView {
             })
             const itemsHtml = result
               .map(item => {
-                const marker = item.color
+                const marker = toLinearGradient(item.color)
                 const label = item.name
                 const value = item.value
                 return TOOLTIP_ITEM_TPL.replace('{marker}', marker)
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix.ts
index 79d2af9f90..9c2f3cb29a 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix.ts
@@ -18,6 +18,7 @@ import {
 import {
   handleChartDashboardHidden,
   setGradientColor,
+  toLinearGradient,
   TOOLTIP_ITEM_TPL,
   TOOLTIP_TITLE_TPL
 } from '../../../common/common_antv'
@@ -443,7 +444,7 @@ export class ColumnLineMix extends G2ChartView {
             })
             const itemsHtml = result
               .map(item => {
-                const marker = item.color
+                const marker = toLinearGradient(item.color)
                 const label = item.name
                 const value = item.value
                 return TOOLTIP_ITEM_TPL.replace('{marker}', marker)