From 24f8db7ad9b314cdfb53beb66cb38e269dae0976 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Wed, 15 Nov 2023 17:58:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8E=BB=E9=99=A4=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E5=8D=A1=E5=A4=A7=E5=B0=8F=E8=AE=BE=E7=BD=AE=E4=B8=AD=E5=A4=9A?=
 =?UTF-8?q?=E4=BD=99=E7=9A=84=E5=88=86=E5=89=B2=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shapeAttr/SizeSelector.vue     | 134 ++++++++---------
 .../components/shapeAttr/SizeSelectorAntV.vue | 140 +++++++++---------
 2 files changed, 137 insertions(+), 137 deletions(-)

diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
index 05f4b52841..7eda5d1489 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
@@ -9,7 +9,7 @@
       >
         <!--bar-begin-->
         <el-form-item
-          v-show="showProperty('barDefault')"
+          v-if="showProperty('barDefault')"
           :label="$t('chart.adapt')"
           class="form-item"
         >
@@ -19,7 +19,7 @@
           >{{ $t('chart.adapt') }}</el-checkbox>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('barWidth')"
+          v-if="showProperty('barWidth')"
           :label="$t('chart.bar_width')"
           class="form-item form-item-slider"
         >
@@ -35,7 +35,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('barGap')"
+          v-if="showProperty('barGap')"
           :label="$t('chart.bar_gap')"
           class="form-item form-item-slider"
         >
@@ -55,7 +55,7 @@
 
         <!--line-begin-->
         <el-form-item
-          v-show="showProperty('lineWidth')"
+          v-if="showProperty('lineWidth')"
           :label="$t('chart.line_width')"
           class="form-item form-item-slider"
         >
@@ -70,7 +70,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('lineType')"
+          v-if="showProperty('lineType')"
           :label="$t('chart.line_type')"
           class="form-item"
         >
@@ -83,7 +83,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('lineSymbol')"
+          v-if="showProperty('lineSymbol')"
           :label="$t('chart.line_symbol')"
           class="form-item"
         >
@@ -101,7 +101,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('lineSymbolSize')"
+          v-if="showProperty('lineSymbolSize')"
           :label="$t('chart.line_symbol_size')"
           class="form-item form-item-slider"
         >
@@ -116,7 +116,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('lineSmooth')"
+          v-if="showProperty('lineSmooth')"
           :label="$t('chart.line_smooth')"
           class="form-item"
         >
@@ -129,7 +129,7 @@
         <!--line-end-->
         <!--pie-begin-->
         <el-form-item
-          v-show="showProperty('pieInnerRadius')"
+          v-if="showProperty('pieInnerRadius')"
           :label="$t('chart.pie_inner_radius')"
           class="form-item form-item-slider"
         >
@@ -144,7 +144,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('pieOuterRadius')"
+          v-if="showProperty('pieOuterRadius')"
           :label="$t('chart.pie_outer_radius')"
           class="form-item form-item-slider"
         >
@@ -159,9 +159,9 @@
           />
         </el-form-item>
 
-        <span v-show="showProperty('pieRoseType') || showProperty('pieRoseRadius') ">
+        <span v-if="showProperty('pieRoseType') || showProperty('pieRoseRadius') ">
           <el-form-item
-            v-show="showProperty('pieRoseType')"
+            v-if="showProperty('pieRoseType')"
             :label="$t('chart.rose_type')"
             class="form-item"
           >
@@ -175,7 +175,7 @@
             </el-radio-group>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('pieRoseRadius')"
+            v-if="showProperty('pieRoseRadius')"
             :label="$t('chart.rose_radius')"
             class="form-item form-item-slider"
           >
@@ -194,7 +194,7 @@
         <!--funnel-begin-->
 
         <el-form-item
-          v-show="showProperty('funnelWidth')"
+          v-if="showProperty('funnelWidth')"
           :label="$t('chart.funnel_width')"
           class="form-item form-item-slider"
         >
@@ -212,7 +212,7 @@
         <!--funnel-end-->
         <!--radar-begin-->
         <el-form-item
-          v-show="showProperty('radarShape')"
+          v-if="showProperty('radarShape')"
           :label="$t('chart.shape')"
           class="form-item"
         >
