From 9041866e9c7cbc5dd1d1b61d3d47c49e0bf587b8 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 23 May 2022 13:23:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=89=B9=E9=87=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/custom-component/UserView.vue      |   10 +-
 frontend/src/lang/en.js                       |    3 +
 frontend/src/lang/tw.js                       |    3 +
 frontend/src/lang/zh.js                       |    3 +
 frontend/src/store/index.js                   |   40 +-
 frontend/src/views/chart/chart/util.js        | 1680 ++++++++++++++++-
 .../component-style/LegendSelector.vue        |   43 +-
 .../component-style/LegendSelectorAntV.vue    |   41 +-
 .../component-style/SplitSelector.vue         |   57 +-
 .../component-style/SplitSelectorAntV.vue     |   29 +-
 .../component-style/TitleSelector.vue         |   45 +-
 .../component-style/TitleSelectorAntV.vue     |   41 +-
 .../component-style/XAxisSelector.vue         |   73 +-
 .../component-style/XAxisSelectorAntV.vue     |   66 +-
 .../component-style/YAxisExtSelector.vue      |   93 +-
 .../component-style/YAxisExtSelectorAntV.vue  |   65 +-
 .../component-style/YAxisSelector.vue         |   85 +-
 .../component-style/YAxisSelectorAntV.vue     |   65 +-
 .../components/shape-attr/ColorSelector.vue   |   61 +-
 .../components/shape-attr/LabelSelector.vue   |   57 +-
 .../shape-attr/LabelSelectorAntV.vue          |   48 +-
 .../components/shape-attr/SizeSelector.vue    |  282 ++-
 .../shape-attr/SizeSelectorAntV.vue           |  593 +++---
 .../components/shape-attr/TooltipSelector.vue |   33 +-
 .../shape-attr/TooltipSelectorAntV.vue        |   25 +-
 .../chart/components/shape-attr/TotalCfg.vue  |   55 +-
 frontend/src/views/chart/view/ChartEdit.vue   |   13 +-
 frontend/src/views/chart/view/ChartStyle.vue  |   35 +-
 .../views/chart/view/ChartStyleBatchSet.vue   |    4 +-
 29 files changed, 2819 insertions(+), 829 deletions(-)

diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index ebc89f8173..e3c931960e 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -407,17 +407,17 @@ export default {
         const updateParams = { 'id': this.chart.id, 'stylePriority': 'view' }
         if (param.custom === 'customAttr') {
           const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
-          sourceCustomAttr[param.property] = param.value
+          sourceCustomAttr[param.property][param.value.modifyName] = param.value[param.value.modifyName]
           this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
           this.chart.customAttr = this.sourceCustomAttrStr
           updateParams['customAttr'] = this.sourceCustomAttrStr
         } else if (param.custom === 'customStyle') {
           const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
           // view's title use history
-          if (param.property === 'text') {
-            param.value.title = sourceCustomStyle.text.title
-          }
-          sourceCustomStyle[param.property] = param.value
+          // if (param.property === 'text') {
+          //   param.value.title = sourceCustomStyle.text.title
+          // }
+          sourceCustomStyle[param.property][param.value.modifyName] = param.value[param.value.modifyName]
           this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
           this.chart.customStyle = this.sourceCustomStyleStr
           updateParams['customStyle'] = this.sourceCustomStyleStr
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index f3fed2f1e4..348729085a 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -2024,5 +2024,8 @@ export default {
     port: 'Port',
     user: 'User',
     passwd: 'Password'
+  },
+  plugin_style: {
+    border: 'Border'
   }
 }
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index b94053cb9b..bb3bf25c6a 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -2035,5 +2035,8 @@ export default {
     port: '端口',
     user: '用戶名',
     passwd: '密碼'
+  },
+  plugin_style: {
+    border: '边框'
   }
 }
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 9a2d58c1f9..bcc4f0f0ea 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -2051,5 +2051,8 @@ export default {
     time: '操作时间',
     export: '导出',
     search_by_key: '搜索详情'
+  },
+  plugin_style: {
+    border: '边框'
   }
 }
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 98eb050ce5..b11a992a94 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -119,6 +119,7 @@ const data = {
     // Currently selected components
     curBatchOptComponents: [],
     mixProperties: [],
+    mixPropertiesInner: {},
     batchOptChartInfo: null,
     batchOptViews: {},
     // properties changed
@@ -552,15 +553,6 @@ const data = {
         const viewBaseInfo = state.componentViewsData[id]
         // get properties
         const viewConfig = state.allViewRender.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
-        const viewProperties = viewConfig ? viewConfig[0].properties : []
-        if (state.mixProperties.length > 0) {
-          // If it exists , taking the intersection
-          state.mixProperties = state.mixProperties.filter(property => viewProperties.indexOf(property) > -1)
-        } else {
-          // If it doesn't exist, assignment directly
-          state.mixProperties = deepCopy(viewProperties)
-        }
-
         if (viewConfig && viewConfig.length > 0) {
           state.batchOptViews[id] = viewConfig[0]
           this.commit('setBatchOptChartInfo')
@@ -570,16 +562,27 @@ const data = {
     setBatchOptChartInfo(state) {
       let render = null
       let type = null
+      let allTypes = ''
       let isPlugin = null
       state.mixProperties = []
+      state.mixPropertiesInner = {}
+      let mixPropertiesTemp = []
+      let mixPropertyInnerTemp = {}
       if (state.batchOptViews && JSON.stringify(state.batchOptViews) !== '{}') {
         for (const key in state.batchOptViews) {
-          if (state.mixProperties.length > 0) {
+          if (mixPropertiesTemp.length > 0) {
             // If it exists , taking the intersection
-            state.mixProperties = state.mixProperties.filter(property => state.batchOptViews[key].properties.indexOf(property) > -1)
+            mixPropertiesTemp = mixPropertiesTemp.filter(property => state.batchOptViews[key].properties.indexOf(property) > -1)
+            // 根据当前的mixPropertiesTemp 再对 mixPropertyInnerTemp 进行过滤
+            mixPropertiesTemp.forEach(propertyInnerItem => {
+              if (mixPropertyInnerTemp[propertyInnerItem] && state.batchOptViews[key].propertyInner[propertyInnerItem]) {
+                mixPropertyInnerTemp[propertyInnerItem] = mixPropertyInnerTemp[propertyInnerItem].filter(propertyInnerItemValue => state.batchOptViews[key].propertyInner[propertyInnerItem].indexOf(propertyInnerItemValue) > -1)
+              }
+            })
           } else {
             // If it doesn't exist, assignment directly
-            state.mixProperties = deepCopy(state.batchOptViews[key].properties)
+            mixPropertiesTemp = deepCopy(state.batchOptViews[key].properties)
+            mixPropertyInnerTemp = deepCopy(state.batchOptViews[key].propertyInner)
           }
 
           if (render && render !== state.batchOptViews[key].render) {
@@ -588,6 +591,7 @@ const data = {
             render = state.batchOptViews[key].render
           }
 
+          allTypes = allTypes + '-' + state.batchOptViews[key].value
           if (type && type !== state.batchOptViews[key].value) {
             type = 'mix'
           } else {
@@ -600,6 +604,16 @@ const data = {
             isPlugin = state.batchOptViews[key].isPlugin
           }
         }
+        mixPropertiesTemp.forEach(property => {
+          if (mixPropertyInnerTemp[property] && mixPropertyInnerTemp[property].length) {
+            state.mixPropertiesInner[property] = mixPropertyInnerTemp[property]
+            state.mixProperties.push(property)
+          }
+        })
+
+        // if (type && type === 'mix') {
+        //   type = type + '-' + allTypes
+        // }
         // Assembly history settings 'customAttr' & 'customStyle'
         state.batchOptChartInfo = {
           'mode': 'batchOpt',
@@ -618,6 +632,7 @@ const data = {
       // Currently selected components
       state.curBatchOptComponents = []
       state.mixProperties = []
+      state.mixPropertyInnder = {}
       state.batchOptChartInfo = null
       state.batchOptViews = {}
       state.changeProperties = {
@@ -636,6 +651,7 @@ const data = {
       // Currently selected components
       state.curBatchOptComponents = []
       state.mixProperties = []
+      state.mixPropertyInnder = {}
       state.batchOptChartInfo = null
       state.batchOptViews = {}
       state.changeProperties = {
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index 86e3662b45..13aa623460 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -38,7 +38,33 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'size-selector-ant-v',
       'title-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'tableHeaderBgColor',
+        'tableItemBgColor',
+        'tableFontColor',
+        'tableBorderColor',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'tableTitleFontSize',
+        'tableItemFontSize',
+        'tableHeaderAlign',
+        'tableItemAlign',
+        'tableTitleHeight',
+        'tableItemHeight',
+        'tableColumnMode'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -50,7 +76,35 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'size-selector-ant-v',
       'title-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'tableHeaderBgColor',
+        'tableItemBgColor',
+        'tableFontColor',
+        'tableBorderColor',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'tablePageMode',
+        'tablePageSize',
+        'tableTitleFontSize',
+        'tableItemFontSize',
+        'tableHeaderAlign',
+        'tableItemAlign',
+        'tableTitleHeight',
+        'tableItemHeight',
+        'tableColumnMode'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -63,7 +117,37 @@ export const TYPE_CONFIGS = [
       'size-selector-ant-v',
       'total-cfg',
       'title-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'tableHeaderBgColor',
+        'tableItemBgColor',
+        'tableFontColor',
+        'tableBorderColor',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'tableTitleFontSize',
+        'tableItemFontSize',
+        'tableHeaderAlign',
+        'tableItemAlign',
+        'tableTitleHeight',
+        'tableItemHeight',
+        'tableColumnMode'
+      ],
+      'total-cfg': [
+        'row',
+        'col'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -75,7 +159,27 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'size-selector-ant-v',
       'title-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'quotaColor',
+        'dimensionColor'
+      ],
+      'size-selector-ant-v': [
+        'quotaFontSize',
+        'dimensionShow',
+        'dimensionFontSize',
+        'spaceSplit'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -87,7 +191,27 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'size-selector-ant-v',
       'title-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'quotaColor',
+        'dimensionColor'
+      ],
+      'size-selector-ant-v': [
+        'quotaFontSize',
+        'dimensionShow',
+        'dimensionFontSize',
+        'spaceSplit'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -100,7 +224,31 @@ export const TYPE_CONFIGS = [
       'size-selector-ant-v',
       'label-selector-ant-v',
       'title-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'gaugeMax',
+        'gaugeStartAngle',
+        'gaugeEndAngle'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -113,7 +261,32 @@ export const TYPE_CONFIGS = [
       'size-selector-ant-v',
       'label-selector-ant-v',
       'title-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'liquidShape',
+        'liquidMax',
+        'liquidSize'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -130,7 +303,61 @@ export const TYPE_CONFIGS = [
       'y-axis-selector-ant-v',
       'title-selector-ant-v',
       'legend-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'lineWidth',
+        'lineSymbol',
+        'lineSymbolSize',
+        'lineSmooth'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'x-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'y-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -147,7 +374,61 @@ export const TYPE_CONFIGS = [
       'y-axis-selector-ant-v',
       'title-selector-ant-v',
       'legend-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'lineWidth',
+        'lineSymbol',
+        'lineSymbolSize',
+        'lineSmooth'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'x-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'y-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition'
+      ]
+    }
   },
 
   {
@@ -165,7 +446,60 @@ export const TYPE_CONFIGS = [
       'y-axis-selector-ant-v',
       'title-selector-ant-v',
       'legend-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'barDefault',
+        'barGap'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color',
+        'position'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'x-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'y-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -175,13 +509,67 @@ export const TYPE_CONFIGS = [
     icon: 'bar-stack',
     properties: [
       'color-selector',
+      'size-selector-ant-v',
       'label-selector-ant-v',
       'tooltip-selector-ant-v',
       'x-axis-selector-ant-v',
       'y-axis-selector-ant-v',
       'title-selector-ant-v',
       'legend-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'barDefault',
+        'barGap'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color',
+        'position'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'x-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'y-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -196,7 +584,49 @@ export const TYPE_CONFIGS = [
       'x-axis-selector-ant-v',
       'y-axis-selector-ant-v',
       'title-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color',
+        'position'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'x-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'y-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -213,7 +643,61 @@ export const TYPE_CONFIGS = [
       'y-axis-selector-ant-v',
       'title-selector-ant-v',
       'legend-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'barDefault',
+        'barGap'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color',
+        'position'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'x-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'axisValue',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'y-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -230,9 +714,63 @@ export const TYPE_CONFIGS = [
       'y-axis-selector-ant-v',
       'title-selector-ant-v',
       'legend-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'barDefault',
+        'barGap'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color',
+        'position'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'x-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'axisValue',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'y-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'axisValue',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition'
+      ]
+    }
   },
-
   {
     render: 'antv',
     category: 'chart.chart_type_distribute',
@@ -246,7 +784,42 @@ export const TYPE_CONFIGS = [
       'tooltip-selector-ant-v',
       'title-selector-ant-v',
       'legend-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'pieInnerRadius',
+        'pieOuterRadius'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color',
+        'position'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -261,7 +834,41 @@ export const TYPE_CONFIGS = [
       'tooltip-selector-ant-v',
       'title-selector-ant-v',
       'legend-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'pieInnerRadius',
+        'pieOuterRadius'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -277,7 +884,42 @@ export const TYPE_CONFIGS = [
       'split-selector-ant-v',
       'title-selector-ant-v',
       'legend-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'radarShape',
+        'radarSize'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color',
+        'position'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -291,7 +933,37 @@ export const TYPE_CONFIGS = [
       'tooltip-selector-ant-v',
       'title-selector-ant-v',
       'legend-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -303,7 +975,25 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'tooltip-selector-ant-v',
       'title-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
 
   {
@@ -321,7 +1011,59 @@ export const TYPE_CONFIGS = [
       'y-axis-selector-ant-v',
       'title-selector-ant-v',
       'legend-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'scatterSymbol',
+        'scatterSymbolSize'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'x-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'y-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition'
+      ]
+    }
   },
   {
     render: 'antv',
@@ -335,7 +1077,38 @@ export const TYPE_CONFIGS = [
       'tooltip-selector-ant-v',
       'title-selector-ant-v',
       'legend-selector-ant-v'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color',
+        'position'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition'
+      ]
+    }
   },
   /* 下面是echarts图表类型 */
   {
@@ -348,7 +1121,31 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'size-selector',
       'title-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'tableHeaderBgColor',
+        'tableItemBgColor',
+        'tableFontColor',
+        'alpha'
+      ],
+      'size-selector': [
+        'tableTitleFontSize',
+        'tableItemFontSize',
+        'tableTitleHeight',
+        'tableItemHeight',
+        'tableColumnMode'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
   {
     render: 'echarts',
@@ -360,6 +1157,33 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'size-selector',
       'title-selector'
+    ],
+    propertyInner: {
+      'color-selector': [
+        'tableHeaderBgColor',
+        'tableItemBgColor',
+        'tableFontColor',
+        'alpha'
+      ]
+    },
+    'size-selector': [
+      'tablePageMode',
+      'tablePageSize',
+      'tableTitleFontSize',
+      'tableItemFontSize',
+      'tableTitleHeight',
+      'tableItemHeight',
+      'tableColumnMode'
+    ],
+    'title-selector': [
+      'show',
+      'title',
+      'fontSize',
+      'color',
+      'hPosition',
+      'vPosition',
+      'isItalic',
+      'isBolder'
     ]
   },
 
@@ -373,7 +1197,29 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'size-selector',
       'title-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'quotaColor',
+        'dimensionColor'
+      ],
+      'size-selector': [
+        'quotaFontSize',
+        'dimensionShow',
+        'dimensionFontSize',
+        'spaceSplit'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
   {
     render: 'echarts',
@@ -385,7 +1231,28 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'size-selector',
       'title-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'quotaColor',
+        'dimensionColor'
+      ],
+      'size-selector': [
+        'quotaFontSize',
+        'dimensionShow',
+        'dimensionFontSize',
+        'spaceSplit'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
   {
     render: 'echarts',
@@ -397,8 +1264,38 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'size-selector',
       'label-selector',
-      'title-selector',
-    ]
+      'title-selector'
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'gaugeMin',
+        'gaugeMax',
+        'gaugeStartAngle',
+        'gaugeEndAngle'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'position',
+        'formatter',
+        'gaugeFormatter'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
 
   {
@@ -416,7 +1313,63 @@ export const TYPE_CONFIGS = [
       'y-axis-selector',
       'title-selector',
       'legend-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'lineWidth',
+        'lineSymbol',
+        'lineSymbolSize',
+        'lineSmooth'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'x-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'y-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
   },
   {
     render: 'echarts',
@@ -433,7 +1386,63 @@ export const TYPE_CONFIGS = [
       'y-axis-selector',
       'title-selector',
       'legend-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'lineWidth',
+        'lineSymbol',
+        'lineSymbolSize',
+        'lineSmooth'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'x-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'y-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
   },
   {
     render: 'echarts',
@@ -451,7 +1460,77 @@ export const TYPE_CONFIGS = [
       'y-axis-ext-selector',
       'title-selector',
       'legend-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'barDefault',
+        'barWidth',
+        'barGap',
+        'lineWidth',
+        'lineType',
+        'lineSymbol',
+        'lineSymbolSize',
+        'lineArea',
+        'bubble_scatterSymbol',
+        'bubble_scatterSymbolSize'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'position',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'x-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'y-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'y-ext-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
   },
 
   {
@@ -469,7 +1548,63 @@ export const TYPE_CONFIGS = [
       'y-axis-selector',
       'title-selector',
       'legend-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'barDefault',
+        'barWidth',
+        'barGap'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'position',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'x-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'y-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
   },
   {
     render: 'echarts',
@@ -486,7 +1621,63 @@ export const TYPE_CONFIGS = [
       'y-axis-selector',
       'title-selector',
       'legend-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'barDefault',
+        'barWidth',
+        'barGap'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'position',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'x-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'y-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
   },
   {
     render: 'echarts',
@@ -503,7 +1694,64 @@ export const TYPE_CONFIGS = [
       'y-axis-selector',
       'title-selector',
       'legend-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'barDefault',
+        'barWidth',
+        'barGap'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'position',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'x-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'axisValue',
+        'splitLine'
+      ],
+      'y-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
   },
   {
     render: 'echarts',
@@ -520,7 +1768,65 @@ export const TYPE_CONFIGS = [
       'y-axis-selector',
       'title-selector',
       'legend-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'barDefault',
+        'barWidth',
+        'barGap'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'position',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'x-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'axisValue',
+        'splitLine'
+      ],
+      'y-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'axisValue',
+        'splitLine'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
   },
 
   {
@@ -536,7 +1842,49 @@ export const TYPE_CONFIGS = [
       'tooltip-selector',
       'title-selector',
       'legend-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'pieInnerRadius',
+        'pieOuterRadius'
+      ],
+      'label-selector': [
+        'show',
+        'labelLine',
+        'fontSize',
+        'color',
+        'position',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
   },
   {
     render: 'echarts',
@@ -551,7 +1899,50 @@ export const TYPE_CONFIGS = [
       'tooltip-selector',
       'title-selector',
       'legend-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'pieInnerRadius',
+        'pieOuterRadius',
+        'pieRoseType',
+        'pieRoseRadius'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'position',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
   },
   {
     render: 'echarts',
@@ -567,7 +1958,55 @@ export const TYPE_CONFIGS = [
       'split-selector',
       'title-selector',
       'legend-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'radarShape',
+        'radarSize'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'position',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'split-selector': [
+        'name',
+        'axisLine',
+        'axisLabel',
+        'splitLine',
+        'splitArea'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
   },
   {
     render: 'echarts',
@@ -581,7 +2020,39 @@ export const TYPE_CONFIGS = [
       'label-selector',
       'tooltip-selector',
       'title-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'treemapWidth',
+        'treemapHeight'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   },
 
   {
@@ -599,7 +2070,62 @@ export const TYPE_CONFIGS = [
       'y-axis-selector',
       'title-selector',
       'legend-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'scatterSymbol',
+        'scatterSymbolSize'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'position',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'x-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'y-axis-selector': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
   },
   {
     render: 'echarts',
@@ -614,7 +2140,47 @@ export const TYPE_CONFIGS = [
       'tooltip-selector',
       'title-selector',
       'legend-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+        'funnelWidth'
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'position',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ],
+      'legend-selector': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
   },
 
   {
@@ -629,7 +2195,39 @@ export const TYPE_CONFIGS = [
       'label-selector',
       'tooltip-selector',
       'title-selector'
-    ]
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'alpha'
+      ],
+      'size-selector': [
+
+      ],
+      'label-selector': [
+        'show',
+        'fontSize',
+        'color',
+        'position',
+        'formatter'
+      ],
+      'tooltip-selector': [
+        'show',
+        'trigger',
+        'textStyle',
+        'formatter'
+      ],
+      'title-selector': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'vPosition',
+        'isItalic',
+        'isBolder'
+      ]
+    }
   }
 ]
 
diff --git a/frontend/src/views/chart/components/component-style/LegendSelector.vue b/frontend/src/views/chart/components/component-style/LegendSelector.vue
index 87d475e4cb..924acb2d48 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
@@ -2,12 +2,12 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item  v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="legendForm.show" @change="changeLegendStyle('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <div v-show="legendForm.show">
-          <el-form-item :label="$t('chart.icon')" class="form-item">
-            <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
+        <div v-show="showProperty('show') && legendForm.show">
+          <el-form-item  v-show="showProperty('icon')" :label="$t('chart.icon')" class="form-item">
+            <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle('icon')">
               <el-option
                 v-for="item in iconSymbolOptions"
                 :key="item.value"
@@ -16,29 +16,29 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.orient')" class="form-item">
-            <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
+          <el-form-item  v-show="showProperty('orient')" :label="$t('chart.orient')" class="form-item">
+            <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle('orient')">
               <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
               <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
+          <el-form-item  v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle('textStyle')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
+          <el-form-item  v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle('textStyle')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.text_h_position')" class="form-item">
-            <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
+          <el-form-item  v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
+            <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle('hPosition')">
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_v_position')" class="form-item">
-            <el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
+          <el-form-item  v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
+            <el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle('vPosition')">
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
@@ -63,6 +63,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -117,11 +124,15 @@ export default {
       }
       this.fontSize = arr
     },
-    changeLegendStyle() {
+    changeLegendStyle(modifyName) {
       if (!this.legendForm.show) {
         this.isSetting = false
       }
+      this.legendForm['modifyName'] = modifyName
       this.$emit('onLegendChange', this.legendForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue b/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
index 12ceb1d4ae..642f42c542 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
@@ -2,12 +2,12 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="legendForm.show" @change="changeLegendStyle('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="legendForm.show">
-          <el-form-item :label="$t('chart.icon')" class="form-item">
-            <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
+          <el-form-item v-show="showProperty('icon')" :label="$t('chart.icon')" class="form-item">
+            <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle('icon')">
               <el-option
                 v-for="item in iconSymbolOptions"
                 :key="item.value"
@@ -16,29 +16,29 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.orient')" class="form-item">
-            <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
+          <el-form-item v-show="showProperty('orient')" :label="$t('chart.orient')" class="form-item">
+            <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle('orient')">
               <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
               <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
+          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle('textStyle')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
+          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle('textStyle')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.text_h_position')" class="form-item">
-            <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
+          <el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
+            <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle('hPosition')">
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button :disabled="legendForm.vPosition === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_v_position')" class="form-item">
-            <el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
+          <el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
+            <el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle('vPosition')">
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
               <el-radio-button :disabled="legendForm.hPosition === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
@@ -63,6 +63,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -115,11 +122,15 @@ export default {
       }
       this.fontSize = arr
     },
-    changeLegendStyle() {
+    changeLegendStyle(modifyName) {
       if (!this.legendForm.show) {
         this.isSetting = false
       }
+      this.legendForm['modifyName'] = modifyName
       this.$emit('onLegendChange', this.legendForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/component-style/SplitSelector.vue b/frontend/src/views/chart/components/component-style/SplitSelector.vue
index 12055a69d6..446eb5a783 100644
--- a/frontend/src/views/chart/components/component-style/SplitSelector.vue
+++ b/frontend/src/views/chart/components/component-style/SplitSelector.vue
@@ -2,42 +2,42 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.name')" class="form-item">
-          <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
+          <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle('name')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item :label="$t('chart.color')" class="form-item">
-          <el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
+        <el-form-item v-show="showProperty('name')" :label="$t('chart.color')" class="form-item">
+          <el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('name')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
-          <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
+        <el-form-item v-show="showProperty('name')" :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
+          <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle('name')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.axis_line')" class="form-item">
-          <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('axisLine')" :label="$t('chart.axis_line')" class="form-item">
+          <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle('axisLine')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item :label="$t('chart.axis_color')" class="form-item">
-          <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
+        <el-form-item v-show="showProperty('axisLine')" :label="$t('chart.axis_color')" class="form-item">
+          <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLine')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.axis_label')" class="form-item">
-          <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label')" class="form-item">
+          <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle('axisLabel')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-          <el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
+        <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_color')" class="form-item">
+          <el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLabel')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
-          <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
+        <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
+          <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle('axisLabel')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.split_line')" class="form-item">
-          <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.split_line')" class="form-item">
+          <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle('splitLine')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item :label="$t('chart.split_color')" class="form-item">
-          <el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
+        <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.split_color')" class="form-item">
+          <el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('splitLine')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.shadow')" class="form-item">
-          <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('splitArea')" :label="$t('chart.shadow')" class="form-item">
+          <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle('splitArea')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
       </el-form>
     </el-col>
@@ -57,6 +57,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -105,11 +112,15 @@ export default {
       }
       this.fontSize = arr
     },
-    changeSplitStyle() {
+    changeSplitStyle(modifyName) {
       if (!this.splitForm.show) {
         this.isSetting = false
       }
+      this.splitForm['modifyName'] = modifyName
       this.$emit('onChangeSplitForm', this.splitForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue b/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
index 69ad6ae232..1494cdcc9d 100644
--- a/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
@@ -2,22 +2,22 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.name')" class="form-item">
-          <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
+          <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle('name')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item :label="$t('chart.color')" class="form-item">
-          <el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
+        <el-form-item v-show="showProperty('name')" :label="$t('chart.color')" class="form-item">
+          <el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('name')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
-          <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
+        <el-form-item v-show="showProperty('name')" :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
+          <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle('name')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
         <!--        <el-form-item :label="$t('chart.axis_line')" class="form-item">-->
         <!--          <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
         <!--        </el-form-item>-->
-        <el-form-item :label="$t('chart.axis_color')" class="form-item">
-          <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
+        <el-form-item v-show="showProperty('lineStyle')" :label="$t('chart.axis_color')" class="form-item">
+          <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLine')" />
         </el-form-item>
         <!--        <el-form-item :label="$t('chart.axis_label')" class="form-item">-->
         <!--          <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
@@ -57,6 +57,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -105,11 +112,15 @@ export default {
       }
       this.fontSize = arr
     },
-    changeSplitStyle() {
+    changeSplitStyle(modifyName) {
       if (!this.splitForm.show) {
         this.isSetting = false
       }
+      this.splitForm['modifyName'] = modifyName
       this.$emit('onChangeSplitForm', this.splitForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index 7afa56d139..e2132d11a8 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -2,45 +2,45 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="titleForm.show" @change="changeTitleStyle('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <div v-show="titleForm.show">
-          <el-form-item v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
+        <div v-show="showProperty('show') && titleForm.show">
+          <el-form-item v-show="showProperty('title')" v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
             <el-input
               v-model="titleForm.title"
               size="mini"
               :placeholder="$t('chart.title')"
               clearable
-              @blur="changeTitleStyle"
+              @blur="changeTitleStyle('title')"
               @input="inputOnInput($event)"
             />
           </el-form-item>
-          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
+          <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
+          <el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('color')" />
           </el-form-item>
-          <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
-            <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
+          <el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
+            <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle('hPosition')">
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="chart.type && !chart.type.includes('table') && chart.type !== 'liquid' && !chart.type.includes('text')" :label="$t('chart.text_v_position')" class="form-item">
-            <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
+          <el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
+            <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle('vPosition')">
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_style')" class="form-item">
-            <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
-            <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
+          <el-form-item v-show="showProperty('isItalic') || showProperty('isBolder')" :label="$t('chart.text_style')" class="form-item">
+            <el-checkbox v-show="showProperty('isItalic')" v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
+            <el-checkbox v-show="showProperty('isBolder')" v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
           </el-form-item>
         </div>
       </el-form>
@@ -63,6 +63,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -117,7 +124,7 @@ export default {
       }
       this.fontSize = arr
     },
-    changeTitleStyle() {
+    changeTitleStyle(modifyName) {
       if (!this.batchOptStatus) {
         if (this.titleForm.title.length < 1) {
           this.$error(this.$t('chart.title_cannot_empty'))
@@ -133,10 +140,14 @@ export default {
       if (!this.titleForm.show) {
         this.isSetting = false
       }
+      this.titleForm['modifyName'] = modifyName
       this.$emit('onTextChange', this.titleForm)
     },
     inputOnInput: function(e) {
       this.$forceUpdate()
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
index 6d0d320d64..47c0119534 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
@@ -2,38 +2,38 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
+         <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="titleForm.show" @change="changeTitleStyle('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <div v-show="titleForm.show">
-          <el-form-item v-if="!this.batchOptStatus" :label="$t('chart.title')" class="form-item">
+        <div v-show="showProperty('show') && titleForm.show">
+           <el-form-item v-show="showProperty('title')" v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
             <el-input
               v-model="titleForm.title"
               size="mini"
               :placeholder="$t('chart.title')"
               clearable
-              @blur="changeTitleStyle"
+              @blur="changeTitleStyle('title')"
               @input="inputOnInput($event)"
             />
           </el-form-item>
-          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
+           <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
+           <el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('fontSize')" />
           </el-form-item>
-          <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
-            <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
+           <el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
+            <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle('hPosition')">
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_style')" class="form-item">
-            <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
-            <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
+           <el-form-item v-show="showProperty('isItalic') || showProperty('isBolder') " :label="$t('chart.text_style')" class="form-item">
+            <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
+            <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
           </el-form-item>
         </div>
       </el-form>
@@ -56,6 +56,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -110,7 +117,7 @@ export default {
       }
       this.fontSize = arr
     },
-    changeTitleStyle() {
+    changeTitleStyle(modifyName) {
       if (!this.batchOptStatus) {
         if (this.titleForm.title.length < 1) {
           this.$error(this.$t('chart.title_cannot_empty'))
@@ -123,10 +130,14 @@ export default {
           return
         }
       }
+      this.titleForm['modifyName'] = modifyName
       this.$emit('onTextChange', this.titleForm)
     },
     inputOnInput: function(e) {
       this.$forceUpdate()
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index e47a232526..07c4f5e6d7 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -2,28 +2,28 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="axisForm.show">
-          <el-form-item :label="$t('chart.position')" class="form-item">
-            <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
+          <el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
+            <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle('position')">
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
               <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.name')" class="form-item">
-            <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
+          <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
+            <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle('name')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
+          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle('nameTextStyle')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
-            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
+          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
+            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle('nameTextStyle')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <span v-show="chart.type && chart.type.includes('horizontal')">
+          <span v-show="showProperty('axisValue')">
             <el-divider />
             <el-form-item class="form-item">
               <span slot="label">
@@ -39,33 +39,33 @@
                   </el-tooltip>
                 </span>
               </span>
-              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
+              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
             </el-form-item>
             <span v-show="!axisForm.axisValue.auto">
               <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
-                <el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle" />
+                <el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle('axisValue')" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
-                <el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle" />
+                <el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle('axisValue')" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_value_split')" class="form-item">
-                <el-input v-model="axisForm.axisValue.split" @blur="changeXAxisStyle" />
+                <el-input v-model="axisForm.axisValue.split" @blur="changeXAxisStyle('axisValue')" />
               </el-form-item>
             </span>
           </span>
           <el-divider />
-          <el-form-item :label="$t('chart.axis_show')" class="form-item">
-            <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+          <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
+            <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
-          <span v-show="axisForm.splitLine.show">
+          <span v-show="showProperty('splitLine') && axisForm.splitLine.show">
             <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('splitLine')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
+              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle('splitLine')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_type')" class="form-item">
-              <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">
+              <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle('splitLine')">
                 <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
                 <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
                 <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
@@ -73,25 +73,25 @@
             </el-form-item>
           </span>
           <el-divider />
-          <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
-            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
+            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
-          <span v-show="axisForm.axisLabel.show">
+          <span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
             <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('axisLabel')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
+              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle('axisLabel')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
-              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
+              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle('axisLabel')">
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
           </span>
-          <el-divider />
-          <el-form-item :label="$t('chart.content_formatter')" class="form-item">
-            <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
+          <el-divider v-show="showProperty('axisLabel')" />
+          <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
+            <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle('')" />
           </el-form-item>
         </div>
       </el-form>
@@ -112,6 +112,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -167,11 +174,15 @@ export default {
       }
       this.fontSize = arr
     },
-    changeXAxisStyle() {
+    changeXAxisStyle(modifyName) {
       if (!this.axisForm.show) {
         this.isSetting = false
       }
+      this.axisForm['modifyName'] = modifyName
       this.$emit('onChangeXAxisForm', this.axisForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue b/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
index 26a0e70bb4..c8361fe754 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
@@ -2,28 +2,28 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="axisForm.show">
-          <el-form-item :label="$t('chart.position')" class="form-item">
-            <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
+          <el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
+            <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle('position')">
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
               <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.name')" class="form-item">
-            <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
+          <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
+            <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle('name')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
+          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle('nameTextStyle')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
-            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
+          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
+            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle('nameTextStyle')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <span v-show="chart.type && chart.type.includes('horizontal')">
+          <span v-show="showProperty('axisValue')">
             <el-divider />
             <el-form-item class="form-item">
               <span slot="label">
@@ -39,45 +39,45 @@
                   </el-tooltip>
                 </span>
               </span>
-              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
+              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
             </el-form-item>
             <span v-show="!axisForm.axisValue.auto">
               <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
-                <el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle" />
+                <el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle('axisValue')" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
-                <el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle" />
+                <el-input @blur="changeXAxisStyle('axisValue')" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_value_split_count')" class="form-item">
-                <el-input v-model="axisForm.axisValue.splitCount" @blur="changeXAxisStyle" />
+                <el-input v-model="axisForm.axisValue.splitCount" @blur="changeXAxisStyle('axisValue')" />
               </el-form-item>
             </span>
           </span>
           <el-divider />
-          <el-form-item :label="$t('chart.axis_show')" class="form-item">
-            <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+          <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
+            <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
-          <span v-show="axisForm.splitLine.show">
+          <span v-show="showProperty('splitLine') && axisForm.splitLine.show">
             <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('splitLine')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
+              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle('splitLine')" />
             </el-form-item>
           </span>
           <el-divider />
-          <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
-            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          <el-form-item v-show="showProperty('axisForm')" :label="$t('chart.axis_label_show')" class="form-item">
+            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
-          <span v-show="axisForm.axisLabel.show">
+          <span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
             <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
+              <el-color-picker class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('axisLabel')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
+              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle('axisLabel')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
-              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
+              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle('axisLabel')">
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
@@ -101,6 +101,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -156,7 +163,7 @@ export default {
       }
       this.fontSize = arr
     },
-    changeXAxisStyle() {
+    changeXAxisStyle(modifyName) {
       if (!this.axisForm.show) {
         this.isSetting = false
       }
@@ -167,8 +174,13 @@ export default {
         })
         return
       }
+      this.axisForm['modifyName'] = modifyName
       this.$emit('onChangeXAxisForm', this.axisForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
+
   }
 }
 </script>
diff --git a/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
index 8d8e3564d8..07cf585398 100644
--- a/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
@@ -2,30 +2,30 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('show')"  :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <div v-show="axisForm.show">
-          <el-form-item :label="$t('chart.position')" class="form-item">
-            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
+        <div v-show="showProperty('show') && axisForm.show">
+          <el-form-item   :label="$t('chart.position')" class="form-item">
+            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
           <el-form-item :label="$t('chart.name')" class="form-item">
-            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
+            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
+          <el-form-item  :label="$t('chart.axis_name_color')" class="form-item">
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
-            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
+          <el-form-item v-show="showProperty('nameTextStyle')"  :label="$t('chart.axis_name_fontsize')" class="form-item">
+            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <span v-show="chart.type && !chart.type.includes('horizontal')">
+          <span v-show="showProperty('axisValue')">
             <el-divider />
-            <el-form-item class="form-item">
+            <el-form-item  class="form-item">
               <span slot="label">
                 <span class="span-box">
                   <span>{{ $t('chart.axis_value') }}</span>
@@ -39,59 +39,59 @@
                   </el-tooltip>
                 </span>
               </span>
-              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
+              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
             </el-form-item>
             <span v-show="!axisForm.axisValue.auto">
-              <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
-                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
+              <el-form-item  :label="$t('chart.axis_value_min')" class="form-item">
+                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
               </el-form-item>
-              <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
-                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
+              <el-form-item  :label="$t('chart.axis_value_max')" class="form-item">
+                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
               </el-form-item>
-              <el-form-item :label="$t('chart.axis_value_split')" class="form-item">
-                <el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle" />
+              <el-form-item  :label="$t('chart.axis_value_split')" class="form-item">
+                <el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle('axisValue')" />
               </el-form-item>
             </span>
           </span>
-          <el-divider />
-          <el-form-item :label="$t('chart.axis_show')" class="form-item">
-            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+          <el-divider v-show="showProperty('splitLine')"   />
+          <el-form-item v-show="showProperty('splitLine')"  :label="$t('chart.axis_show')" class="form-item">
+            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="axisForm.splitLine.show">
-            <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
+            <el-form-item v-show="showProperty('splitLine')"  :label="$t('chart.axis_color')" class="form-item">
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
+            <el-form-item v-show="showProperty('splitLine')"  :label="$t('chart.axis_width')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_type')" class="form-item">
-              <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
+            <el-form-item v-show="showProperty('splitLine')"  :label="$t('chart.axis_type')" class="form-item">
+              <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle('splitLine')">
                 <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
                 <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
                 <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
               </el-radio-group>
             </el-form-item>
           </span>
-          <el-divider />
-          <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
-            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          <el-divider v-show="showProperty('axisLabel')" />
+          <el-form-item v-show="showProperty('axisLabel')"  :label="$t('chart.axis_label_show')" class="form-item">
+            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
-          <span v-show="axisForm.axisLabel.show">
-            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
+          <span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
+            <el-form-item  :label="$t('chart.axis_label_color')" class="form-item">
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
+              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
-              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
+            <el-form-item  :label="$t('chart.axis_label_fontsize')" class="form-item">
+              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
           </span>
-          <el-divider />
-          <el-form-item :label="$t('chart.content_formatter')" class="form-item">
-            <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
+          <el-divider v-show="showProperty('axisLabel')" />
+          <el-form-item v-show="showProperty('axisLabel')"  :label="$t('chart.content_formatter')" class="form-item">
+            <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle('axisLabel')" />
           </el-form-item>
         </div>
       </el-form>
@@ -112,6 +112,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -170,11 +177,15 @@ export default {
       }
       this.fontSize = arr
     },
-    changeYAxisStyle() {
+    changeYAxisStyle(modifyName) {
       if (!this.axisForm.show) {
         this.isSetting = false
       }
+      this.axisForm['modifyName'] = modifyName
       this.$emit('onChangeYAxisForm', this.axisForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue b/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
index 602f3173b5..dd7a67f486 100644
--- a/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
@@ -2,28 +2,28 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="axisForm.show">
-          <el-form-item :label="$t('chart.position')" class="form-item">
-            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
+          <el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
+            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.name')" class="form-item">
-            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
+          <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
+            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
+          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
-            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
+          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
+            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <span v-show="chart.type && !chart.type.includes('horizontal')">
+          <span v-show="showProperty('axisValue')">
             <el-divider />
             <el-form-item class="form-item">
               <span slot="label">
@@ -39,45 +39,45 @@
                   </el-tooltip>
                 </span>
               </span>
-              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
+              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
             </el-form-item>
             <span v-show="!axisForm.axisValue.auto">
               <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
-                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
+                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
-                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
+                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_value_split_count')" class="form-item">
-                <el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle" />
+                <el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle('axisValue')" />
               </el-form-item>
             </span>
           </span>
           <el-divider />
-          <el-form-item :label="$t('chart.axis_show')" class="form-item">
-            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+          <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
+            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
-          <span v-show="axisForm.splitLine.show">
+          <span v-show="showProperty('splitLine') && axisForm.splitLine.show">
             <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
+              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('lineStyle')" />
             </el-form-item>
           </span>
           <el-divider />
-          <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
-            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
+            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
-          <span v-show="axisForm.axisLabel.show">
+          <span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
             <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
+              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
-              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
+              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
@@ -101,6 +101,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -159,7 +166,7 @@ export default {
       }
       this.fontSize = arr
     },
-    changeYAxisStyle() {
+    changeYAxisStyle(modifyName) {
       if (!this.axisForm.show) {
         this.isSetting = false
       }
@@ -170,7 +177,11 @@ export default {
         })
         return
       }
+      this.axisForm['modifyName'] = modifyName
       this.$emit('onChangeYAxisForm', this.axisForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
index 9530e3ad09..122643654f 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -2,28 +2,28 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <div v-show="axisForm.show">
-          <el-form-item :label="$t('chart.position')" class="form-item">
-            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
+        <div v-show="showProperty('show') && axisForm.show">
+          <el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
+            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.name')" class="form-item">
-            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
+          <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
+            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
+          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
-            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
+          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
+            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <span v-show="chart.type && !chart.type.includes('horizontal')">
+          <span v-show="showProperty('axisValue')">
             <el-divider />
             <el-form-item class="form-item">
               <span slot="label">
@@ -39,59 +39,59 @@
                   </el-tooltip>
                 </span>
               </span>
-              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
+              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
             </el-form-item>
             <span v-show="!axisForm.axisValue.auto">
               <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
-                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
+                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
-                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
+                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_value_split')" class="form-item">
-                <el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle" />
+                <el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle('axisValue')" />
               </el-form-item>
             </span>
           </span>
           <el-divider />
-          <el-form-item :label="$t('chart.axis_show')" class="form-item">
-            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+          <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
+            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="axisForm.splitLine.show">
-            <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
+            <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_color')" class="form-item">
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
+            <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_width')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_type')" class="form-item">
-              <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
+            <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_type')" class="form-item">
+              <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle('splitLine')">
                 <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
                 <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
                 <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
               </el-radio-group>
             </el-form-item>
           </span>
-          <el-divider />
-          <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
-            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          <el-divider v-show="showProperty('axisLabel')" />
+          <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
+            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
           <span v-show="axisForm.axisLabel.show">
-            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
+            <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_color')" class="form-item">
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
+            <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
             </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
-              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
+            <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_fontsize')" class="form-item">
+              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
           </span>
-          <el-divider />
-          <el-form-item :label="$t('chart.content_formatter')" class="form-item">
-            <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
+          <el-divider v-show="showProperty('axisLabel')" />
+          <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
+            <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle('axisLabel')" />
           </el-form-item>
         </div>
       </el-form>
@@ -112,6 +112,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -167,11 +174,15 @@ export default {
       }
       this.fontSize = arr
     },
-    changeYAxisStyle() {
+    changeYAxisStyle(modifyName) {
       if (!this.axisForm.show) {
         this.isSetting = false
       }
+      this.axisForm['modifyName'] = modifyName
       this.$emit('onChangeYAxisForm', this.axisForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue b/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
index ae83346a3c..0ea4ec660d 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
@@ -2,28 +2,28 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="axisForm.show">
-          <el-form-item :label="$t('chart.position')" class="form-item">
-            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
+          <el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
+            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.name')" class="form-item">
-            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
+          <el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
+            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
+          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
           </el-form-item>
-          <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
-            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
+          <el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
+            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <span v-show="chart.type && !chart.type.includes('horizontal')">
+          <span v-show="showProperty('axisValue')">
             <el-divider />
             <el-form-item class="form-item">
               <span slot="label">
@@ -39,14 +39,14 @@
                   </el-tooltip>
                 </span>
               </span>
-              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
+              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
             </el-form-item>
             <span v-show="!axisForm.axisValue.auto">
               <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
-                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
+                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
-                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
+                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
               </el-form-item>
               <el-form-item class="form-item">
                 <span slot="label">
@@ -60,35 +60,35 @@
                     </el-tooltip>
                   </span>
                 </span>
-                <el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle" />
+                <el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle('axisValue')" />
               </el-form-item>
             </span>
           </span>
           <el-divider />
-          <el-form-item :label="$t('chart.axis_show')" class="form-item">
-            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+          <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
+            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
-          <span v-show="axisForm.splitLine.show">
+          <span v-show="showProperty('splitLine') && axisForm.splitLine.show">
             <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
+              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
             </el-form-item>
           </span>
           <el-divider />
-          <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
-            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
+            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
-          <span v-show="axisForm.axisLabel.show">
+          <span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
             <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
+              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
-              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
+              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
@@ -112,6 +112,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -167,7 +174,7 @@ export default {
       }
       this.fontSize = arr
     },
-    changeYAxisStyle() {
+    changeYAxisStyle(modifyName) {
       if (!this.axisForm.show) {
         this.isSetting = false
       }
@@ -178,7 +185,11 @@ export default {
         })
         return
       }
+      this.axisForm['modifyName'] = modifyName
       this.$emit('onChangeYAxisForm', this.axisForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 62cac156ee..08293c58b9 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -2,8 +2,8 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
-        <div v-if="sourceType==='view' || sourceType==='panelEchart'">
-          <el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label'" :label="$t('chart.color_case')" class="form-item">
+        <div>
+          <el-form-item v-show="showProperty('value')" :label="$t('chart.color_case')" class="form-item">
             <el-popover
               placement="bottom"
               width="400"
@@ -12,7 +12,7 @@
               <div style="padding: 6px 10px;">
                 <div>
                   <span class="color-label">{{ $t('chart.system_case') }}</span>
-                  <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption">
+                  <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption('value')">
                     <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
                       <div style="float: left">
                         <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
@@ -45,34 +45,34 @@
             </el-popover>
           </el-form-item>
 
-          <el-form-item v-show="(chart.type && (chart.type.includes('text') || chart.type === 'label')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
-            <el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
+          <el-form-item v-show="showProperty('quotaColor')" :label="$t('chart.quota_color')" class="form-item">
+            <el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('quotaColor')" />
           </el-form-item>
-          <el-form-item v-show="(chart.type && chart.type.includes('text') || chart.type === 'label') || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
-            <el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
+          <el-form-item v-show="showProperty('dimensionColor')" :label="$t('chart.dimension_color')" class="form-item">
+            <el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('dimensionColor')" />
           </el-form-item>
         </div>
-        <div v-if="sourceType==='view' || sourceType==='panelTable'">
-          <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
-            <el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
+        <div>
+          <el-form-item v-show="showProperty('tableHeaderBgColor')" :label="$t('chart.table_header_bg')" class="form-item">
+            <el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableHeaderBgColor')" />
           </el-form-item>
-          <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
-            <el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
+          <el-form-item v-show="showProperty('tableItemBgColor')" :label="$t('chart.table_item_bg')" class="form-item">
+            <el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableItemBgColor')" />
           </el-form-item>
-          <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
-            <el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
+          <el-form-item v-show="showProperty('tableFontColor')" :label="$t('chart.table_item_font_color')" class="form-item">
+            <el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableFontColor')" />
           </el-form-item>
-          <el-form-item v-show="(chart.render && chart.render === 'antv' && chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_border_color')" class="form-item">
-            <el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
+          <el-form-item v-show="showProperty('tableBorderColor')" :label="$t('chart.table_border_color')" class="form-item">
+            <el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableBorderColor')" />
           </el-form-item>
           <!--              暂时不支持该功能-->
           <!--              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
-          <!--                <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>-->
+          <!--                <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase('tableStripe')">{{ $t('chart.stripe') }}</el-checkbox>-->
           <!--              </el-form-item>-->
         </div>
 
-        <el-form-item v-show="chart.type && !chart.type.includes('text') && chart.type !== 'label'" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
-          <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
+        <el-form-item v-show="showProperty('alpha')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
+          <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase('alpha')" />
         </el-form-item>
       </el-form>
     </el-col>
@@ -93,6 +93,13 @@ export default {
       type: Object,
       required: true
     },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
+    },
     sourceType: {
       type: String,
       default: 'view',
@@ -206,7 +213,7 @@ export default {
     this.init()
   },
   methods: {
-    changeColorOption() {
+    changeColorOption(modifyName = 'value') {
       const that = this
       const items = this.colorCases.filter(ele => {
         return ele.value === that.colorForm.value
@@ -220,9 +227,12 @@ export default {
       this.customColor = this.colorForm.colors[0]
       this.colorIndex = 0
 
-      this.changeColorCase()
+      this.changeColorCase(modifyName)
     },
-    changeColorCase() {
+    changeColorCase(modifyName) {
+      this.colorForm['modifyName'] = modifyName
+      this.$emit('onColorChange', this.colorForm)
+      this.colorForm['modifyName'] = 'colors'
       this.$emit('onColorChange', this.colorForm)
       // this.customColor = null
       // this.colorIndex = 0
@@ -253,11 +263,16 @@ export default {
     },
     switchColorCase() {
       this.colorForm.colors[this.colorIndex] = this.customColor
+      this.colorForm['modifyName'] = 'value'
+      this.$emit('onColorChange', this.colorForm)
+      this.colorForm['modifyName'] = 'colors'
       this.$emit('onColorChange', this.colorForm)
     },
-
     resetCustomColor() {
       this.changeColorOption()
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index 9b1d2645bc..7724de194e 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -1,28 +1,28 @@
 <template>
   <div style="width: 100%;">
     <el-col>
-      <el-form v-show="chart.type && !chart.type.includes('gauge')" 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 ref="labelForm" :model="labelForm" label-width="80px" size="mini">
+        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="labelForm.show" @change="changeLabelAttr('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="labelForm.show">
-          <el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">
-            <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
+          <el-form-item v-show="showProperty('labelLine')" :label="$t('chart.pie_label_line_show')" class="form-item">
+            <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr('labelLine')">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
+          <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr('fontSize')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
+          <el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
           </el-form-item>
-          <el-form-item v-show="chart.type && chart.type !== 'liquid' && !chart.type.includes('line') && chart.type !== 'treemap' && chart.type !== 'map'" :label="$t('chart.label_position')" class="form-item">
-            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
+          <el-form-item v-show="showProperty('position')" :label="$t('chart.label_position')" class="form-item">
+            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
               <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <el-form-item v-show="chart.type && chart.type !== 'liquid'" class="form-item">
+          <el-form-item v-show="showProperty('formatter')" class="form-item">
             <span slot="label">
               <span class="span-box">
                 <span>{{ $t('chart.content_formatter') }}</span>
@@ -34,30 +34,16 @@
                 </el-tooltip>
               </span>
             </span>
-            <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
+            <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr('formatter')" />
           </el-form-item>
         </div>
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type.includes('gauge')" 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>
-        <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-          <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-          </el-select>
-        </el-form-item>
-        <el-form-item :label="$t('chart.text_color')" class="form-item">
-          <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
-        </el-form-item>
-        <el-form-item class="form-item">
+        <el-form-item v-show="showProperty('gaugeFormatter')" class="form-item">
           <span slot="label">
             <span class="span-box">
               <span>{{ $t('chart.content_formatter') }}</span>
             </span>
           </span>
-          <el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
+          <el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr('gaugeFormatter')" />
         </el-form-item>
       </el-form>
     </el-col>
@@ -77,6 +63,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -143,10 +136,11 @@ export default {
       }
       this.fontSize = arr
     },
-    changeLabelAttr() {
+    changeLabelAttr(modifyName) {
       if (!this.labelForm.show) {
         this.isSetting = false
       }
+      this.labelForm['modifyName'] = modifyName
       this.$emit('onLabelChange', this.labelForm)
     },
     initOptions() {
@@ -160,6 +154,9 @@ export default {
           this.labelPosition = this.labelPositionV
         }
       }
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
index e71bc008e6..cf1405838c 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
@@ -1,43 +1,26 @@
 <template>
   <div style="width: 100%;">
     <el-col>
-      <el-form v-show="chart.type && !chart.type.includes('gauge')" 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 ref="labelForm" :model="labelForm" label-width="80px" size="mini">
+        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="labelForm.show" @change="changeLabelAttr('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="labelForm.show">
-          <!--          <el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">-->
-          <!--            <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>-->
-          <!--          </el-form-item>-->
-          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
+          <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr('fontSize')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
+          <el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
           </el-form-item>
-          <el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose' && !chart.type.includes('line') && chart.type !== 'treemap' && !chart.type.includes('scatter')" :label="$t('chart.label_position')" class="form-item">
-            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
+          <el-form-item v-show="showProperty('position')" :label="$t('chart.label_position')" class="form-item">
+            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
               <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
         </div>
       </el-form>
-
-      <el-form v-show="chart.type && chart.type.includes('gauge')" 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>
-        <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-          <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
-            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-          </el-select>
-        </el-form-item>
-        <el-form-item :label="$t('chart.text_color')" class="form-item">
-          <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
-        </el-form-item>
-      </el-form>
     </el-col>
   </div>
 </template>
@@ -55,6 +38,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -121,10 +111,11 @@ export default {
       }
       this.fontSize = arr
     },
-    changeLabelAttr() {
+    changeLabelAttr(modifyName) {
       if (!this.labelForm.show) {
         this.isSetting = false
       }
+      this.labelForm['modifyName'] = modifyName
       this.$emit('onLabelChange', this.labelForm)
     },
     initOptions() {
@@ -138,6 +129,9 @@ export default {
           this.labelPosition = this.labelPositionV
         }
       }
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index aef968009d..ed7872ccfb 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -1,30 +1,31 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.adapt')" class="form-item">
-          <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
+      <el-form ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
+        <!--bar-begin-->
+        <el-form-item v-show="showProperty('barDefault')" :label="$t('chart.adapt')" class="form-item">
+          <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
         </el-form-item>
-        <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('barWidth')" :label="$t('chart.bar_width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase('barWidth')" />
         </el-form-item>
-        <el-form-item v-show="chart.type && chart.type !== 'bar-stack'" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('barGap')" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase('barGap')" />
         </el-form-item>
-      </el-form>
+        <!--bar-end-->
 
-      <el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
+        <!--line-begin-->
+        <el-form-item v-show="showProperty('lineWidth')" :label="$t('chart.line_width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase('lineWidth')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.line_type')" class="form-item">
-          <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('lineType')" :label="$t('chart.line_type')" class="form-item">
+          <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase('lineType')">
             <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
             <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item :label="$t('chart.line_symbol')" class="form-item">
-          <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('lineSymbol')" :label="$t('chart.line_symbol')" class="form-item">
+          <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
             <el-option
               v-for="item in lineSymbolOptions"
               :key="item.value"
@@ -33,65 +34,59 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item :label="$t('chart.line_smooth')" class="form-item">
-          <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
-        </el-form-item>
-        <!--        <el-form-item :label="$t('chart.line_area')" class="form-item">-->
-        <!--          <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
-        <!--        </el-form-item>-->
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('lineSmooth')" :label="$t('chart.line_smooth')" class="form-item">
+          <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase('lineSmooth')">{{ $t('chart.line_smooth') }}</el-checkbox>
         </el-form-item>
 
-        <span v-show="chart.type && chart.type.includes('pie-rose')">
-          <el-form-item :label="$t('chart.rose_type')" class="form-item">
-            <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">
+        <!--line-end-->
+        <!--pie-begin-->
+        <el-form-item v-show="showProperty('pieInnerRadius')" :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('pieInnerRadius')" />
+        </el-form-item>
+        <el-form-item v-show="showProperty('pieOuterRadius')" :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('pieOuterRadius')" />
+        </el-form-item>
+
+        <span v-show="showProperty('pieRoseType') || showProperty('pieRoseRadius') ">
+          <el-form-item v-show="showProperty('pieRoseType')" :label="$t('chart.rose_type')" class="form-item">
+            <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase('pieRoseType')">
               <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>
               <el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">
-            <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+          <el-form-item v-show="showProperty('pieRoseRadius')" :label="$t('chart.rose_radius')" class="form-item form-item-slider">
+            <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('pieRoseRadius')" />
           </el-form-item>
         </span>
-      </el-form>
+        <!--pie-end-->
+        <!--funnel-begin-->
 
-      <el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('funnelWidth')" :label="$t('chart.funnel_width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('funnelWidth')" />
         </el-form-item>
-      </el-form>
 
-      <el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.shape')" class="form-item">
-          <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
+        <!--funnel-end-->
+        <!--radar-begin-->
+        <el-form-item v-show="showProperty('radarShape')" :label="$t('chart.shape')" class="form-item">
+          <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase('radarShape')">
             <el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
             <el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.radarSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('radarSize')" :label="$t('chart.radar_size')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.radarSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('radarSize')" />
         </el-form-item>
-      </el-form>
+        <!--radar-end-->
+        <!--table-begin-->
 
-      <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
-        <el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_mode')" class="form-item">
-          <el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('tablePageMode')" :label="$t('chart.table_page_mode')" class="form-item">
+          <el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase('tablePageMode')">
             <el-option :label="$t('chart.page_mode_page')" value="page" />
             <el-option :label="$t('chart.page_mode_pull')" value="pull" />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="chart.type && chart.type === 'table-info' && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
-          <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('tablePageSize') && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
+          <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase('tablePageSize')">
             <el-option
               v-for="item in pageSizeOptions"
               :key="item.value"
@@ -100,64 +95,61 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
-          <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('tableTitleFontSize')" :label="$t('chart.table_title_fontsize')" class="form-item">
+          <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase('tableTitleFontSize')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.table_item_fontsize')" class="form-item">
-          <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('tableItemFontSize')" :label="$t('chart.table_item_fontsize')" class="form-item">
+          <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase('tableItemFontSize')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.table_title_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('tableTitleHeight')" :label="$t('chart.table_title_height')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableTitleHeight')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.table_item_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('tableItemHeight')" :label="$t('chart.table_item_height')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableItemHeight')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.table_column_width_config')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="1000" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('tableColumnWidth')" :label="$t('chart.table_column_width_config')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="1000" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableColumnWidth')" />
         </el-form-item>
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
-        <el-form-item :label="$t('chart.min')" class="form-item form-item-slider">
-          <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
+        <!--table-end-->
+        <!--gauge-begin-->
+        <el-form-item v-show="showProperty('gaugeMin')" :label="$t('chart.min')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase('gaugeMin')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
-          <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('gaugeMax')" :label="$t('chart.max')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase('gaugeMax')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('gaugeStartAngle')" :label="$t('chart.start_angle')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase('gaugeStartAngle')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('gaugeEndAngle')" :label="$t('chart.end_angle')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase('gaugeEndAngle')" />
         </el-form-item>
-      </el-form>
-
-      <el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
-        <el-form-item :label="$t('chart.quota_font_size')" class="form-item">
-          <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
+        <!--gauge-end-->
+        <!--text&label-end-->
+        <el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
+          <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="chart.type" :label="$t('chart.dimension_show')" class="form-item">
-          <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('dimensionShow')" :label="$t('chart.dimension_show')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase('dimensionShow')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="chart.type" :label="$t('chart.dimension_font_size')" class="form-item">
-          <el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('dimensionFontSize')" :label="$t('chart.dimension_font_size')" class="form-item">
+          <el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase('dimensionFontSize')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="chart.type" :label="$t('chart.space_split')" class="form-item">
-          <el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('spaceSplit')" :label="$t('chart.space_split')" class="form-item">
+          <el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase('spaceSplit')" />
         </el-form-item>
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type.includes('scatter')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
-          <el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
+        <!--text&label-end-->
+        <!--scatter-begin-->
+        <el-form-item v-show="showProperty('scatterSymbol')" :label="$t('chart.bubble_symbol')" class="form-item">
+          <el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('scatterSymbol')">
             <el-option
               v-for="item in lineSymbolOptions"
               :key="item.value"
@@ -166,43 +158,43 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('scatterSymbolSize')" :label="$t('chart.bubble_size')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase('scatterSymbolSize')" />
         </el-form-item>
-      </el-form>
 
-      <el-form v-show="chart.type && chart.type === 'treemap'" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        <!--scatter-end-->
+        <!--treemap-begin-->
+        <el-form-item v-show="showProperty('treemapWidth')" :label="$t('chart.width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('treemapWidth')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('treemapHeight')" :label="$t('chart.height')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('treemapHeight')" />
         </el-form-item>
-      </el-form>
+        <!--treemap-end-->
+        <!--chart-mix-end-->
 
-      <el-form v-show="chart.type && chart.type === 'chart-mix'" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
         <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_bar') }}</el-divider>
-        <el-form-item :label="$t('chart.adapt')" class="form-item">
-          <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
+        <el-form-item v-show="showProperty('barDefault')" :label="$t('chart.adapt')" class="form-item">
+          <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
         </el-form-item>
-        <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('barWidth')" :label="$t('chart.bar_width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase('barWidth')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('barGap')" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase('barGap')" />
         </el-form-item>
         <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_line') }}</el-divider>
-        <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('lineWidth')" :label="$t('chart.line_width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase('lineWidth')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.line_type')" class="form-item">
-          <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('lineType')" :label="$t('chart.line_type')" class="form-item">
+          <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase('lineType')">
             <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
             <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item :label="$t('chart.line_symbol')" class="form-item">
-          <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('lineSymbol')" :label="$t('chart.line_symbol')" class="form-item">
+          <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
             <el-option
               v-for="item in lineSymbolOptions"
               :key="item.value"
@@ -211,18 +203,12 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item :label="$t('chart.line_smooth')" class="form-item">
-          <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
-        </el-form-item>
-        <el-form-item :label="$t('chart.line_area')" class="form-item">
-          <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('lineArea')" :label="$t('chart.line_area')" class="form-item">
+          <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase('lineArea')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_scatter') }}</el-divider>
-        <el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
-          <el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('bubble_scatterSymbol')" :label="$t('chart.bubble_symbol')" class="form-item">
+          <el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('scatterSymbol')">
             <el-option
               v-for="item in lineSymbolOptions"
               :key="item.value"
@@ -231,14 +217,13 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('bubble_scatterSymbolSize')" :label="$t('chart.bubble_size')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase('scatterSymbolSize')" />
         </el-form-item>
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type === 'liquid'" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.liquid_shape')" class="form-item">
-          <el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase">
+        <!--chart-mix-end-->
+        <!--liquid-begin-->
+        <el-form-item v-show="showProperty('liquidShape')" :label="$t('chart.liquid_shape')" class="form-item">
+          <el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase('liquidShape')">
             <el-option
               v-for="item in liquidShapeOptions"
               :key="item.value"
@@ -247,24 +232,26 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.liquid_max')" class="form-item form-item-slider">
-          <el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('liquidMax')" :label="$t('chart.liquid_max')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase('liquidMax')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('liquidSize')" :label="$t('chart.radar_size')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase('liquidSize')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('liquidOutlineBorder')" :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase('liquidOutlineBorder')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('liquidOutlineDistance')" :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase('liquidOutlineDistance')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="10" :max="500" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('liquidWaveLength')" :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="10" :max="500" @change="changeBarSizeCase('liquidWaveLength')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="2" :max="10" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('liquidWaveCount')" :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="2" :max="10" @change="changeBarSizeCase('liquidWaveCount')" />
         </el-form-item>
+
+        <!--liquid-end-->
       </el-form>
     </el-col>
   </div>
@@ -282,6 +269,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -364,8 +358,12 @@ export default {
       }
       this.fontSize = arr
     },
-    changeBarSizeCase() {
+    changeBarSizeCase(modifyName) {
+      this.sizeForm['modifyName'] = modifyName
       this.$emit('onSizeChange', this.sizeForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index 6bde9cd971..57141bf676 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -1,30 +1,43 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form v-show="chart.type && (chart.type.includes('bar'))" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.adapt')" class="form-item">
-          <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
+      <el-form ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
+        <!--bar-begin-->
+        <el-form-item v-show="showProperty('adapt')" :label="$t('chart.adapt')" class="form-item">
+          <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
         </el-form-item>
-        <!--        <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">-->
-        <!--          <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />-->
-        <!--        </el-form-item>-->
-        <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
+        <el-form-item v-show="showProperty('barGap')" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
+          <el-slider
+            v-model="sizeForm.barGap"
+            :disabled="sizeForm.barDefault"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="5"
+            :step="0.1"
+            @change="changeBarSizeCase('barGap')"
+          />
         </el-form-item>
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
+        <!--bar-end-->
+        <!--line-begin-->
+        <el-form-item
+          v-show="showProperty('lineWidth')"
+          :label="$t('chart.line_width')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.lineWidth"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="10"
+            @change="changeBarSizeCase('lineWidth')"
+          />
         </el-form-item>
-        <!--        <el-form-item :label="$t('chart.line_type')" class="form-item">-->
-        <!--          <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">-->
-        <!--            <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>-->
-        <!--            <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>-->
-        <!--          </el-radio-group>-->
-        <!--        </el-form-item>-->
-        <el-form-item :label="$t('chart.line_symbol')" class="form-item">
-          <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('lineSymbol')" :label="$t('chart.line_symbol')" class="form-item">
+          <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
             <el-option
               v-for="item in lineSymbolOptions"
               :key="item.value"
@@ -33,62 +46,105 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
+        <el-form-item
+          v-show="showProperty('lineSymbolSize')"
+          :label="$t('chart.line_symbol_size')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.lineSymbolSize"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="20"
+            @change="changeBarSizeCase('lineSymbolSize')"
+          />
         </el-form-item>
-        <el-form-item :label="$t('chart.line_smooth')" class="form-item">
-          <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
+        <el-form-item v-show="showProperty('lineSmooth')" :label="$t('chart.line_smooth')" class="form-item">
+          <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase('lineSmooth')">{{ $t('chart.line_smooth') }}
+          </el-checkbox>
         </el-form-item>
-      </el-form>
+        <!--line-end-->
 
-      <el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.pie_inner_radius_percent')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        <!--pie-begin-->
+        <el-form-item
+          v-show="showProperty('pieInnerRadius')"
+          :label="$t('chart.pie_inner_radius_percent')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.pieInnerRadius"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="100"
+            @change="changeBarSizeCase('pieInnerRadius')"
+          />
         </el-form-item>
-        <el-form-item :label="$t('chart.pie_outer_radius_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        <el-form-item
+          v-show="showProperty('pieOuterRadius')"
+          :label="$t('chart.pie_outer_radius_size')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.pieOuterRadius"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="100"
+            @change="changeBarSizeCase('pieOuterRadius')"
+          />
         </el-form-item>
-
-        <!--        <span v-show="chart.type && chart.type.includes('pie-rose')">-->
-        <!--          <el-form-item :label="$t('chart.rose_type')" class="form-item">-->
-        <!--            <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">-->
-        <!--              <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>-->
-        <!--              <el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>-->
-        <!--            </el-radio-group>-->
-        <!--          </el-form-item>-->
-        <!--          <el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">-->
-        <!--            <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
-        <!--          </el-form-item>-->
-        <!--        </span>-->
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
-        <!--        <el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">-->
-        <!--          <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
-        <!--        </el-form-item>-->
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.shape')" class="form-item">
-          <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
+        <!--pie-end-->
+        <!--radar-begin-->
+        <el-form-item v-show="showProperty('radarShape')" :label="$t('chart.shape')" class="form-item">
+          <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase('radarShape')">
             <el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
             <el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.radarSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        <el-form-item
+          v-show="showProperty('radarSize')"
+          :label="$t('chart.radar_size')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.radarSize"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="0"
+            :max="100"
+            @change="changeBarSizeCase('radarSize')"
+          />
         </el-form-item>
-      </el-form>
+        <!--radar-end-->
+        <!--table-begin-->
 
-      <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
-        <el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_mode')" class="form-item">
-          <el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('tablePageMode')" label-width="100px" :label="$t('chart.table_page_mode')" class="form-item">
+          <el-select
+            v-model="sizeForm.tablePageMode"
+            :placeholder="$t('chart.table_page_mode')"
+            @change="changeBarSizeCase('tablePageMode')"
+          >
             <el-option :label="$t('chart.page_mode_page')" value="page" />
             <el-option :label="$t('chart.page_mode_pull')" value="pull" />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="chart.type && chart.type === 'table-info' && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
-          <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
+        <el-form-item
+          v-show="showProperty('tablePageSize')&&sizeForm.tablePageMode === 'page'"
+          label-width="100px"
+          :label="$t('chart.table_page_size')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.tablePageSize"
+            :placeholder="$t('chart.table_page_size')"
+            @change="changeBarSizeCase('tablePageSize')"
+          >
             <el-option
               v-for="item in pageSizeOptions"
               :key="item.value"
@@ -97,34 +153,96 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
-          <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
+        <el-form-item
+          v-show="showProperty('tableTitleFontSize')"
+          label-width="100px"
+          :label="$t('chart.table_title_fontsize')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.tableTitleFontSize"
+            :placeholder="$t('chart.table_title_fontsize')"
+            @change="changeBarSizeCase('tableTitleFontSize')"
+          >
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.table_item_fontsize')" class="form-item">
-          <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
+        <el-form-item
+          v-show="showProperty('tableItemFontSize')"
+          label-width="100px"
+          :label="$t('chart.table_item_fontsize')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.tableItemFontSize"
+            :placeholder="$t('chart.table_item_fontsize')"
+            @change="changeBarSizeCase('tableItemFontSize')"
+          >
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.table_header_align')" class="form-item">
-          <el-select v-model="sizeForm.tableHeaderAlign" :placeholder="$t('chart.table_header_align')" @change="changeBarSizeCase">
+        <el-form-item
+          v-show="showProperty('tableHeaderAlign')"
+          label-width="100px"
+          :label="$t('chart.table_header_align')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.tableHeaderAlign"
+            :placeholder="$t('chart.table_header_align')"
+            @change="changeBarSizeCase('tableHeaderAlign')"
+          >
             <el-option v-for="option in alignOptions" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.table_item_align')" class="form-item">
-          <el-select v-model="sizeForm.tableItemAlign" :placeholder="$t('chart.table_item_align')" @change="changeBarSizeCase">
+        <el-form-item v-show="showProperty('tableItemAlign')" label-width="100px" :label="$t('chart.table_item_align')" class="form-item">
+          <el-select
+            v-model="sizeForm.tableItemAlign"
+            :placeholder="$t('chart.table_item_align')"
+            @change="changeBarSizeCase('tableItemAlign')"
+          >
             <el-option v-for="option in alignOptions" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.table_title_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableTitleHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        <el-form-item
+          v-show="showProperty('tableTitleHeight')"
+          label-width="100px"
+          :label="$t('chart.table_title_height')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.tableTitleHeight"
+            :min="20"
+            :max="100"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeBarSizeCase('tableTitleHeight')"
+          />
         </el-form-item>
-        <el-form-item :label="$t('chart.table_item_height')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableItemHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        <el-form-item
+          v-show="showProperty('tableItemHeight')"
+          label-width="100px"
+          :label="$t('chart.table_item_height')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.tableItemHeight"
+            :min="20"
+            :max="100"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeBarSizeCase('tableItemHeight')"
+          />
         </el-form-item>
-        <el-form-item :label="$t('chart.table_column_width_config')" class="form-item">
-          <el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase">
+        <el-form-item
+          v-show="showProperty('tableColumnMode')"
+          label-width="100px"
+          :label="$t('chart.table_column_width_config')"
+          class="form-item"
+        >
+          <el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase('tableColumnMode')">
             <el-radio label="adapt"><span>{{ $t('chart.table_column_adapt') }}</span></el-radio>
             <el-radio label="custom">
               <span>{{ $t('chart.table_column_custom') }}</span>
@@ -139,48 +257,102 @@
             <i class="el-icon-info" style="cursor: pointer;color: #606266;margin-left: 4px;" />
           </el-tooltip>
         </el-form-item>
-        <el-form-item v-show="sizeForm.tableColumnMode === 'custom'" label="" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="500" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        <el-form-item
+          v-show="showProperty('tableColumnWidth') && sizeForm.tableColumnMode === 'custom'"
+          label=""
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.tableColumnWidth"
+            :min="10"
+            :max="500"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeBarSizeCase('tableColumnWidth')"
+          />
         </el-form-item>
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
-        <!--        <el-form-item :label="$t('chart.min')" class="form-item form-item-slider">-->
-        <!--          <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />-->
-        <!--        </el-form-item>-->
-        <el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
-          <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
+        <!--table-end-->
+        <!--gauge-begin-->
+        <el-form-item v-show="showProperty('gaugeMax')" :label="$t('chart.max')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase('gaugeMax')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
+        <el-form-item
+          v-show="showProperty('gaugeStartAngle')"
+          :label="$t('chart.start_angle')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.gaugeStartAngle"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="-360"
+            :max="360"
+            @change="changeBarSizeCase('gaugeStartAngle')"
+          />
         </el-form-item>
-        <el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
+        <el-form-item
+          v-show="showProperty('gaugeEndAngle')"
+          :label="$t('chart.end_angle')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.gaugeEndAngle"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="-360"
+            :max="360"
+            @change="changeBarSizeCase('gaugeEndAngle')"
+          />
         </el-form-item>
-      </el-form>
-
-      <el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
-        <el-form-item :label="$t('chart.quota_font_size')" class="form-item">
-          <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
+        <!--gauge-end-->
+        <!--text&label-end-->
+        <el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
+          <el-select
+            v-model="sizeForm.quotaFontSize"
+            :placeholder="$t('chart.quota_font_size')"
+            @change="changeBarSizeCase('quotaFontSize')"
+          >
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="chart.type" :label="$t('chart.dimension_show')" class="form-item">
-          <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item
+          v-show="showProperty('dimensionShow')"
+          :label="$t('chart.dimension_show')"
+          class="form-item"
+        >
+          <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase('dimensionShow')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item v-show="chart.type" :label="$t('chart.dimension_font_size')" class="form-item">
-          <el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
+        <el-form-item
+          v-show="showProperty('dimensionFontSize')"
+          :label="$t('chart.dimension_font_size')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.dimensionFontSize"
+            :placeholder="$t('chart.dimension_font_size')"
+            @change="changeBarSizeCase('dimensionFontSize')"
+          >
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="chart.type" :label="$t('chart.space_split')" class="form-item">
-          <el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase" />
+        <el-form-item
+          v-show="showProperty('spaceSplit')"
+          :label="$t('chart.space_split')"
+          class="form-item"
+        >
+          <el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase('spaceSplit')" />
         </el-form-item>
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type.includes('scatter')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
-          <el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
+        <!--text&label-end-->
+        <!--scatter-begin-->
+        <el-form-item v-show="showProperty('scatterSymbol')" :label="$t('chart.bubble_symbol')" class="form-item">
+          <el-select
+            v-model="sizeForm.scatterSymbol"
+            :placeholder="$t('chart.line_symbol')"
+            @change="changeBarSizeCase('scatterSymbol')"
+          >
             <el-option
               v-for="item in lineSymbolOptions"
               :key="item.value"
@@ -189,79 +361,25 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
+        <el-form-item
+          v-show="showProperty('scatterSymbolSize')"
+          :label="$t('chart.bubble_size')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.scatterSymbolSize"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="1"
+            :max="40"
+            @change="changeBarSizeCase('scatterSymbolSize')"
+          />
         </el-form-item>
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type === 'treemap'" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
-        <!--        <el-form-item :label="$t('chart.width')" class="form-item form-item-slider">-->
-        <!--          <el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
-        <!--        </el-form-item>-->
-        <!--        <el-form-item :label="$t('chart.height')" class="form-item form-item-slider">-->
-        <!--          <el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
-        <!--        </el-form-item>-->
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type === 'chart-mix'" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
-        <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_bar') }}</el-divider>
-        <el-form-item :label="$t('chart.adapt')" class="form-item">
-          <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
-        </el-form-item>
-        <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_line') }}</el-divider>
-        <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
-        </el-form-item>
-        <!--        <el-form-item :label="$t('chart.line_type')" class="form-item">-->
-        <!--          <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">-->
-        <!--            <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>-->
-        <!--            <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>-->
-        <!--          </el-radio-group>-->
-        <!--        </el-form-item>-->
-        <el-form-item :label="$t('chart.line_symbol')" class="form-item">
-          <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
-            <el-option
-              v-for="item in lineSymbolOptions"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item :label="$t('chart.line_smooth')" class="form-item">
-          <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
-        </el-form-item>
-        <!--        <el-form-item :label="$t('chart.line_area')" class="form-item">-->
-        <!--          <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
-        <!--        </el-form-item>-->
-        <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_scatter') }}</el-divider>
-        <el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
-          <el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
-            <el-option
-              v-for="item in lineSymbolOptions"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
-        </el-form-item>
-      </el-form>
-
-      <el-form v-show="chart.type && chart.type === 'liquid'" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.liquid_shape')" class="form-item">
-          <el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase">
+        <!--scatter-end-->
+        <!--liquid-begin-->
+        <el-form-item v-show="showProperty('liquidShape')" :label="$t('chart.liquid_shape')" class="form-item">
+          <el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase('liquidShape')">
             <el-option
               v-for="item in liquidShapeOptions"
               :key="item.value"
@@ -270,19 +388,45 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('chart.liquid_max')" class="form-item form-item-slider">
-          <el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase" />
+        <el-form-item
+          v-show="showProperty('liquidMax')"
+          :label="$t('chart.liquid_max')"
+          class="form-item form-item-slider"
+        >
+          <el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase('liquidMax')" />
         </el-form-item>
-        <el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase" />
+        <el-form-item
+          v-show="showProperty('liquidSize')"
+          :label="$t('chart.radar_size')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.liquidSize"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="1"
+            :max="100"
+            @change="changeBarSizeCase('liquidSize')"
+          />
+        </el-form-item>
+        <!--liquid-end-->
+        <el-form-item v-if="showProperty(symbolOpacity)" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.symbolOpacity" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
+        </el-form-item>
+
+        <el-form-item v-if="showProperty('symbolStrokeWidth') && sizeForm.scatterSymbol && sizeForm.scatterSymbol !== 'marker'" :label="$t('plugin_style.border')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.symbolStrokeWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" @change="changeBarSizeCase('symbolStrokeWidth')" />
         </el-form-item>
       </el-form>
+
     </el-col>
   </div>
 </template>
 
 <script>
 import { DEFAULT_SIZE } from '../../chart/chart'
+
 export default {
   name: 'SizeSelectorAntV',
   props: {
@@ -293,6 +437,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -382,46 +533,56 @@ export default {
       }
       this.fontSize = arr
     },
-    changeBarSizeCase() {
+    changeBarSizeCase(modifyName) {
+      this.sizeForm['modifyName'] = modifyName
       this.$emit('onSizeChange', this.sizeForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
 </script>
 
 <style scoped>
-.shape-item{
-  padding: 6px;
-  border: none;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.form-item-slider>>>.el-form-item__label{
-  font-size: 12px;
-  line-height: 38px;
-}
-.form-item>>>.el-form-item__label{
-  font-size: 12px;
-}
-.el-select-dropdown__item{
-  padding: 0 20px;
-}
-span{
-  font-size: 12px
-}
+  .shape-item {
+    padding: 6px;
+    border: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 
-.el-form-item{
-  margin-bottom: 6px;
-}
-.el-divider--horizontal {
-  margin: 10px 0
-}
-.divider-style>>>.el-divider__text{
-  color: #606266;
-  font-size: 12px;
-  font-weight: 400;
-  padding: 0 10px;
-}
+  .form-item-slider >>> .el-form-item__label {
+    font-size: 12px;
+    line-height: 38px;
+  }
+
+  .form-item >>> .el-form-item__label {
+    font-size: 12px;
+  }
+
+  .el-select-dropdown__item {
+    padding: 0 20px;
+  }
+
+  span {
+    font-size: 12px
+  }
+
+  .el-form-item {
+    margin-bottom: 6px;
+  }
+
+  .el-divider--horizontal {
+    margin: 10px 0
+  }
+
+  .divider-style >>> .el-divider__text {
+    color: #606266;
+    font-size: 12px;
+    font-weight: 400;
+    padding: 0 10px;
+  }
 </style>
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
index a66584501e..904c4f5626 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -2,25 +2,25 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="tooltipForm.show">
-          <el-form-item :label="$t('chart.trigger_position')" class="form-item">
-            <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
+          <el-form-item v-show="showProperty('trigger')" :label="$t('chart.trigger_position')" class="form-item">
+            <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr('trigger')">
               <el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
               <el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
+          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr('textStyle')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
+          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
           </el-form-item>
-          <el-form-item class="form-item">
+          <el-form-item v-show="showProperty('formatter')" class="form-item">
             <span slot="label">
               <span class="span-box">
                 <span>{{ $t('chart.content_formatter') }}</span>
@@ -44,7 +44,7 @@
                 </el-tooltip>
               </span>
             </span>
-            <el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
+            <el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr('formatter')" />
           </el-form-item>
         </div>
       </el-form>
@@ -65,6 +65,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -111,11 +118,15 @@ export default {
       }
       this.fontSize = arr
     },
-    changeTooltipAttr() {
+    changeTooltipAttr(modifyName) {
       if (!this.tooltipForm.show) {
         this.isSetting = false
       }
+      this.tooltipForm['modifyName'] = modifyName
       this.$emit('onTooltipChange', this.tooltipForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
index 914e2e639a..ffc51aab38 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
@@ -2,17 +2,17 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.show')" class="form-item">
-          <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr('show')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="tooltipForm.show">
-          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-            <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
+          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr('textStyle')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
+          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
           </el-form-item>
         </div>
       </el-form>
@@ -33,6 +33,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -79,11 +86,15 @@ export default {
       }
       this.fontSize = arr
     },
-    changeTooltipAttr() {
+    changeTooltipAttr(modifyName) {
       if (!this.tooltipForm.show) {
         this.isSetting = false
       }
+      this.tooltipForm['modifyName'] = modifyName
       this.$emit('onTooltipChange', this.tooltipForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/components/shape-attr/TotalCfg.vue b/frontend/src/views/chart/components/shape-attr/TotalCfg.vue
index e8f4cec72e..cd6b549103 100644
--- a/frontend/src/views/chart/components/shape-attr/TotalCfg.vue
+++ b/frontend/src/views/chart/components/shape-attr/TotalCfg.vue
@@ -2,28 +2,28 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="totalForm" :model="totalForm" label-width="80px" size="mini">
-        <el-divider content-position="center" class="divider-style">{{ $t('chart.row_cfg') }}</el-divider>
-        <el-form-item :label="$t('chart.total_show')" class="form-item">
-          <el-checkbox v-model="totalForm.row.showGrandTotals" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
+        <el-divider v-show="showProperty('row')" content-position="center" class="divider-style">{{ $t('chart.row_cfg') }}</el-divider>
+        <el-form-item v-show="showProperty('row')" :label="$t('chart.total_show')" class="form-item">
+          <el-checkbox v-model="totalForm.row.showGrandTotals" @change="changeTotalCfg('row')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <div v-show="totalForm.row.showGrandTotals">
+        <div v-show="showProperty('row') && totalForm.row.showGrandTotals">
           <el-form-item :label="$t('chart.total_position')" class="form-item">
-            <el-radio-group v-model="totalForm.row.reverseLayout" @change="changeTotalCfg">
+            <el-radio-group v-model="totalForm.row.reverseLayout" @change="changeTotalCfg('row')">
               <el-radio :label="true">{{ $t('chart.total_pos_top') }}</el-radio>
               <el-radio :label="false">{{ $t('chart.total_pos_bottom') }}</el-radio>
             </el-radio-group>
           </el-form-item>
           <el-form-item :label="$t('chart.total_label')" class="form-item">
-            <el-input v-model="totalForm.row.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
+            <el-input v-model="totalForm.row.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg('row')" />
           </el-form-item>
         </div>
 
-        <el-form-item :label="$t('chart.sub_total_show')" class="form-item">
-          <el-checkbox v-model="totalForm.row.showSubTotals" :disabled="rowNum < 2" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('row')" :label="$t('chart.sub_total_show')" class="form-item">
+          <el-checkbox v-model="totalForm.row.showSubTotals" :disabled="rowNum < 2" @change="changeTotalCfg('row')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <div v-show="totalForm.row.showSubTotals">
+        <div v-show="showProperty('row') && totalForm.row.showSubTotals">
           <el-form-item :label="$t('chart.total_position')" class="form-item">
-            <el-radio-group v-model="totalForm.row.reverseSubLayout" :disabled="rowNum < 2" @change="changeTotalCfg">
+            <el-radio-group v-model="totalForm.row.reverseSubLayout" :disabled="rowNum < 2" @change="changeTotalCfg('row')">
               <el-radio :label="true">{{ $t('chart.total_pos_top') }}</el-radio>
               <el-radio :label="false">{{ $t('chart.total_pos_bottom') }}</el-radio>
             </el-radio-group>
@@ -33,34 +33,34 @@
           </el-form-item>
         </div>
 
-        <el-divider content-position="center" class="divider-style">{{ $t('chart.col_cfg') }}</el-divider>
-        <el-form-item :label="$t('chart.total_show')" class="form-item">
-          <el-checkbox v-model="totalForm.col.showGrandTotals" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
+        <el-divider v-show="showProperty('col')" content-position="center" class="divider-style">{{ $t('chart.col_cfg') }}</el-divider>
+        <el-form-item v-show="showProperty('col')" :label="$t('chart.total_show')" class="form-item">
+          <el-checkbox v-model="totalForm.col.showGrandTotals" @change="changeTotalCfg('col')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <div v-show="totalForm.col.showGrandTotals">
+        <div v-show="showProperty('col') && totalForm.col.showGrandTotals">
           <el-form-item :label="$t('chart.total_position')" class="form-item">
-            <el-radio-group v-model="totalForm.col.reverseLayout" @change="changeTotalCfg">
+            <el-radio-group v-model="totalForm.col.reverseLayout" @change="changeTotalCfg('col')">
               <el-radio :label="true">{{ $t('chart.total_pos_left') }}</el-radio>
               <el-radio :label="false">{{ $t('chart.total_pos_right') }}</el-radio>
             </el-radio-group>
           </el-form-item>
           <el-form-item :label="$t('chart.total_label')" class="form-item">
-            <el-input v-model="totalForm.col.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
+            <el-input v-model="totalForm.col.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg('col')" />
           </el-form-item>
         </div>
 
-        <el-form-item :label="$t('chart.sub_total_show')" class="form-item">
-          <el-checkbox v-model="totalForm.col.showSubTotals" :disabled="colNum < 2" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
+        <el-form-item v-show="showProperty('col')" :label="$t('chart.sub_total_show')" class="form-item">
+          <el-checkbox v-model="totalForm.col.showSubTotals" :disabled="colNum < 2" @change="changeTotalCfg('col')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <div v-show="totalForm.col.showSubTotals">
+        <div v-show="showProperty('col') && totalForm.col.showSubTotals">
           <el-form-item :label="$t('chart.total_position')" class="form-item">
-            <el-radio-group v-model="totalForm.col.reverseSubLayout" :disabled="colNum < 2" @change="changeTotalCfg">
+            <el-radio-group v-model="totalForm.col.reverseSubLayout" :disabled="colNum < 2" @change="changeTotalCfg('col')">
               <el-radio :label="true">{{ $t('chart.total_pos_left') }}</el-radio>
               <el-radio :label="false">{{ $t('chart.total_pos_right') }}</el-radio>
             </el-radio-group>
           </el-form-item>
           <el-form-item :label="$t('chart.total_label')" class="form-item">
-            <el-input v-model="totalForm.col.subLabel" :disabled="colNum < 2" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
+            <el-input v-model="totalForm.col.subLabel" :disabled="colNum < 2" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg('col')" />
           </el-form-item>
         </div>
       </el-form>
@@ -77,6 +77,13 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
     }
   },
   data() {
@@ -139,8 +146,12 @@ export default {
         }
       }
     },
-    changeTotalCfg() {
+    changeTotalCfg(modifyName) {
+      this.totalForm['modifyName'] = modifyName
       this.$emit('onTotalCfgChange', this.totalForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
     }
   }
 }
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index f0f1952b0c..ab20dc0c1c 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -652,11 +652,12 @@
         </el-tab-pane>
         <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 300px">
           <chart-style
-            v-if="chartProperties"
+            v-if="chartProperties || view.isPlugin"
             :param="param"
             :view="view"
             :chart="chart"
             :properties="chartProperties"
+            :property-inner-all="chartPropertyInnerAll"
             @calcStyle="calcStyle"
             @onColorChange="onColorChange"
             @onSizeChange="onSizeChange"
@@ -1167,12 +1168,12 @@ export default {
     }
   },
   computed: {
-    chartProperties() {
+    chartConfig() {
       const _this = this
       if (_this.chart && _this.chart.render) {
         const viewConfig = this.allViewRender.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
         if (viewConfig && viewConfig.length) {
-          return viewConfig[0].properties
+          return viewConfig[0]
         } else {
           return null
         }
@@ -1180,6 +1181,12 @@ export default {
         return null
       }
     },
+    chartProperties() {
+      return this.chartConfig ? this.chartConfig.properties : null
+    },
+    chartPropertyInnerAll() {
+      return this.chartConfig ? this.chartConfig.propertyInner : null
+    },
     chartType() {
       return this.chart.type
     },
diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue
index 974e803a1f..35fa9389e7 100644
--- a/frontend/src/views/chart/view/ChartStyle.vue
+++ b/frontend/src/views/chart/view/ChartStyle.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row class="view-panel">
     <plugin-com
-      v-if="view.isPlugin"
+      v-if="pluginShow"
       style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
       class="attr-style theme-border-class"
       :component-name="view.type + '-style'"
@@ -29,22 +29,24 @@
       <el-row>
         <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
         <el-collapse v-model="attrActiveNames" class="style-collapse">
-          <el-collapse-item name="color" :title="$t('chart.color')">
+          <el-collapse-item name="color"  v-show="showPropertiesCollapse(['color-selector'])" :title="$t('chart.color')">
             <color-selector
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['color-selector']"
               @onColorChange="onColorChange($event,'color-selector')"
             />
           </el-collapse-item>
           <el-collapse-item
-            v-show="showPropertiesCollapse(['size-selector','no-mix'])"
+            v-show="showPropertiesCollapse(['size-selector'])"
             name="size"
             :title="$t('chart.size')"
           >
             <size-selector
               :param="param"
               class="attr-selector"
+              :property-inner="propertyInnerAll['size-selector']"
               :chart="chart"
               @onSizeChange="onSizeChange($event,'size-selector')"
             />
@@ -58,6 +60,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['size-selector-ant-v']"
               @onSizeChange="onSizeChange($event,'size-selector-ant-v')"
             />
           </el-collapse-item>
@@ -71,6 +74,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['label-selector']"
               @onLabelChange="onLabelChange($event,'label-selector')"
             />
             <label-selector-ant-v
@@ -78,6 +82,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['label-selector-ant-v']"
               @onLabelChange="onLabelChange($event,'label-selector-ant-v')"
             />
           </el-collapse-item>
@@ -91,6 +96,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['tooltip-selector']"
               @onTooltipChange="onTooltipChange($event,'tooltip-selector')"
             />
             <tooltip-selector-ant-v
@@ -98,6 +104,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['tooltip-selector-ant-v']"
               @onTooltipChange="onTooltipChange($event,'tooltip-selector-ant-v')"
             />
           </el-collapse-item>
@@ -110,6 +117,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['total-cfg']"
               @onTotalCfgChange="onTotalCfgChange($event,'total-cfg')"
             />
           </el-collapse-item>
@@ -128,6 +136,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['x-axis-selector']"
               @onChangeXAxisForm="onChangeXAxisForm($event,'x-axis-selector')"
             />
             <x-axis-selector-ant-v
@@ -135,6 +144,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['x-axis-selector-ant-v']"
               @onChangeXAxisForm="onChangeXAxisForm($event,'x-axis-selector-ant-v')"
             />
           </el-collapse-item>
@@ -148,6 +158,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['y-axis-selector']"
               @onChangeYAxisForm="onChangeYAxisForm($event,'y-axis-selector')"
             />
             <y-axis-selector-ant-v
@@ -155,6 +166,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['y-axis-selector-ant-v']"
               @onChangeYAxisForm="onChangeYAxisForm($event,'y-axis-selector-ant-v')"
             />
           </el-collapse-item>
@@ -168,6 +180,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['y-axis-ext-selector']"
               @onChangeYAxisForm="onChangeYAxisExtForm($event,'y-axis-ext-selector')"
             />
             <y-axis-ext-selector-ant-v
@@ -175,6 +188,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['y-axis-ext-selector-ant-v']"
               @onChangeYAxisForm="onChangeYAxisExtForm($event,'y-axis-ext-selector-ant-v')"
             />
           </el-collapse-item>
@@ -188,6 +202,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['split-selector']"
               @onChangeSplitForm="onChangeSplitForm($event,'split-selector')"
             />
             <split-selector-ant-v
@@ -195,6 +210,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['split-selector-ant-v']"
               @onChangeSplitForm="onChangeSplitForm($event,'split-selector-ant-v')"
             />
           </el-collapse-item>
@@ -204,6 +220,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['title-selector']"
               @onTextChange="onTextChange($event,'title-selector')"
             />
             <title-selector-ant-v
@@ -211,6 +228,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['title-selector-ant-v']"
               @onTextChange="onTextChange($event,'title-selector-ant-v')"
             />
           </el-collapse-item>
@@ -224,6 +242,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['legend-selector']"
               @onLegendChange="onLegendChange($event,'legend-selector')"
             />
             <legend-selector-ant-v
@@ -231,6 +250,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
+              :property-inner="propertyInnerAll['legend-selector-ant-v']"
               @onLegendChange="onLegendChange($event,'legend-selector-ant-v')"
             />
           </el-collapse-item>
@@ -313,6 +333,10 @@ export default {
     properties: {
       type: Array,
       required: true
+    },
+    propertyInnerAll: {
+      type: Object,
+      required: true
     }
   },
   data() {
@@ -322,6 +346,9 @@ export default {
     }
   },
   computed: {
+    pluginShow() {
+      return this.view.isPlugin && !this.batchOptStatus
+    },
     ...mapState([
       'batchOptStatus'
     ])
@@ -336,7 +363,7 @@ export default {
     showPropertiesCollapse(propertiesInfo) {
       let includeCount = 0
       // Property does not support mixed mode
-      if (propertiesInfo.includes('no-mix') && this.chart.type === 'mix') {
+      if (propertiesInfo.includes('no-mix') && this.chart.type.includes('mix')) {
         return false
       } else {
         propertiesInfo.forEach(property => {
diff --git a/frontend/src/views/chart/view/ChartStyleBatchSet.vue b/frontend/src/views/chart/view/ChartStyleBatchSet.vue
index 3c64c45b0e..626094ed1a 100644
--- a/frontend/src/views/chart/view/ChartStyleBatchSet.vue
+++ b/frontend/src/views/chart/view/ChartStyleBatchSet.vue
@@ -9,6 +9,7 @@
       :view="batchOptChartInfo"
       :chart="batchOptChartInfo"
       :properties="mixProperties"
+      :property-inner-all="mixPropertiesInner"
       @calcStyle="calcStyle"
       @onColorChange="onColorChange"
       @onSizeChange="onSizeChange"
@@ -49,7 +50,8 @@ export default {
   computed: {
     ...mapState([
       'batchOptChartInfo',
-      'mixProperties'
+      'mixProperties',
+      'mixPropertiesInner'
     ])
   },
   watch: {