diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index a46b9dd1be..60c2aa8c91 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -910,6 +910,11 @@ export default {
     password_input_error: 'Original password input error'
   },
   chart: {
+    margin_model: 'Model',
+    margin_model_auto: 'Auto',
+    margin_model_absolute: 'Absolute',
+    margin_model_relative: 'Relative',
+    margin_placeholder: 'Please enter a number from 0-100',
     rich_text_view_result_tips: 'The rich text view selects only the first result',
     rich_text_view: 'Rich Text View',
     view_reset: 'View Reset',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 5df944cb3b..9eaefd1367 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -910,6 +910,11 @@ export default {
     password_input_error: '原始密碼輸入錯誤'
   },
   chart: {
+    margin_model: '模式',
+    margin_model_auto: '自動',
+    margin_model_absolute: '絕對',
+    margin_model_relative: '相對',
+    margin_placeholder: '請輸入0-100數字',
     rich_text_view_result_tips: '富文本只选取第一条结果',
     rich_text_view: '富文本视图',
     view_reset: '視圖重置',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 5a2bf46a75..0cf66591bf 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -909,6 +909,11 @@ export default {
     password_input_error: '原始密码输入错误'
   },
   chart: {
+    margin_model: '模式',
+    margin_model_auto: '自动',
+    margin_model_absolute: '绝对',
+    margin_model_relative: '相对',
+    margin_placeholder: '请输入0-100数字',
     rich_text_view_result_tips: '富文本只选取第一条结果',
     rich_text_view: '富文本视图',
     view_reset: '视图重置',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 43548d3e71..5849768991 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -217,6 +217,15 @@ export const DEFAULT_LEGEND_STYLE = {
     fontSize: '12'
   }
 }
+
+export const DEFAULT_MARGIN_STYLE = {
+  marginModel: 'auto',
+  marginTop: 40,
+  marginBottom: 44,
+  marginLeft: 15,
+  marginRight: 10
+}
+
 export const DEFAULT_XAXIS_STYLE = {
   show: true,
   position: 'bottom',
diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js
index 38a601ce2a..321c238bc0 100644
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@@ -186,11 +186,38 @@ export function componentStyle(chart_option, chart) {
       chart_option.radar.splitLine = customStyle.split.splitLine
       chart_option.radar.splitArea = customStyle.split.splitArea
     }
+    if (customStyle.margin && customStyle.margin.marginModel && customStyle.margin.marginModel !== 'auto') {
+      const unit = getMarginUnit(customStyle.margin)
+      const result = { containLabel: true }
+      const realUnit = (unit === '%' ? unit : '')
+      if (customStyle.margin.marginTop != null) {
+        result.top = customStyle.margin.marginTop + realUnit
+      }
+      if (customStyle.margin.marginBottom != null) {
+        result.bottom = customStyle.margin.marginBottom + realUnit
+      }
+      if (customStyle.margin.marginLeft != null) {
+        result.left = customStyle.margin.marginLeft + realUnit
+      }
+      if (customStyle.margin.marginRight != null) {
+        result.right = customStyle.margin.marginRight + realUnit
+      }
+      if (!chart_option.grid) {
+        chart_option.grid = {}
+      }
+      Object.assign(chart_option.grid, JSON.parse(JSON.stringify(result)))
+    }
     if (customStyle.background) {
       chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
     }
   }
 }
+export const getMarginUnit = marginForm => {
+  if (!marginForm.marginModel || marginForm.marginModel === 'auto') return null
+  if (marginForm.marginModel === 'absolute') return 'px'
+  if (marginForm.marginModel === 'relative') return '%'
+  return null
+}
 
 const hexToRgba = (hex, opacity) => {
   let rgbaColor = ''
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index e595f0e5a9..006a267362 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -1538,9 +1538,17 @@ export const TYPE_CONFIGS = [
     properties: [
       'color-selector',
       'size-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'quotaColor',
         'dimensionColor'
@@ -1582,9 +1590,17 @@ export const TYPE_CONFIGS = [
     properties: [
       'color-selector',
       'size-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'quotaColor',
         'dimensionColor'
@@ -1627,9 +1643,17 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'size-selector',
       'label-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -1674,9 +1698,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -1754,9 +1786,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -1835,9 +1875,17 @@ export const TYPE_CONFIGS = [
       'y-axis-selector',
       'y-axis-ext-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -1920,9 +1968,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -1999,9 +2055,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2078,9 +2142,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2157,9 +2229,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2236,9 +2316,17 @@ export const TYPE_CONFIGS = [
       'label-selector',
       'tooltip-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2294,9 +2382,17 @@ export const TYPE_CONFIGS = [
       'label-selector',
       'tooltip-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2354,9 +2450,17 @@ export const TYPE_CONFIGS = [
       'tooltip-selector',
       'split-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2417,9 +2521,17 @@ export const TYPE_CONFIGS = [
       'size-selector',
       'label-selector',
       'tooltip-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2468,9 +2580,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2544,9 +2664,17 @@ export const TYPE_CONFIGS = [
       'label-selector',
       'tooltip-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2599,9 +2727,17 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'label-selector',
       'tooltip-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
diff --git a/frontend/src/views/chart/components/component-style/MarginSelector.vue b/frontend/src/views/chart/components/component-style/MarginSelector.vue
new file mode 100644
index 0000000000..fc7d8ee65b
--- /dev/null
+++ b/frontend/src/views/chart/components/component-style/MarginSelector.vue
@@ -0,0 +1,171 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="marginForm" :model="marginForm" label-width="80px" size="mini" :rules="rules">
+        <el-form-item v-show="showProperty('marginModel')" :label="$t('chart.margin_model')" class="form-item">
+          <el-radio-group v-model="marginForm.marginModel" size="mini" @change="changeMarginStyle('marginModel')">
+            <el-radio-button label="auto">{{ $t('chart.margin_model_auto') }}</el-radio-button>
+            <el-radio-button label="absolute">{{ $t('chart.margin_model_absolute') }}</el-radio-button>
+            <el-radio-button label="relative">{{ $t('chart.margin_model_relative') }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <div v-show="showProperty('marginModel') && marginForm.marginModel !== 'auto'">
+          <el-form-item v-show="showProperty('marginTop')" :label="$t('chart.text_pos_top')" class="form-item" prop="marginTop">
+            <el-input v-model="marginForm.marginTop" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
+              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item v-show="showProperty('marginBottom')" :label="$t('chart.text_pos_bottom')" class="form-item" prop="marginBottom">
+            <el-input v-model="marginForm.marginBottom" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
+              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item v-show="showProperty('marginLeft')" :label="$t('chart.text_pos_left')" class="form-item" prop="marginLeft">
+            <el-input v-model="marginForm.marginLeft" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
+              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item v-show="showProperty('marginRight')" :label="$t('chart.text_pos_right')" class="form-item" prop="marginRight">
+            <el-input v-model="marginForm.marginRight" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
+              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+            </el-input>
+          </el-form-item>
+
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_MARGIN_STYLE } from '../../chart/chart'
+import { getMarginUnit } from '@/views/chart/chart/common/common'
+export default {
+  name: 'MarginSelector',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      marginForm: JSON.parse(JSON.stringify(DEFAULT_MARGIN_STYLE)),
+      rules: {
+        marginTop: [
+          { validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
+        ],
+        marginBottom: [
+          { validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
+        ],
+        marginLeft: [
+          { validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
+        ],
+        marginRight: [
+          { validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
+        ]
+      }
+    }
+  },
+  computed: {
+    unitSuffix() {
+      return getMarginUnit(this.marginForm)
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.margin) {
+          this.marginForm = customStyle.margin
+        }
+      }
+    },
+
+    changeMarginStyle(value, modifyName) {
+      this.marginForm['modifyName'] = modifyName
+      this.$emit('onMarginChange', this.marginForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
+    },
+    validateMarginNumber(rule, value, callBack) {
+      if (value == null || value === '') {
+        callBack()
+        return
+      }
+      if (value < 0 || value > 100) {
+        callBack(new Error(this.$t('chart.margin_placeholder')))
+        this.marginForm[rule.field] = 0
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider ::v-deep .el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item ::v-deep .el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
+</style>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index e44b1daa2b..61dd8a8ca0 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -757,6 +757,7 @@
             @onChangeSplitForm="onChangeSplitForm"
             @onTextChange="onTextChange"
             @onLegendChange="onLegendChange"
+            @onMarginChange="onMarginChange"
             @onChangeBackgroundForm="onChangeBackgroundForm"
           />
         </el-tab-pane>
@@ -1999,6 +2000,10 @@ export default {
       this.view.customStyle.legend = val
       this.calcStyle()
     },
+    onMarginChange(val) {
+      this.view.customStyle.margin = val
+      this.calcStyle()
+    },
 
     onLabelChange(val) {
       this.view.customAttr.label = val
diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue
index 77894e2236..8e41267a75 100644
--- a/frontend/src/views/chart/view/ChartStyle.vue
+++ b/frontend/src/views/chart/view/ChartStyle.vue
@@ -260,6 +260,21 @@
               @onChangeBackgroundForm="onChangeBackgroundForm($event,'background-color-selector')"
             />
           </el-collapse-item>
+          <el-collapse-item
+            v-show="showPropertiesCollapse(['margin-selector'])"
+            name="margin"
+            :title="$t('panel.margin')"
+          >
+            <margin-selector
+              v-if="showProperties('margin-selector')"
+              :param="param"
+              class="attr-selector"
+              :chart="chart"
+              :property-inner="propertyInnerAll['margin-selector']"
+              @onMarginChange="onMarginChange($event,'margin-selector')"
+            />
+
+          </el-collapse-item>
         </el-collapse>
       </el-row>
     </div>
@@ -284,6 +299,7 @@ import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxis
 import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
 import TitleSelectorAntV from '@/views/chart/components/component-style/TitleSelectorAntV'
 import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
+import MarginSelector from '@/views/chart/components/component-style/MarginSelector'
 import LegendSelectorAntV from '@/views/chart/components/component-style/LegendSelectorAntV'
 import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
 import SplitSelector from '@/views/chart/components/component-style/SplitSelector'
@@ -314,6 +330,7 @@ export default {
     SizeSelectorAntV,
     SizeSelector,
     ColorSelector,
+    MarginSelector,
     PluginCom
   },
   props: {
@@ -432,6 +449,10 @@ export default {
       val['propertyName'] = propertyName
       this.$emit('onLegendChange', val)
     },
+    onMarginChange(val, propertyName) {
+      val['propertyName'] = propertyName
+      this.$emit('onMarginChange', val)
+    },
     onChangeBackgroundForm(val, propertyName) {
       val['propertyName'] = propertyName
       this.$emit('onChangeBackgroundForm', val)