@@ -226,7 +226,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('radarSize')"
+          v-if="showProperty('radarSize')"
           :label="$t('chart.radar_size')"
           class="form-item form-item-slider"
         >
@@ -243,7 +243,7 @@
         <!--radar-end-->
         <!--table-begin-->
         <el-form-item
-          v-show="showProperty('tableItemFontSize')"
+          v-if="showProperty('tableItemFontSize')"
           label-width="100px"
           :label="$t('chart.table_item_fontsize')"
           class="form-item"
@@ -262,7 +262,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('tableItemHeight')"
+          v-if="showProperty('tableItemHeight')"
           label-width="100px"
           :label="$t('chart.table_item_height')"
           class="form-item form-item-slider"
@@ -279,7 +279,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('tablePageMode')"
+          v-if="showProperty('tablePageMode')"
           label-width="100px"
           :label="$t('chart.table_page_mode')"
           class="form-item"
@@ -300,7 +300,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('tablePageSize') && sizeForm.tablePageMode === 'page'"
+          v-if="showProperty('tablePageSize') && sizeForm.tablePageMode === 'page'"
           label-width="100px"
           :label="$t('chart.table_page_size')"
           class="form-item"
@@ -319,7 +319,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('tableColumnWidth')"
+          v-if="showProperty('tableColumnWidth')"
           label-width="100px"
           :label="$t('chart.table_column_width_config')"
           class="form-item form-item-slider"
@@ -335,7 +335,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('tableAutoBreakLine')"
+          v-if="showProperty('tableAutoBreakLine')"
           label-width="100px"
           :label="$t('chart.table_auto_break_line')"
           class="form-item"
@@ -359,7 +359,7 @@
           </el-tooltip>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('showIndex')"
+          v-if="showProperty('showIndex')"
           label-width="100px"
           :label="$t('chart.table_show_index')"
           class="form-item"
@@ -374,7 +374,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('indexLabel') && sizeForm.showIndex"
+          v-if="showProperty('indexLabel') && sizeForm.showIndex"
           label-width="100px"
           :label="$t('chart.table_index_desc')"
           class="form-item"
@@ -385,9 +385,9 @@
             @blur="changeBarSizeCase('indexLabel')"
           />
         </el-form-item>
-        <el-divider v-show="includesAny(chart.type ,'table')" />
+        <el-divider v-if="includesAny(chart.type ,'table')" />
         <el-form-item
-          v-show="showProperty('showTableHeader')"
+          v-if="showProperty('showTableHeader')"
           label-width="100px"
           :label="$t('chart.table_show_table_header')"
           class="form-item"
@@ -400,9 +400,9 @@
             <el-radio :label="false">{{ $t('commons.no') }}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <div v-show="showProperty('showTableHeader') && sizeForm.showTableHeader">
+        <div v-if="showProperty('showTableHeader') && sizeForm.showTableHeader">
           <el-form-item
-            v-show="showProperty('tableTitleFontSize')"
+            v-if="showProperty('tableTitleFontSize')"
             label-width="100px"
             :label="$t('chart.table_title_fontsize')"
             class="form-item"
@@ -422,7 +422,7 @@
           </el-form-item>
 
           <el-form-item
-            v-show="showProperty('tableTitleHeight')"
+            v-if="showProperty('tableTitleHeight')"
             label-width="100px"
             :label="$t('chart.table_title_height')"
             class="form-item form-item-slider"
@@ -442,7 +442,7 @@
         <!--table-end-->
         <!--gauge-begin-->
         <el-form-item
-          v-show="showProperty('gaugeMin')"
+          v-if="showProperty('gaugeMin')"
           :label="$t('chart.min')"
           class="form-item form-item-slider"
         >
@@ -453,7 +453,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('gaugeMax')"
+          v-if="showProperty('gaugeMax')"
           :label="$t('chart.max')"
           class="form-item form-item-slider"
         >
@@ -464,7 +464,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('gaugeStartAngle')"
+          v-if="showProperty('gaugeStartAngle')"
           :label="$t('chart.start_angle')"
           class="form-item form-item-slider"
         >
@@ -479,7 +479,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('gaugeEndAngle')"
+          v-if="showProperty('gaugeEndAngle')"
           :label="$t('chart.end_angle')"
           class="form-item form-item-slider"
         >
