diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js
index 7349aee01a..3f7f255244 100644
--- a/frontend/src/views/chart/chart/gauge/gauge_antv.js
+++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js
@@ -29,6 +29,7 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
   // label
   if (customAttr.label) {
     const label = JSON.parse(JSON.stringify(customAttr.label))
+    labelFormatter = label.gaugeLabelFormatter ? label.gaugeLabelFormatter : DEFAULT_LABEL.gaugeLabelFormatter
     if (label.show) {
       labelContent = {
         style: ({ percent }) => ({
@@ -48,7 +49,6 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
     } else {
       labelContent = false
     }
-    labelFormatter = label.gaugeLabelFormatter ? label.gaugeLabelFormatter : DEFAULT_LABEL.gaugeLabelFormatter
   }
 
   const range = [0]
diff --git a/frontend/src/views/chart/chart/liquid/liquid.js b/frontend/src/views/chart/chart/liquid/liquid.js
index 2d61bc2066..e1b7435a14 100644
--- a/frontend/src/views/chart/chart/liquid/liquid.js
+++ b/frontend/src/views/chart/chart/liquid/liquid.js
@@ -1,6 +1,9 @@
 import { Liquid } from '@antv/g2plot'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
+import { DEFAULT_LABEL, DEFAULT_SIZE } from '@/views/chart/chart/chart'
+import { valueFormatter } from '@/views/chart/chart/formatter'
+
+let labelFormatter = null
 
 export function baseLiquid(plot, container, chart) {
   let value = 0
@@ -31,12 +34,17 @@ export function baseLiquid(plot, container, chart) {
     // label
     if (customAttr.label) {
       const label = JSON.parse(JSON.stringify(customAttr.label))
+      labelFormatter = label.gaugeLabelFormatter ? label.gaugeLabelFormatter : DEFAULT_LABEL.gaugeLabelFormatter
       if (label.show) {
         labelContent = {
           style: ({ percent }) => ({
             fontSize: parseInt(label.fontSize),
             color: label.color
-          })
+          }),
+          formatter: function(v) {
+            const value = v.percent
+            return valueFormatter(value, labelFormatter)
+          }
         }
       } else {
         labelContent = false
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index 07e032f0e7..aae1e199ff 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -1,3 +1,5 @@
+import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
+
 export function hexColorToRGBA(hex, alpha) {
   const rgb = [] // 定义rgb数组
   if (/^\#[0-9A-F]{3}$/i.test(hex)) { // 判断传入是否为#三位十六进制数
@@ -63,7 +65,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ]
     }
   },
@@ -104,7 +107,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ]
     }
   },
@@ -148,7 +152,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ]
     }
   },
@@ -181,7 +186,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ]
     }
   },
@@ -214,7 +220,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ]
     }
   },
@@ -253,7 +260,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ]
     }
   },
@@ -281,9 +289,7 @@ export const TYPE_CONFIGS = [
         'liquidSize'
       ],
       'label-selector-ant-v': [
-        'show',
-        'fontSize',
-        'color'
+        'labelGauge'
       ],
       'title-selector-ant-v': [
         'show',
@@ -292,7 +298,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ]
     }
   },
@@ -360,7 +367,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -436,7 +444,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -512,7 +521,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -587,7 +597,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -655,7 +666,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ]
     }
   },
@@ -722,7 +734,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -797,7 +810,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -851,7 +865,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -905,7 +920,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -960,7 +976,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -1012,7 +1029,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -1051,7 +1069,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ]
     }
   },
@@ -1118,7 +1137,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -1167,7 +1187,8 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'remarkShow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -2494,3 +2515,17 @@ export function antVCustomColor(chart) {
   }
   return colors
 }
+
+export function getRemark(chart) {
+  const remark = {}
+  if (chart.customStyle) {
+    const customStyle = JSON.parse(chart.customStyle)
+    if (customStyle.text) {
+      const title = JSON.parse(JSON.stringify(customStyle.text))
+      remark.show = title.remarkShow ? title.remarkShow : DEFAULT_TITLE_STYLE.remarkShow
+      remark.content = title.remark ? title.remark : DEFAULT_TITLE_STYLE.remark
+      remark.bgFill = title.remarkBackgroundColor ? title.remarkBackgroundColor : DEFAULT_TITLE_STYLE.remarkBackgroundColor
+    }
+  }
+  return remark
+}
diff --git a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
index be3fae9759..28911cc2d3 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
@@ -100,7 +100,7 @@
           <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
             <span>{{ $t('chart.filter') }}...</span>
           </el-dropdown-item>
-          <el-dropdown-item v-if="chart.render === 'antv'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
+          <el-dropdown-item v-if="chart.render === 'antv' && chart.type !== 'gauge' && chart.type !== 'liquid'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
             <span>{{ $t('chart.value_formatter') }}...</span>
           </el-dropdown-item>
           <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
diff --git a/frontend/src/views/chart/components/drag-item/QuotaItem.vue b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
index c24a7d61c8..78c78dad68 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
@@ -100,7 +100,7 @@
           <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
             <span>{{ $t('chart.filter') }}...</span>
           </el-dropdown-item>
-          <el-dropdown-item v-if="chart.render === 'antv'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
+          <el-dropdown-item v-if="chart.render === 'antv' && chart.type !== 'gauge' && chart.type !== 'liquid'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
             <span>{{ $t('chart.value_formatter') }}...</span>
           </el-dropdown-item>
           <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
index c327a516a2..605e6aef24 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
@@ -32,7 +32,7 @@
         </div>
       </el-form>
 
-      <el-form v-show="showProperty('labelGauge') && chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
+      <el-form v-show="showProperty('labelGauge') && chart.type && (chart.type.includes('gauge') || chart.type.includes('liquid'))" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
         <el-form-item :label="$t('chart.show')" class="form-item">
           <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>