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 1/4] =?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: {

From 8ee057aac332e0f57d6e1b6d5f0ad6c2cdd8f42e Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 23 May 2022 15:06:07 +0800
Subject: [PATCH 2/4] =?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

---
 frontend/src/views/chart/chart/chart.js       |  4 ++-
 .../shape-attr/SizeSelectorAntV.vue           |  4 +--
 frontend/src/views/chart/view/ChartStyle.vue  | 25 ++++++++-----------
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index b3102a190f..dcf3b75094 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -57,7 +57,9 @@ export const DEFAULT_SIZE = {
   liquidWaveLength: 128,
   liquidWaveCount: 3,
   liquidShape: 'circle',
-  tablePageMode: 'page'
+  tablePageMode: 'page',
+  symbolOpacity: 0.7,
+  symbolStrokeWidth: 2
 }
 export const DEFAULT_LABEL = {
   show: false,
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index 57141bf676..3fa88f6dbb 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -411,8 +411,8 @@
           />
         </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 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('symbolOpacity')" />
         </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">
diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue
index 85c323bea6..7f6fb161a8 100644
--- a/frontend/src/views/chart/view/ChartStyle.vue
+++ b/frontend/src/views/chart/view/ChartStyle.vue
@@ -29,17 +29,8 @@
       <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')">
-            <color-selector-ext
-              v-if="view.render && view.render === 'antv' && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('pie') || view.type === 'funnel' || view.type === 'radar' || view.type === 'scatter')"
-              :param="param"
-              class="attr-selector"
-              :chart="chart"
-              @onColorChange="onColorChange"
-            />
-          <el-collapse-item name="color"  v-show="showPropertiesCollapse(['color-selector'])" :title="$t('chart.color')">
+          <el-collapse-item v-show="showPropertiesCollapse(['color-selector'])" name="color" :title="$t('chart.color')">
             <color-selector
-              v-else
               :param="param"
               class="attr-selector"
               :chart="chart"
@@ -283,7 +274,6 @@
 <script>
 import PluginCom from '@/views/system/plugin/PluginCom'
 import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
-import ColorSelectorExt from '@/views/chart/components/shape-attr/ColorSelectorExt'
 import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
 import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
 import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
@@ -330,8 +320,7 @@ export default {
     SizeSelectorAntV,
     SizeSelector,
     ColorSelector,
-    PluginCom,
-    ColorSelectorExt
+    PluginCom
   },
   props: {
     chart: {
@@ -352,11 +341,17 @@ export default {
     },
     dimensionData: {
       type: Array,
-      required: true
+      required: false,
+      default: function() {
+        return []
+      }
     },
     quotaData: {
       type: Array,
-      required: true
+      required: false,
+      default: function() {
+        return []
+      }
     },
     propertyInnerAll: {
       type: Object,

From 4bb9f244b621f89febaa72eb636596421e9b5877 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 23 May 2022 15:46:39 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E7=AC=A6=E5=8F=B7=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BEsql?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/main/resources/db/migration/V35__1.11.sql | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/backend/src/main/resources/db/migration/V35__1.11.sql b/backend/src/main/resources/db/migration/V35__1.11.sql
index 11d973b236..e22f23015c 100644
--- a/backend/src/main/resources/db/migration/V35__1.11.sql
+++ b/backend/src/main/resources/db/migration/V35__1.11.sql
@@ -49,3 +49,10 @@ SET FOREIGN_KEY_CHECKS = 1;
 
 INSERT INTO `sys_menu` VALUES (618, 1, 1, 1, '日志管理', 'system-log', 'system/log/index', 15, 'peoples', 'log', b'0', b'0', b'0', 'log:read', NULL, NULL, NULL, 1620281952752);
 INSERT INTO `sys_menu` VALUES (619, 618, 0, 2, '导出日志', NULL, NULL, 1, NULL, NULL, b'0', b'0', b'0', 'log:export', NULL, NULL, NULL, NULL);
+
+
+
+ALTER TABLE `chart_view` ADD COLUMN `view_fields` LONGTEXT COMMENT '视图字段集合';
+UPDATE `chart_view` SET `view_fields` = '[]';
+ALTER TABLE `chart_view_cache` ADD COLUMN `view_fields` LONGTEXT COMMENT '视图字段集合';
+UPDATE `chart_view_cache` SET `view_fields` = '[]';

From 6b8dbf509359d221d85693861bbb8e81c6a1903c Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 23 May 2022 16:36:27 +0800
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=E4=B8=8B=E6=9E=B6=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/Preview.vue      | 17 ++++--
 .../svg/panel-mobile-unpublished-back.svg     | 19 ++++++
 .../icons/svg/panel-mobile-unpublished.svg    | 23 ++++----
 .../src/icons/svg/panel-unpublished-back.svg  | 10 ++++
 frontend/src/icons/svg/panel-unpublished.svg  | 13 ++--
 .../src/views/panel/GrantAuth/shareTree.vue   | 59 +++++++++++++++----
 frontend/src/views/panel/enshrine/index.vue   | 38 ++++++++----
 frontend/src/views/panel/list/PanelList.vue   |  9 ++-
 .../src/views/panel/list/PanelViewShow.vue    |  4 +-
 9 files changed, 141 insertions(+), 51 deletions(-)
 create mode 100644 frontend/src/icons/svg/panel-mobile-unpublished-back.svg
 create mode 100644 frontend/src/icons/svg/panel-unpublished-back.svg

diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 869e38d02c..aa2fd06726 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -109,6 +109,11 @@ export default {
       type: Boolean,
       required: false,
       default: true
+    },
+    activeTab: {
+      type: String,
+      required: false,
+      default: 'none'
     }
   },
   data() {
@@ -148,12 +153,12 @@ export default {
       return this.$store.state.panel.mainActiveName
     },
     showUnpublishedArea() {
-      return this.panelInfo.status === 'unpublished'
-      // if (this.mainActiveName === 'PanelMain') {
-      //   return this.panelInfo.status === 'unpublished' && this.panelInfo.privileges.indexOf('manage') === -1
-      // } else {
-      //   return this.panelInfo.status === 'unpublished'
-      // }
+      // return this.panelInfo.status === 'unpublished'
+      if (this.mainActiveName === 'PanelMain' && this.activeTab==='') {
+        return this.panelInfo.status === 'unpublished' && this.panelInfo.privileges.indexOf('manage') === -1
+      } else {
+        return this.panelInfo.status === 'unpublished'
+      }
     },
     panelInfo() {
       return this.$store.state.panel.panelInfo
diff --git a/frontend/src/icons/svg/panel-mobile-unpublished-back.svg b/frontend/src/icons/svg/panel-mobile-unpublished-back.svg
new file mode 100644
index 0000000000..919694ec88
--- /dev/null
+++ b/frontend/src/icons/svg/panel-mobile-unpublished-back.svg
@@ -0,0 +1,19 @@
+<svg width="1285" height="1024" xmlns="http://www.w3.org/2000/svg" p-id="2359" version="1.1" class="icon" t="1621433305409">
+ <defs>
+  <filter id="svg_4_blur">
+   <feGaussianBlur stdDeviation="0" in="SourceGraphic"/>
+  </filter>
+ </defs>
+ <g>
+  <title>Layer 1</title>
+  <path id="svg_1" p-id="2360" fill="#0069F6" d="m100.39216,70.27451a30.11765,30.11765 0 0 0 -30.11765,30.11765l0,823.21568a30.11765,30.11765 0 0 0 30.11765,30.11765l1084.23529,0a30.11765,30.11765 0 0 0 30.11765,-30.11765l0,-823.21568a30.11765,30.11765 0 0 0 -30.11765,-30.11765l-1084.23529,0zm0,-60.23529l1084.23529,0a90.35294,90.35294 0 0 1 90.35294,90.35294l0,823.21568a90.35294,90.35294 0 0 1 -90.35294,90.35294l-1084.23529,0a90.35294,90.35294 0 0 1 -90.35294,-90.35294l0,-823.21568a90.35294,90.35294 0 0 1 90.35294,-90.35294z"/>
+  <path id="svg_2" p-id="2361" fill="#5ED7BC" d="m261.01961,261.01961m-60.2353,0a60.23529,60.23529 0 1 0 120.47059,0a60.23529,60.23529 0 1 0 -120.47059,0z"/>
+  <path id="svg_3" p-id="2362" fill="#5ED7BC" d="m331.29412,839.47922a30.11765,30.11765 0 0 1 -60.2353,0a189.94196,189.94196 0 0 1 189.94196,-189.94197l186.58887,0a102.46023,102.46023 0 0 0 98.4847,-130.71058a162.69553,162.69553 0 0 1 156.37083,-207.61098l241.14196,0a30.11765,30.11765 0 0 1 0,60.23529l-241.14196,0a102.46023,102.46023 0 0 0 -98.46463,130.73067a162.69553,162.69553 0 0 1 -156.3909,207.61098l-186.58887,0a129.70667,129.70667 0 0 0 -129.70666,129.70666l0,-0.02007z"/>
+  <rect stroke="null" id="svg_8" height="760.00015" width="508.00008" y="187.00002" x="689.50014" fill="#000000"/>
+  <rect stroke="null" rx="5" filter="url(#svg_4_blur)" id="svg_4" height="669.66668" width="430.00003" y="231.99995" x="728.16665" fill="#56ffff"/>
+  <line stroke="null" id="svg_5" y2="392.99996" x2="754.16667" y1="392.99996" x1="559.16667" fill="none"/>
+  <ellipse stroke="null" ry="65.5" rx="66.33335" id="svg_6" cy="823.83325" cx="952.16662" fill="#000000"/>
+  <rect stroke="null" id="svg_7" height="47.66669" width="187.33336" y="242.6666" x="863.49997" fill="#000000"/>
+  <path fill="#f90c0c" d="m484.77374,100.01227c-214.68812,0.09178 -388.6733,173.5038 -388.76538,387.51529c0,214.01148 174.04656,387.4235 388.76538,387.48469c214.68812,-0.06119 388.6733,-173.47321 388.73469,-387.4541c-0.0307,-214.04208 -174.01587,-387.54588 -388.73469,-387.54588zm296.61586,387.51529c-0.09209,59.44593 -17.89579,114.66977 -48.16209,161.05167l-410.03774,-408.62578c46.50451,-30.22778 101.91086,-48.00343 161.61467,-48.12581c163.79409,0.33654 296.3089,132.44542 296.58517,295.69992l-0.00001,0zm-593.29312,0c0.12278,-59.44593 17.92649,-114.73096 48.28488,-161.11286l409.94565,408.65638c-46.5352,30.16659 -101.91086,47.91165 -161.58397,48.00343c-163.76339,-0.15297 -296.3089,-132.29244 -296.64656,-295.54695z" id="svg_9" stroke="#000"/>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/icons/svg/panel-mobile-unpublished.svg b/frontend/src/icons/svg/panel-mobile-unpublished.svg
index 919694ec88..0f899341c2 100644
--- a/frontend/src/icons/svg/panel-mobile-unpublished.svg
+++ b/frontend/src/icons/svg/panel-mobile-unpublished.svg
@@ -1,19 +1,18 @@
-<svg width="1285" height="1024" xmlns="http://www.w3.org/2000/svg" p-id="2359" version="1.1" class="icon" t="1621433305409">
+<svg width="1285" height="1024" xmlns="http://www.w3.org/2000/svg" t="1621433305409" class="icon" version="1.1" p-id="2359">
  <defs>
   <filter id="svg_4_blur">
-   <feGaussianBlur stdDeviation="0" in="SourceGraphic"/>
+   <feGaussianBlur in="SourceGraphic" stdDeviation="0"/>
   </filter>
  </defs>
  <g>
   <title>Layer 1</title>
-  <path id="svg_1" p-id="2360" fill="#0069F6" d="m100.39216,70.27451a30.11765,30.11765 0 0 0 -30.11765,30.11765l0,823.21568a30.11765,30.11765 0 0 0 30.11765,30.11765l1084.23529,0a30.11765,30.11765 0 0 0 30.11765,-30.11765l0,-823.21568a30.11765,30.11765 0 0 0 -30.11765,-30.11765l-1084.23529,0zm0,-60.23529l1084.23529,0a90.35294,90.35294 0 0 1 90.35294,90.35294l0,823.21568a90.35294,90.35294 0 0 1 -90.35294,90.35294l-1084.23529,0a90.35294,90.35294 0 0 1 -90.35294,-90.35294l0,-823.21568a90.35294,90.35294 0 0 1 90.35294,-90.35294z"/>
-  <path id="svg_2" p-id="2361" fill="#5ED7BC" d="m261.01961,261.01961m-60.2353,0a60.23529,60.23529 0 1 0 120.47059,0a60.23529,60.23529 0 1 0 -120.47059,0z"/>
-  <path id="svg_3" p-id="2362" fill="#5ED7BC" d="m331.29412,839.47922a30.11765,30.11765 0 0 1 -60.2353,0a189.94196,189.94196 0 0 1 189.94196,-189.94197l186.58887,0a102.46023,102.46023 0 0 0 98.4847,-130.71058a162.69553,162.69553 0 0 1 156.37083,-207.61098l241.14196,0a30.11765,30.11765 0 0 1 0,60.23529l-241.14196,0a102.46023,102.46023 0 0 0 -98.46463,130.73067a162.69553,162.69553 0 0 1 -156.3909,207.61098l-186.58887,0a129.70667,129.70667 0 0 0 -129.70666,129.70666l0,-0.02007z"/>
-  <rect stroke="null" id="svg_8" height="760.00015" width="508.00008" y="187.00002" x="689.50014" fill="#000000"/>
-  <rect stroke="null" rx="5" filter="url(#svg_4_blur)" id="svg_4" height="669.66668" width="430.00003" y="231.99995" x="728.16665" fill="#56ffff"/>
-  <line stroke="null" id="svg_5" y2="392.99996" x2="754.16667" y1="392.99996" x1="559.16667" fill="none"/>
-  <ellipse stroke="null" ry="65.5" rx="66.33335" id="svg_6" cy="823.83325" cx="952.16662" fill="#000000"/>
-  <rect stroke="null" id="svg_7" height="47.66669" width="187.33336" y="242.6666" x="863.49997" fill="#000000"/>
-  <path fill="#f90c0c" d="m484.77374,100.01227c-214.68812,0.09178 -388.6733,173.5038 -388.76538,387.51529c0,214.01148 174.04656,387.4235 388.76538,387.48469c214.68812,-0.06119 388.6733,-173.47321 388.73469,-387.4541c-0.0307,-214.04208 -174.01587,-387.54588 -388.73469,-387.54588zm296.61586,387.51529c-0.09209,59.44593 -17.89579,114.66977 -48.16209,161.05167l-410.03774,-408.62578c46.50451,-30.22778 101.91086,-48.00343 161.61467,-48.12581c163.79409,0.33654 296.3089,132.44542 296.58517,295.69992l-0.00001,0zm-593.29312,0c0.12278,-59.44593 17.92649,-114.73096 48.28488,-161.11286l409.94565,408.65638c-46.5352,30.16659 -101.91086,47.91165 -161.58397,48.00343c-163.76339,-0.15297 -296.3089,-132.29244 -296.64656,-295.54695z" id="svg_9" stroke="#000"/>
+  <path d="m100.39216,70.27451a30.11765,30.11765 0 0 0 -30.11765,30.11765l0,823.21568a30.11765,30.11765 0 0 0 30.11765,30.11765l1084.23529,0a30.11765,30.11765 0 0 0 30.11765,-30.11765l0,-823.21568a30.11765,30.11765 0 0 0 -30.11765,-30.11765l-1084.23529,0zm0,-60.23529l1084.23529,0a90.35294,90.35294 0 0 1 90.35294,90.35294l0,823.21568a90.35294,90.35294 0 0 1 -90.35294,90.35294l-1084.23529,0a90.35294,90.35294 0 0 1 -90.35294,-90.35294l0,-823.21568a90.35294,90.35294 0 0 1 90.35294,-90.35294z" fill="#b2b2b2" p-id="2360" id="svg_1"/>
+  <path d="m261.01961,261.01961m-60.2353,0a60.23529,60.23529 0 1 0 120.47059,0a60.23529,60.23529 0 1 0 -120.47059,0z" fill="#b2b2b2" p-id="2361" id="svg_2"/>
+  <path d="m331.29412,839.47922a30.11765,30.11765 0 0 1 -60.2353,0a189.94196,189.94196 0 0 1 189.94196,-189.94197l186.58887,0a102.46023,102.46023 0 0 0 98.4847,-130.71058a162.69553,162.69553 0 0 1 156.37083,-207.61098l241.14196,0a30.11765,30.11765 0 0 1 0,60.23529l-241.14196,0a102.46023,102.46023 0 0 0 -98.46463,130.73067a162.69553,162.69553 0 0 1 -156.3909,207.61098l-186.58887,0a129.70667,129.70667 0 0 0 -129.70666,129.70666l0,-0.02007z" fill="#b2b2b2" p-id="2362" id="svg_3"/>
+  <rect fill="#b2b2b2" x="689.50014" y="187.00002" width="508.00008" height="760.00015" id="svg_8" stroke="null"/>
+  <rect fill="#56ffff" x="728.16665" y="231.99995" width="430.00003" height="669.66668" id="svg_4" filter="url(#svg_4_blur)" rx="5" stroke="null"/>
+  <line fill="none" x1="559.16667" y1="392.99996" x2="754.16667" y2="392.99996" id="svg_5" stroke="null"/>
+  <ellipse fill="#b2b2b2" cx="952.16662" cy="823.83325" id="svg_6" rx="66.33335" ry="65.5" stroke="null"/>
+  <rect fill="#b2b2b2" x="863.49997" y="242.6666" width="187.33336" height="47.66669" id="svg_7" stroke="null"/>
  </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/frontend/src/icons/svg/panel-unpublished-back.svg b/frontend/src/icons/svg/panel-unpublished-back.svg
new file mode 100644
index 0000000000..ac5887e54a
--- /dev/null
+++ b/frontend/src/icons/svg/panel-unpublished-back.svg
@@ -0,0 +1,10 @@
+<svg width="1285" height="1024" xmlns="http://www.w3.org/2000/svg" t="1621433305409" class="icon" version="1.1" p-id="2359">
+ <g>
+  <title>Layer 1</title>
+  <path d="m100.39216,67.77451a30.11765,30.11765 0 0 0 -30.11765,30.11765l0,823.21568a30.11765,30.11765 0 0 0 30.11765,30.11765l1084.23529,0a30.11765,30.11765 0 0 0 30.11765,-30.11765l0,-823.21568a30.11765,30.11765 0 0 0 -30.11765,-30.11765l-1084.23529,0zm0,-60.23529l1084.23529,0a90.35294,90.35294 0 0 1 90.35294,90.35294l0,823.21568a90.35294,90.35294 0 0 1 -90.35294,90.35294l-1084.23529,0a90.35294,90.35294 0 0 1 -90.35294,-90.35294l0,-823.21568a90.35294,90.35294 0 0 1 90.35294,-90.35294z" fill="#0069F6" p-id="2360" id="svg_1"/>
+  <path d="m261.01961,261.01961m-60.2353,0a60.23529,60.23529 0 1 0 120.47059,0a60.23529,60.23529 0 1 0 -120.47059,0z" fill="#5ED7BC" p-id="2361" id="svg_2"/>
+  <path d="m331.29412,839.47922a30.11765,30.11765 0 0 1 -60.2353,0a189.94196,189.94196 0 0 1 189.94196,-189.94197l186.58887,0a102.46023,102.46023 0 0 0 98.4847,-130.71058a162.69553,162.69553 0 0 1 156.37083,-207.61098l241.14196,0a30.11765,30.11765 0 0 1 0,60.23529l-241.14196,0a102.46023,102.46023 0 0 0 -98.46463,130.73067a162.69553,162.69553 0 0 1 -156.3909,207.61098l-186.58887,0a129.70667,129.70667 0 0 0 -129.70666,129.70666l0,-0.02007z" fill="#5ED7BC" p-id="2362" id="svg_3"/>
+  <path stroke="#000" fill="#f90c0c" d="m498.85771,115.35598c-213.99809,0.08971 -387.42406,169.58622 -387.51584,378.76548c0,209.17926 173.48715,378.67577 387.51584,378.73557c213.99809,-0.05981 387.42406,-169.55631 387.48525,-378.70566c-0.0306,-209.20916 -173.45656,-378.79539 -387.48525,-378.79539zm295.6625,378.76548c-0.0918,58.10369 -17.83827,112.08061 -48.0073,157.41524l-408.71983,-399.39931c46.35503,-29.54527 101.5833,-46.91955 161.09522,-47.03916c163.26763,0.32894 295.35653,129.45489 295.6319,289.02324l0.00001,0zm-591.3862,0c0.12239,-58.10369 17.86887,-112.14042 48.12968,-157.47505l408.62804,399.42922c-46.38564,29.48545 -101.5833,46.82984 -161.06461,46.91955c-163.23704,-0.14952 -295.35653,-129.30538 -295.69311,-288.87371z" id="svg_4"/>
+ </g>
+
+</svg>
\ No newline at end of file
diff --git a/frontend/src/icons/svg/panel-unpublished.svg b/frontend/src/icons/svg/panel-unpublished.svg
index ac5887e54a..a7dae86bb3 100644
--- a/frontend/src/icons/svg/panel-unpublished.svg
+++ b/frontend/src/icons/svg/panel-unpublished.svg
@@ -1,10 +1,9 @@
-<svg width="1285" height="1024" xmlns="http://www.w3.org/2000/svg" t="1621433305409" class="icon" version="1.1" p-id="2359">
+<svg width="1285.0000000000002" height="1024" xmlns="http://www.w3.org/2000/svg" p-id="2359" version="1.1" class="icon" t="1621433305409">
+
  <g>
   <title>Layer 1</title>
-  <path d="m100.39216,67.77451a30.11765,30.11765 0 0 0 -30.11765,30.11765l0,823.21568a30.11765,30.11765 0 0 0 30.11765,30.11765l1084.23529,0a30.11765,30.11765 0 0 0 30.11765,-30.11765l0,-823.21568a30.11765,30.11765 0 0 0 -30.11765,-30.11765l-1084.23529,0zm0,-60.23529l1084.23529,0a90.35294,90.35294 0 0 1 90.35294,90.35294l0,823.21568a90.35294,90.35294 0 0 1 -90.35294,90.35294l-1084.23529,0a90.35294,90.35294 0 0 1 -90.35294,-90.35294l0,-823.21568a90.35294,90.35294 0 0 1 90.35294,-90.35294z" fill="#0069F6" p-id="2360" id="svg_1"/>
-  <path d="m261.01961,261.01961m-60.2353,0a60.23529,60.23529 0 1 0 120.47059,0a60.23529,60.23529 0 1 0 -120.47059,0z" fill="#5ED7BC" p-id="2361" id="svg_2"/>
-  <path d="m331.29412,839.47922a30.11765,30.11765 0 0 1 -60.2353,0a189.94196,189.94196 0 0 1 189.94196,-189.94197l186.58887,0a102.46023,102.46023 0 0 0 98.4847,-130.71058a162.69553,162.69553 0 0 1 156.37083,-207.61098l241.14196,0a30.11765,30.11765 0 0 1 0,60.23529l-241.14196,0a102.46023,102.46023 0 0 0 -98.46463,130.73067a162.69553,162.69553 0 0 1 -156.3909,207.61098l-186.58887,0a129.70667,129.70667 0 0 0 -129.70666,129.70666l0,-0.02007z" fill="#5ED7BC" p-id="2362" id="svg_3"/>
-  <path stroke="#000" fill="#f90c0c" d="m498.85771,115.35598c-213.99809,0.08971 -387.42406,169.58622 -387.51584,378.76548c0,209.17926 173.48715,378.67577 387.51584,378.73557c213.99809,-0.05981 387.42406,-169.55631 387.48525,-378.70566c-0.0306,-209.20916 -173.45656,-378.79539 -387.48525,-378.79539zm295.6625,378.76548c-0.0918,58.10369 -17.83827,112.08061 -48.0073,157.41524l-408.71983,-399.39931c46.35503,-29.54527 101.5833,-46.91955 161.09522,-47.03916c163.26763,0.32894 295.35653,129.45489 295.6319,289.02324l0.00001,0zm-591.3862,0c0.12239,-58.10369 17.86887,-112.14042 48.12968,-157.47505l408.62804,399.42922c-46.38564,29.48545 -101.5833,46.82984 -161.06461,46.91955c-163.23704,-0.14952 -295.35653,-129.30538 -295.69311,-288.87371z" id="svg_4"/>
+  <path id="svg_1" p-id="2360" fill="#b2b2b2" d="m100.39216,70.27451a30.11765,30.11765 0 0 0 -30.11765,30.11765l0,823.21568a30.11765,30.11765 0 0 0 30.11765,30.11765l1084.23529,0a30.11765,30.11765 0 0 0 30.11765,-30.11765l0,-823.21568a30.11765,30.11765 0 0 0 -30.11765,-30.11765l-1084.23529,0zm0,-60.23529l1084.23529,0a90.35294,90.35294 0 0 1 90.35294,90.35294l0,823.21568a90.35294,90.35294 0 0 1 -90.35294,90.35294l-1084.23529,0a90.35294,90.35294 0 0 1 -90.35294,-90.35294l0,-823.21568a90.35294,90.35294 0 0 1 90.35294,-90.35294z"/>
+  <path id="svg_2" p-id="2361" fill="#b2b2b2" d="m261.01961,261.01961m-60.2353,0a60.23529,60.23529 0 1 0 120.47059,0a60.23529,60.23529 0 1 0 -120.47059,0z"/>
+  <path id="svg_3" p-id="2362" fill="#b2b2b2" d="m331.29412,839.47922a30.11765,30.11765 0 0 1 -60.2353,0a189.94196,189.94196 0 0 1 189.94196,-189.94197l186.58887,0a102.46023,102.46023 0 0 0 98.4847,-130.71058a162.69553,162.69553 0 0 1 156.37083,-207.61098l241.14196,0a30.11765,30.11765 0 0 1 0,60.23529l-241.14196,0a102.46023,102.46023 0 0 0 -98.46463,130.73067a162.69553,162.69553 0 0 1 -156.3909,207.61098l-186.58887,0a129.70667,129.70667 0 0 0 -129.70666,129.70666l0,-0.02007z"/>
  </g>
-
-</svg>
\ No newline at end of file
+</svg>
diff --git a/frontend/src/views/panel/GrantAuth/shareTree.vue b/frontend/src/views/panel/GrantAuth/shareTree.vue
index 467d444dc0..d0c5135784 100644
--- a/frontend/src/views/panel/GrantAuth/shareTree.vue
+++ b/frontend/src/views/panel/GrantAuth/shareTree.vue
@@ -3,13 +3,24 @@
     <el-row>
       <span class="header-title">{{ $t('panel.share_in') }}</span>
       <div class="block" style="margin-top:8px;">
-        <el-tree ref="topTree" :data="datas" :props="defaultProps" :highlight-current="true" node-key="name" :default-expanded-keys="expandNodes" @node-click="handleNodeClick">
+        <el-tree
+          ref="topTree"
+          :data="datas"
+          :props="defaultProps"
+          :highlight-current="true"
+          node-key="name"
+          :default-expanded-keys="expandNodes"
+          @node-click="handleNodeClick"
+        >
           <span slot-scope="{ data }" class="custom-tree-node father">
             <span style="display: flex; flex: 1 1 0%; width: 0px;" :class="!!data.msgNode ? 'msg-node-class': ''">
               <span v-if="!!data.id">
                 <svg-icon :icon-class="'panel-'+data.status" class="ds-icon-scene" />
               </span>
-              <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
+              <span
+                :class="data.status"
+                style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+              >{{ data.name }}</span>
             </span>
 
           </span>
@@ -20,13 +31,23 @@
     <el-row>
       <span class="header-title">{{ $t('panel.share_out') }}</span>
       <div class="block" style="margin-top:8px;">
-        <el-tree ref="botTree" :data="outDatas" :props="defaultProps" :highlight-current="true" node-key="name" :default-expand-all="true">
+        <el-tree
+          ref="botTree"
+          :data="outDatas"
+          :props="defaultProps"
+          :highlight-current="true"
+          node-key="name"
+          :default-expand-all="true"
+        >
           <span slot-scope="{ data }" class="custom-tree-node father">
             <span style="display: flex; flex: 1 1 0%; width: 0px;" @click="viewMyShare(data)">
               <span v-if="!!data.id">
                 <svg-icon :icon-class="'panel-'+data.status" class="ds-icon-scene" />
               </span>
-              <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
+              <span
+                :class="data.status"
+                style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+              >{{ data.name }}</span>
             </span>
 
             <span class="child">
@@ -53,6 +74,7 @@ import { uuid } from 'vue-uuid'
 import { initPanelData } from '@/api/panel/panel'
 import { proxyInitPanelData } from '@/api/panel/shareProxy'
 import bus from '@/utils/bus'
+
 export default {
   name: 'ShareTree',
   props: {
@@ -179,7 +201,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.header-title {
+  .header-title {
     font-size: 14px;
     flex: 1;
     color: var(--TextPrimary, #606266);
@@ -188,19 +210,22 @@ export default {
     height: 100%;
     /*line-height: 36px;*/
   }
-.msg-node-class {
-  color: red;
-  >>> i{
+
+  .msg-node-class {
     color: red;
+
+    > > > i {
+      color: red;
+    }
   }
-}
- .custom-tree-node {
+
+  .custom-tree-node {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 14px;
-    padding-right:8px;
+    padding-right: 8px;
   }
 
   .custom-tree-node-list {
@@ -209,14 +234,24 @@ export default {
     align-items: center;
     justify-content: space-between;
     font-size: 14px;
-    padding:0 8px;
+    padding: 0 8px;
   }
+
   .father .child {
     /*display: none;*/
     visibility: hidden;
   }
+
   .father:hover .child {
     /*display: inline;*/
     visibility: visible;
   }
+
+  .unpublished {
+    color: #b2b2b2
+  }
+
+  .publish {
+  }
+
 </style>
diff --git a/frontend/src/views/panel/enshrine/index.vue b/frontend/src/views/panel/enshrine/index.vue
index c6fdba4507..ee84c8905b 100644
--- a/frontend/src/views/panel/enshrine/index.vue
+++ b/frontend/src/views/panel/enshrine/index.vue
@@ -10,9 +10,13 @@
       <el-table-column prop="name" :label="$t('commons.name')">
         <template :id="scope.row.storeId" slot-scope="scope">
           <div class="start-item">
-            <div class="filter-db-row star-item-content" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" @click="showPanel(scope.row)">
+            <div
+              class="filter-db-row star-item-content"
+              style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+              @click="showPanel(scope.row)"
+            >
               <svg-icon :icon-class="'panel-'+scope.row.status" class="ds-icon-scene" />
-              <span> {{ scope.row.name }}</span>
+              <span :class="scope.row.status"> {{ scope.row.name }}</span>
             </div>
             <div class="star-item-close">
               <i class="el-icon-delete " @click="remove(scope.row)" />
@@ -29,6 +33,7 @@ import { deleteEnshrine, enshrineList } from '@/api/panel/enshrine'
 import { uuid } from 'vue-uuid'
 import { initPanelData } from '@/api/panel/panel'
 import bus from '@/utils/bus'
+
 export default {
   name: 'Enshrine',
   data() {
@@ -83,24 +88,35 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.start-item {
+  .start-item {
     width: 100%;
     height: 25px;
     margin: 0 0 0 10px;
-}
-.star-item-content {
+  }
+
+  .star-item-content {
     width: calc(100% - 60px);
     position: absolute;
-}
-.star-item-close {
+  }
+
+  .star-item-close {
     width: 25px;
     right: 5px;
     position: absolute;
     display: none;
-}
-.start-item:hover {
+  }
+
+  .start-item:hover {
     .star-item-close {
-        display: block;
+      display: block;
     }
-}
+  }
+
+  .unpublished {
+    color: #b2b2b2
+  }
+
+  .publish {
+  }
+
 </style>
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 76aa8a3e86..ebfdd2655f 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -97,7 +97,7 @@
                 <span v-if="data.nodeType === 'folder'">
                   <i class="el-icon-folder" />
                 </span>
-                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+                <span :class="data.status" style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
               </span>
               <span v-if="hasDataPermission('manage',data.privileges)" class="child">
                 <span v-if="data.nodeType ==='folder'" @click.stop>
@@ -866,4 +866,11 @@ export default {
     visibility: visible;
   }
 
+  .unpublished {
+    color: #b2b2b2
+  }
+
+  .publish {
+  }
+
 </style>
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index cb64a036d0..345f7874ea 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -90,7 +90,7 @@
         <!--        <div id="imageWrapper" ref="imageWrapper" style="width: 4096px;height: 2160px">-->
         <div id="imageWrapper" ref="imageWrapper" :style="imageWrapperStyle">
           <fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="fullscreen">
-            <Preview v-if="showMainFlag" :in-screen="!fullscreen" :show-type="'width'" :screen-shot="dataLoading" />
+            <Preview v-if="showMainFlag" :active-tab="activeTab" :in-screen="!fullscreen" :show-type="'width'" :screen-shot="dataLoading" />
           </fullscreen>
         </div>
       </el-row>
@@ -147,7 +147,7 @@ import ShareHead from '@/views/panel/GrantAuth/ShareHead'
 import { initPanelData, updatePanelStatus } from '@/api/panel/panel'
 import { proxyInitPanelData } from '@/api/panel/shareProxy'
 import { dataURLToBlob } from '@/components/canvas/utils/utils'
-import { findResourceAsBase64, readFile } from '@/api/staticResource/staticResource'
+import { findResourceAsBase64 } from '@/api/staticResource/staticResource'
 
 export default {
   name: 'PanelViewShow',