@@ -494,7 +494,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('gaugeAxisLine')"
+          v-if="showProperty('gaugeAxisLine')"
           :label="$t('chart.gauge_axis_label')"
           class="form-item"
         >
@@ -506,7 +506,7 @@
         <!--gauge-end-->
         <!--text&label-start-->
         <el-form-item
-          v-show="showProperty('quotaFontSize')"
+          v-if="showProperty('quotaFontSize')"
           :label="$t('chart.quota_font_size')"
           class="form-item"
         >
@@ -524,7 +524,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaFontFamily')"
+          v-if="showProperty('quotaFontFamily')"
           :label="$t('chart.quota_font_family')"
           class="form-item"
         >
@@ -542,7 +542,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaFontStyle')"
+          v-if="showProperty('quotaFontStyle')"
           :label="$t('chart.quota_text_style')"
           class="form-item"
         >
@@ -556,7 +556,7 @@
           >{{ $t('chart.bolder') }}</el-checkbox>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaLetterSpace')"
+          v-if="showProperty('quotaLetterSpace')"
           :label="$t('chart.quota_letter_space')"
           class="form-item"
         >
@@ -574,7 +574,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaFontShadow')"
+          v-if="showProperty('quotaFontShadow')"
           :label="$t('chart.font_shadow')"
           class="form-item"
         >
@@ -584,7 +584,7 @@
           >{{ $t('chart.font_shadow') }}</el-checkbox>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('hPosition')"
+          v-if="showProperty('hPosition')"
           :label="$t('chart.h_position')"
           class="form-item"
         >
@@ -608,7 +608,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('vPosition')"
+          v-if="showProperty('vPosition')"
           :label="$t('chart.v_position')"
           class="form-item"
         >
@@ -633,7 +633,7 @@
         </el-form-item>
         <el-divider v-if="showProperty('quotaSuffix')" />
         <el-form-item
-          v-show="showProperty('quotaSuffix')"
+          v-if="showProperty('quotaSuffix')"
           :label="$t('chart.quota_suffix')"
           class="form-item"
         >
@@ -643,7 +643,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaSuffixFontSize')"
+          v-if="showProperty('quotaSuffixFontSize')"
           :label="$t('chart.quota_suffix_font_size')"
           class="form-item"
         >
@@ -661,7 +661,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaSuffixFontFamily')"
+          v-if="showProperty('quotaSuffixFontFamily')"
           :label="$t('chart.quota_suffix_font_family')"
           class="form-item"
         >
@@ -679,7 +679,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaSuffixFontStyle')"
+          v-if="showProperty('quotaSuffixFontStyle')"
           :label="$t('chart.quota_suffix_text_style')"
           class="form-item"
         >
@@ -693,7 +693,7 @@
           >{{ $t('chart.bolder') }}</el-checkbox>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaSuffixLetterSpace')"
+          v-if="showProperty('quotaSuffixLetterSpace')"
           :label="$t('chart.quota_suffix_letter_space')"
           class="form-item"
         >
@@ -711,7 +711,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaSuffixFontShadow')"
+          v-if="showProperty('quotaSuffixFontShadow')"
           :label="$t('chart.font_shadow')"
           class="form-item"
         >
@@ -722,7 +722,7 @@
         </el-form-item>
         <el-divider v-if="showProperty('dimensionShow')" />
         <el-form-item
-          v-show="showProperty('dimensionShow')"
+          v-if="showProperty('dimensionShow')"
           :label="$t('chart.dimension_show')"
           class="form-item"
         >
@@ -731,9 +731,9 @@
             @change="changeBarSizeCase('dimensionShow')"
           >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <div v-show="sizeForm.dimensionShow">
+        <div v-if="sizeForm.dimensionShow">
           <el-form-item
-            v-show="showProperty('dimensionFontSize')"
+            v-if="showProperty('dimensionFontSize')"
             :label="$t('chart.dimension_font_size')"
             class="form-item"
           >
@@ -751,7 +751,7 @@
             </el-select>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('dimensionFontFamily')"
+            v-if="showProperty('dimensionFontFamily')"
             :label="$t('chart.dimension_font_family')"
             class="form-item"
           >
@@ -769,7 +769,7 @@
             </el-select>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('dimensionFontStyle')"
+            v-if="showProperty('dimensionFontStyle')"
             :label="$t('chart.dimension_text_style')"
             class="form-item"
           >
@@ -783,7 +783,7 @@
             >{{ $t('chart.bolder') }}</el-checkbox>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('dimensionLetterSpace')"
+            v-if="showProperty('dimensionLetterSpace')"
             :label="$t('chart.dimension_letter_space')"
             class="form-item"
           >
@@ -801,7 +801,7 @@
             </el-select>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('dimensionFontShadow')"
+            v-if="showProperty('dimensionFontShadow')"
             :label="$t('chart.font_shadow')"
             class="form-item"
           >
@@ -811,7 +811,7 @@
             >{{ $t('chart.font_shadow') }}</el-checkbox>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('spaceSplit')"
+            v-if="showProperty('spaceSplit')"
             :label="$t('chart.space_split')"
             class="form-item"
           >
@@ -826,7 +826,7 @@
         <!--text&label-end-->
         <!--scatter-begin-->
         <el-form-item
-          v-show="showProperty('scatterSymbol')"
+          v-if="showProperty('scatterSymbol')"
           :label="$t('chart.bubble_symbol')"
           class="form-item"
         >
@@ -844,7 +844,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('scatterSymbolSize')"
+          v-if="showProperty('scatterSymbolSize')"
           :label="$t('chart.bubble_size')"
           class="form-item form-item-slider"
         >
@@ -862,7 +862,7 @@
         <!--scatter-end-->
         <!--treemap-begin-->
         <el-form-item
-          v-show="showProperty('treemapWidth')"
+          v-if="showProperty('treemapWidth')"
           :label="$t('chart.width')"
           class="form-item form-item-slider"
         >
@@ -877,7 +877,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('treemapHeight')"
+          v-if="showProperty('treemapHeight')"
           :label="$t('chart.height')"
           class="form-item form-item-slider"
         >
@@ -893,7 +893,7 @@
         </el-form-item>
         <!--treemap-end-->
         <!--chart-mix-start-->
-        <span v-show="showProperty('mix')">
+        <span v-if="showProperty('mix')">
           <el-divider
             content-position="center"
             class="divider-style"
@@ -1047,7 +1047,7 @@
         <!--chart-mix-end-->
         <!--liquid-begin-->
         <el-form-item
-          v-show="showProperty('liquidShape')"
+          v-if="showProperty('liquidShape')"
           :label="$t('chart.liquid_shape')"
           class="form-item"
         >
@@ -1065,7 +1065,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('liquidMax')"
+          v-if="showProperty('liquidMax')"
           :label="$t('chart.liquid_max')"
           class="form-item form-item-slider"
         >
@@ -1077,7 +1077,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('liquidSize')"
+          v-if="showProperty('liquidSize')"
           :label="$t('chart.radar_size')"
           class="form-item form-item-slider"
         >
@@ -1092,7 +1092,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('liquidOutlineBorder')"
+          v-if="showProperty('liquidOutlineBorder')"
           :label="$t('chart.liquid_outline_border')"
           class="form-item form-item-slider"
         >
@@ -1107,7 +1107,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('liquidOutlineDistance')"
+          v-if="showProperty('liquidOutlineDistance')"
           :label="$t('chart.liquid_outline_distance')"
           class="form-item form-item-slider"
         >
@@ -1122,7 +1122,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('liquidWaveLength')"
+          v-if="showProperty('liquidWaveLength')"
           :label="$t('chart.liquid_wave_length')"
           class="form-item form-item-slider"
         >
@@ -1137,7 +1137,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('liquidWaveCount')"
+          v-if="showProperty('liquidWaveCount')"
           :label="$t('chart.liquid_wave_count')"
           class="form-item form-item-slider"
         >
diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
index 763e821f2b..b8af05b883 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
@@ -9,7 +9,7 @@
       >
         <!--bar-begin-->
         <el-form-item
-          v-show="showProperty('barDefault')"
+          v-if="showProperty('barDefault')"
           :label="$t('chart.adapt')"
           class="form-item"
         >
@@ -19,7 +19,7 @@
           >{{ $t('chart.adapt') }}</el-checkbox>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('barGap')"
+          v-if="showProperty('barGap')"
           :label="$t('chart.bar_gap')"
           class="form-item form-item-slider"
         >
@@ -38,7 +38,7 @@
         <!--bar-end-->
         <!--line-begin-->
         <el-form-item
-          v-show="showProperty('lineWidth')"
+          v-if="showProperty('lineWidth')"
           :label="$t('chart.line_width')"
           class="form-item form-item-slider"
         >
@@ -53,7 +53,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('lineSymbol')"
+          v-if="showProperty('lineSymbol')"
           :label="$t('chart.line_symbol')"
           class="form-item"
         >
@@ -71,7 +71,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('lineSymbolSize')"
+          v-if="showProperty('lineSymbolSize')"
           :label="$t('chart.line_symbol_size')"
           class="form-item form-item-slider"
         >
@@ -86,7 +86,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('lineSmooth')"
+          v-if="showProperty('lineSmooth')"
           :label="$t('chart.line_smooth')"
           class="form-item"
         >
@@ -100,7 +100,7 @@
 
         <!--pie-begin-->
         <el-form-item
-          v-show="showProperty('pieInnerRadius')"
+          v-if="showProperty('pieInnerRadius')"
           :label="$t('chart.pie_inner_radius_percent')"
           class="form-item form-item-slider"
         >
@@ -115,7 +115,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('pieOuterRadius')"
+          v-if="showProperty('pieOuterRadius')"
           :label="$t('chart.pie_outer_radius_size')"
           class="form-item form-item-slider"
         >
@@ -132,7 +132,7 @@
         <!--pie-end-->
         <!--radar-begin-->
         <el-form-item
-          v-show="showProperty('radarShape')"
+          v-if="showProperty('radarShape')"
           :label="$t('chart.shape')"
           class="form-item"
         >
@@ -146,7 +146,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('radarSize')"
+          v-if="showProperty('radarSize')"
           :label="$t('chart.radar_size')"
           class="form-item form-item-slider"
         >
@@ -163,7 +163,7 @@
         <!--radar-end-->
         <!--table-begin-->
         <el-form-item
-          v-show="showProperty('tableItemFontSize')"
+          v-if="showProperty('tableItemFontSize')"
           label-width="100px"
           :label="$t('chart.table_item_fontsize')"
           class="form-item"
@@ -182,7 +182,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('tableItemAlign')"
+          v-if="showProperty('tableItemAlign')"
           label-width="100px"
           :label="$t('chart.table_item_align')"
           class="form-item"
@@ -201,7 +201,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('tableItemHeight')"
+          v-if="showProperty('tableItemHeight')"
           label-width="100px"
           :label="$t('chart.table_item_height')"
           class="form-item form-item-slider"
@@ -217,7 +217,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('tablePageMode')"
+          v-if="showProperty('tablePageMode')"
           label-width="100px"
           :label="$t('chart.table_page_mode')"
           class="form-item"
@@ -238,7 +238,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('tablePageSize')&&sizeForm.tablePageMode === 'page'"
+          v-if="showProperty('tablePageSize')&&sizeForm.tablePageMode === 'page'"
           label-width="100px"
           :label="$t('chart.table_page_size')"
           class="form-item"
@@ -257,7 +257,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('tableColumnMode')"
+          v-if="showProperty('tableColumnMode')"
           label-width="100px"
           :label="$t('chart.table_column_width_config')"
           class="form-item"
@@ -287,7 +287,7 @@
           </el-tooltip>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('tableColumnMode') && sizeForm.tableColumnMode === 'custom'"
+          v-if="showProperty('tableColumnMode') && sizeForm.tableColumnMode === 'custom'"
           label=""
           label-width="100px"
           class="form-item form-item-slider"
@@ -303,7 +303,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('showIndex')"
+          v-if="showProperty('showIndex')"
           label-width="100px"
           :label="$t('chart.table_show_index')"
           class="form-item"
@@ -318,7 +318,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('indexLabel') && sizeForm.showIndex"
+          v-if="showProperty('indexLabel') && sizeForm.showIndex"
           label-width="100px"
           :label="$t('chart.table_index_desc')"
           class="form-item"
@@ -329,9 +329,9 @@
             @blur="changeBarSizeCase('indexLabel')"
           />
         </el-form-item>
-        <el-divider v-show="equalsAny(chart.type, 'table-info', 'table-normal')" />
+        <el-divider v-if="equalsAny(chart.type, 'table-info', 'table-normal')" />
         <el-form-item
-          v-show="showProperty('showTableHeader')"
+          v-if="showProperty('showTableHeader')"
           label-width="100px"
           :label="$t('chart.table_show_table_header')"
           class="form-item"
@@ -344,9 +344,9 @@
             <el-radio :label="false">{{ $t('commons.no') }}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <div v-show="showProperty('showTableHeader') && sizeForm.showTableHeader">
+        <div v-if="showProperty('showTableHeader') && sizeForm.showTableHeader">
           <el-form-item
-            v-show="showProperty('tableTitleFontSize')"
+            v-if="showProperty('tableTitleFontSize')"
             label-width="100px"
             :label="$t('chart.table_title_fontsize')"
             class="form-item"
@@ -365,7 +365,7 @@
             </el-select>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('tableHeaderAlign')"
+            v-if="showProperty('tableHeaderAlign')"
             label-width="100px"
             :label="$t('chart.table_header_align')"
             class="form-item"
@@ -384,7 +384,7 @@
             </el-select>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('tableTitleHeight')"
+            v-if="showProperty('tableTitleHeight')"
             label-width="100px"
             :label="$t('chart.table_title_height')"
             class="form-item form-item-slider"
@@ -400,7 +400,7 @@
             />
           </el-form-item>
           <el-form-item
-            v-show="showProperty('tableRowTooltip')"
+            v-if="showProperty('tableRowTooltip')"
             label-width="100px"
             :label="$t('chart.table_row_tooltip')"
             class="form-item"
@@ -411,7 +411,7 @@
             />
           </el-form-item>
           <el-form-item
-            v-show="showProperty('tableColTooltip')"
+            v-if="showProperty('tableColTooltip')"
             label-width="100px"
             :label="$t('chart.table_col_tooltip')"
             class="form-item"
@@ -424,7 +424,7 @@
         </div>
         <!--table-end-->
         <!--chart-mix-start-->
-        <span v-show="showProperty('mix')">
+        <span v-if="showProperty('mix')">
           <el-divider
             content-position="center"
             class="divider-style"
@@ -560,9 +560,9 @@
         label-width="100px"
         size="mini"
       >
-        <div v-show="!batchOptStatus">
+        <div v-if="!batchOptStatus">
           <el-form-item
-            v-show="showProperty('gaugeMin')"
+            v-if="showProperty('gaugeMin')"
             :label="$t('chart.min')"
             class="form-item"
           >
@@ -681,7 +681,7 @@
           </el-form-item>
 
           <el-form-item
-            v-show="showProperty('gaugeMax')"
+            v-if="showProperty('gaugeMax')"
             :label="$t('chart.max')"
             class="form-item"
           >
@@ -801,7 +801,7 @@
         </div>
 
         <el-form-item
-          v-show="showProperty('gaugeStartAngle')"
+          v-if="showProperty('gaugeStartAngle')"
           :label="$t('chart.start_angle')"
           class="form-item form-item-slider"
         >
@@ -816,7 +816,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('gaugeEndAngle')"
+          v-if="showProperty('gaugeEndAngle')"
           :label="$t('chart.end_angle')"
           class="form-item form-item-slider"
         >
@@ -831,7 +831,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('gaugeAxisLine')"
+          v-if="showProperty('gaugeAxisLine')"
           :label="$t('chart.gauge_axis_label')"
           class="form-item"
         >
@@ -840,7 +840,7 @@
             @change="changeBarSizeCase('gaugeAxisLine')"
           />
         </el-form-item>
-        <!--        <el-form-item v-show="showProperty('gaugeTickCount')" :label="$t('chart.tick_count')" class="form-item form-item-slider">-->
+        <!--        <el-form-item v-if="showProperty('gaugeTickCount')" :label="$t('chart.tick_count')" class="form-item form-item-slider">-->
         <!--          <el-input-number v-model="sizeForm.gaugeTickCount" :min="1" :step="1" :precision="0" size="mini" @change="changeBarSizeCase('gaugeTickCount')" />-->
         <!--        </el-form-item>-->
       </el-form>
@@ -854,7 +854,7 @@
       >
         <!--text&label-start-->
         <el-form-item
-          v-show="showProperty('quotaFontSize')"
+          v-if="showProperty('quotaFontSize')"
           :label="$t('chart.quota_font_size')"
           class="form-item"
         >
@@ -872,7 +872,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaFontFamily')"
+          v-if="showProperty('quotaFontFamily')"
           :label="$t('chart.quota_font_family')"
           class="form-item"
         >
@@ -890,7 +890,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaFontStyle')"
+          v-if="showProperty('quotaFontStyle')"
           :label="$t('chart.quota_text_style')"
           class="form-item"
         >
@@ -904,7 +904,7 @@
           >{{ $t('chart.bolder') }}</el-checkbox>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaLetterSpace')"
+          v-if="showProperty('quotaLetterSpace')"
           :label="$t('chart.quota_letter_space')"
           class="form-item"
         >
@@ -922,7 +922,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaFontShadow')"
+          v-if="showProperty('quotaFontShadow')"
           :label="$t('chart.font_shadow')"
           class="form-item"
         >
@@ -932,7 +932,7 @@
           >{{ $t('chart.font_shadow') }}</el-checkbox>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('hPosition')"
+          v-if="showProperty('hPosition')"
           :label="$t('chart.h_position')"
           class="form-item"
         >
@@ -956,7 +956,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('vPosition')"
+          v-if="showProperty('vPosition')"
           :label="$t('chart.v_position')"
           class="form-item"
         >
@@ -981,7 +981,7 @@
         </el-form-item>
         <el-divider v-if="showProperty('quotaSuffix')" />
         <el-form-item
-          v-show="showProperty('quotaSuffix')"
+          v-if="showProperty('quotaSuffix')"
           :label="$t('chart.quota_suffix')"
           class="form-item"
         >
@@ -991,7 +991,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaSuffixFontSize')"
+          v-if="showProperty('quotaSuffixFontSize')"
           :label="$t('chart.quota_suffix_font_size')"
           class="form-item"
         >
@@ -1009,7 +1009,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaSuffixFontFamily')"
+          v-if="showProperty('quotaSuffixFontFamily')"
           :label="$t('chart.quota_suffix_font_family')"
           class="form-item"
         >
@@ -1027,7 +1027,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaSuffixFontStyle')"
+          v-if="showProperty('quotaSuffixFontStyle')"
           :label="$t('chart.quota_suffix_text_style')"
           class="form-item"
         >
@@ -1041,7 +1041,7 @@
           >{{ $t('chart.bolder') }}</el-checkbox>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaSuffixLetterSpace')"
+          v-if="showProperty('quotaSuffixLetterSpace')"
           :label="$t('chart.quota_suffix_letter_space')"
           class="form-item"
         >
@@ -1059,7 +1059,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('quotaSuffixFontShadow')"
+          v-if="showProperty('quotaSuffixFontShadow')"
           :label="$t('chart.font_shadow')"
           class="form-item"
         >
@@ -1070,7 +1070,7 @@
         </el-form-item>
         <el-divider v-if="showProperty('dimensionShow')" />
         <el-form-item
-          v-show="showProperty('dimensionShow')"
+          v-if="showProperty('dimensionShow')"
           :label="$t('chart.dimension_show')"
           class="form-item"
         >
@@ -1079,9 +1079,9 @@
             @change="changeBarSizeCase('dimensionShow')"
           >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <div v-show="sizeForm.dimensionShow">
+        <div v-if="sizeForm.dimensionShow">
           <el-form-item
-            v-show="showProperty('dimensionFontSize')"
+            v-if="showProperty('dimensionFontSize')"
             :label="$t('chart.dimension_font_size')"
             class="form-item"
           >
@@ -1099,7 +1099,7 @@
             </el-select>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('dimensionFontFamily')"
+            v-if="showProperty('dimensionFontFamily')"
             :label="$t('chart.dimension_font_family')"
             class="form-item"
           >
@@ -1117,7 +1117,7 @@
             </el-select>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('dimensionFontStyle')"
+            v-if="showProperty('dimensionFontStyle')"
             :label="$t('chart.dimension_text_style')"
             class="form-item"
           >
@@ -1131,7 +1131,7 @@
             >{{ $t('chart.bolder') }}</el-checkbox>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('dimensionLetterSpace')"
+            v-if="showProperty('dimensionLetterSpace')"
             :label="$t('chart.dimension_letter_space')"
             class="form-item"
           >
@@ -1149,7 +1149,7 @@
             </el-select>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('dimensionFontShadow')"
+            v-if="showProperty('dimensionFontShadow')"
             :label="$t('chart.font_shadow')"
             class="form-item"
           >
@@ -1159,7 +1159,7 @@
             >{{ $t('chart.font_shadow') }}</el-checkbox>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('spaceSplit')"
+            v-if="showProperty('spaceSplit')"
             :label="$t('chart.space_split')"
             class="form-item"
           >
@@ -1174,7 +1174,7 @@
         <!--text&label-end-->
         <!--scatter-begin-->
         <el-form-item
-          v-show="showProperty('scatterSymbol')"
+          v-if="showProperty('scatterSymbol')"
           :label="$t('chart.bubble_symbol')"
           class="form-item"
         >
@@ -1192,7 +1192,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('scatterSymbolSize')"
+          v-if="showProperty('scatterSymbolSize')"
           :label="$t('chart.bubble_size')"
           class="form-item form-item-slider"
         >
@@ -1209,7 +1209,7 @@
         <!--scatter-end-->
         <!--liquid-begin-->
         <el-form-item
-          v-show="showProperty('liquidShape')"
+          v-if="showProperty('liquidShape')"
           :label="$t('chart.liquid_shape')"
           class="form-item"
         >
@@ -1227,7 +1227,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('liquidMax')"
+          v-if="showProperty('liquidMax')"
           :label="$t('chart.liquid_max')"
           class="form-item"
         >
@@ -1347,7 +1347,7 @@
         </el-form-item>
 
         <el-form-item
-          v-show="showProperty('liquidSize')"
+          v-if="showProperty('liquidSize')"
           :label="$t('chart.radar_size')"
           class="form-item form-item-slider"
         >
@@ -1402,7 +1402,7 @@
         size="mini"
       >
         <el-form-item
-          v-show="showProperty('mapPitch')"
+          v-if="showProperty('mapPitch')"
           :label="$t('chart.map_pitch')"
           class="form-item form-item-slider"
         >
@@ -1414,7 +1414,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="showProperty('mapLineType')"
+          v-if="showProperty('mapLineType')"
           :label="$t('chart.map_line_type')"
           class="form-item"
         >
@@ -1432,7 +1432,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-show="showProperty('mapLineWidth')"
+          v-if="showProperty('mapLineWidth')"
           :label="$t('chart.map_line_width')"
           class="form-item form-item-slider"
         >
@@ -1444,7 +1444,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="false"
+          v-if="false"
           :label="$t('chart.map_line_animate')"
           class="form-item"
         >
@@ -1456,7 +1456,7 @@
         </el-form-item>
         <div v-if="sizeForm.mapLineAnimate">
           <el-form-item
-            v-show="showProperty('mapLineAnimateDuration')"
+            v-if="showProperty('mapLineAnimateDuration')"
             :label="$t('chart.map_line_animate_duration')"
             class="form-item form-item-slider"
           >
@@ -1468,7 +1468,7 @@
             />
           </el-form-item>
           <el-form-item
-            v-show="false"
+            v-if="false"
             :label="$t('chart.map_line_animate_interval')"
             class="form-item form-item-slider"
           >
@@ -1481,7 +1481,7 @@
             />
           </el-form-item>
           <el-form-item
-            v-show="false"
+            v-if="false"
             :label="$t('chart.map_line_animate_trail_length')"
             class="form-item form-item-slider"
           >
@@ -1495,7 +1495,7 @@
           </el-form-item>
           <!-- word-cloud start -->
           <el-form-item
-            v-show="showProperty('wordSizeRange') "
+            v-if="showProperty('wordSizeRange') "
             :label="$t('chart.word_size_range')"
             class="form-item form-item-slider form-item-range-slider"
           >
@@ -1508,7 +1508,7 @@
             />
           </el-form-item>
           <el-form-item
-            v-show="showProperty('wordSpacing') "
+            v-if="showProperty('wordSpacing') "
             :label="$t('chart.word_spacing')"
             class="form-item form-item-slider"
           >