From 0399b64304bc16c2b327ee40dff29f5672015e07 Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Thu, 16 Nov 2023 16:03:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20echarts=E9=9B=B7=E8=BE=BE=E5=9B=BE?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=9C=80=E5=A4=A7=E5=80=BC=E6=9C=80?=
 =?UTF-8?q?=E5=B0=8F=E5=80=BC=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/frontend/src/lang/en.js                  |  1 +
 core/frontend/src/lang/tw.js                  |  1 +
 core/frontend/src/lang/zh.js                  |  1 +
 .../src/views/chart/chart/radar/radar.js      | 10 +++-
 .../src/views/chart/chart/radar/radar_antv.js |  3 +-
 core/frontend/src/views/chart/chart/util.js   |  3 +-
 .../componentStyle/SplitSelector.vue          | 47 +++++++++++++++++++
 .../componentStyle/SplitSelectorAntV.vue      | 22 +++++++--
 .../components/shapeAttr/SizeSelector.vue     | 11 -----
 .../components/shapeAttr/SizeSelectorAntV.vue | 19 +-------
 10 files changed, 83 insertions(+), 35 deletions(-)

diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index 1bee90b490..4b208918b7 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -1481,6 +1481,7 @@ export default {
     dimension_letter_space: 'Name Letter Space',
     font_family: 'Font Family',
     font_family_tip: 'The font will only take effect if it is installed on the operating system',
+    radar_max_tip: 'If the maximum value of the actual data is greater than the custom maximum value, the maximum value of the actual data will prevail.',
     letter_space: 'Letter Space',
     font_shadow: 'Font Shadow',
     chart_area: 'Area',
diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js
index 3f3b9f5975..bb75996101 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -1478,6 +1478,7 @@ export default {
     dimension_letter_space: '名稱字間距',
     font_family: '字體',
     font_family_tip: '只有操作系統上已安裝該字體才能生效',
+    radar_max_tip: '如果實際數據的最大值大於自定義的最大值，將以實際數據的最大值為準。',
     letter_space: '字間距',
     font_shadow: '字體陰影',
     chart_area: '面積圖',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index 9843040a55..8cfe69768d 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -1478,6 +1478,7 @@ export default {
     dimension_letter_space: '名称字间距',
     font_family: '字体',
     font_family_tip: '只有操作系统上已安装该字体才能生效',
+    radar_max_tip: '如果实际数据的最大值大于自定义的最大值，将以实际数据的最大值为准。',
     letter_space: '字间距',
     font_shadow: '字体阴影',
     chart_area: '面积图',
diff --git a/core/frontend/src/views/chart/chart/radar/radar.js b/core/frontend/src/views/chart/chart/radar/radar.js
index 4ecf149e35..3ea0d245ab 100644
--- a/core/frontend/src/views/chart/chart/radar/radar.js
+++ b/core/frontend/src/views/chart/chart/radar/radar.js
@@ -64,9 +64,15 @@ export function baseRadarOption(chart_option, chart) {
 
       maxValues.push(Math.max.apply(null, y.value))
     }
-    const max = Math.max.apply(null, maxValues)
+    let max = Math.max.apply(null, maxValues)
+    let min
+    const customStyle = JSON.parse(chart.customStyle)
+    if (customStyle?.split?.axisValue?.auto === false) {
+      min = customStyle.split.axisValue.min
+      max = Math.max(customStyle.split.axisValue.max, max)
+    }
     chart.data.x.forEach(function(ele) {
-      chart_option.radar.indicator.push({ name: ele, max: max })
+      chart_option.radar.indicator.push({ name: ele, min, max })
     })
   }
   componentStyle(chart_option, chart)
diff --git a/core/frontend/src/views/chart/chart/radar/radar_antv.js b/core/frontend/src/views/chart/chart/radar/radar_antv.js
index 252e929879..b2c1e19ad2 100644
--- a/core/frontend/src/views/chart/chart/radar/radar_antv.js
+++ b/core/frontend/src/views/chart/chart/radar/radar_antv.js
@@ -125,7 +125,8 @@ export function baseRadarOptionAntV(plot, container, chart, action) {
       }
       if (s.axisValue?.auto === false) {
         yAxis.min = yAxis.minLimit = s.axisValue.min
-        yAxis.max = yAxis.maxLimit = s.axisValue.max
+        const dataMax = _.maxBy(data, 'value')
+        yAxis.max = yAxis.maxLimit = Math.max(s.axisValue.max, dataMax.value)
       }
     }
   }
diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js
index d8eafb566d..e41b3123ab 100644
--- a/core/frontend/src/views/chart/chart/util.js
+++ b/core/frontend/src/views/chart/chart/util.js
@@ -3114,7 +3114,8 @@ export const TYPE_CONFIGS = [
         'axisLine',
         'axisLabel',
         'splitLine',
-        'splitArea'
+        'splitArea',
+        'axisValue'
       ],
       'title-selector': [
         'show',
diff --git a/core/frontend/src/views/chart/components/componentStyle/SplitSelector.vue b/core/frontend/src/views/chart/components/componentStyle/SplitSelector.vue
index e2a41cd7fd..8c3774fd40 100644
--- a/core/frontend/src/views/chart/components/componentStyle/SplitSelector.vue
+++ b/core/frontend/src/views/chart/components/componentStyle/SplitSelector.vue
@@ -141,6 +141,50 @@
             @change="changeSplitStyle('splitArea')"
           >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
+        <el-divider v-show="showProperty('axisValue')" />
+        <el-form-item
+          v-show="showProperty('axisValue')"
+          :label="$t('chart.axis_value')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="splitForm.axisValue.auto"
+            @change="changeSplitStyle('axisValue')"
+          >
+            <el-radio :label="true">{{ $t('chart.axis_auto') }}</el-radio>
+            <el-radio :label="false">{{ $t('commons.custom') }}</el-radio>
+          </el-radio-group>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="bottom"
+          >
+            <div
+              slot="content"
+              v-html="$t('chart.radar_max_tip')"
+            />
+            <i
+              class="el-icon-info"
+              style="cursor: pointer;color: #606266;margin-left: 4px;"
+            />
+          </el-tooltip>
+        </el-form-item>
+        <div v-show="showProperty('axisValue') && !splitForm.axisValue.auto">
+          <el-form-item :label="$t('chart.axis_value_min')">
+            <el-input-number
+              v-model="splitForm.axisValue.min"
+              :max="splitForm.axisValue.max"
+              @change="changeSplitStyle('axisValue')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_value_max')">
+            <el-input-number
+              v-model="splitForm.axisValue.max"
+              :min="splitForm.axisValue.min"
+              @change="changeSplitStyle('axisValue')"
+            />
+          </el-form-item>
+        </div>
       </el-form>
     </el-col>
   </div>
@@ -199,6 +243,9 @@ export default {
         }
         if (customStyle.split) {
           this.splitForm = customStyle.split
+          if (this.splitForm.axisValue === undefined) {
+            this.splitForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_SPLIT.axisValue))
+          }
         } else {
           this.splitForm = JSON.parse(JSON.stringify(DEFAULT_SPLIT))
         }
diff --git a/core/frontend/src/views/chart/components/componentStyle/SplitSelectorAntV.vue b/core/frontend/src/views/chart/components/componentStyle/SplitSelectorAntV.vue
index 05ed8a35b8..fb53383250 100644
--- a/core/frontend/src/views/chart/components/componentStyle/SplitSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/componentStyle/SplitSelectorAntV.vue
@@ -60,7 +60,7 @@
             @change="changeSplitStyle('axisLine')"
           />
         </el-form-item>
-        <el-divider />
+        <el-divider v-show="showProperty('axisValue')" />
         <el-form-item
           v-show="showProperty('axisValue')"
           :label="$t('chart.axis_value')"
@@ -73,18 +73,34 @@
             <el-radio :label="true">{{ $t('chart.axis_auto') }}</el-radio>
             <el-radio :label="false">{{ $t('commons.custom') }}</el-radio>
           </el-radio-group>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="bottom"
+          >
+            <div
+              slot="content"
+              v-html="$t('chart.radar_max_tip')"
+            />
+            <i
+              class="el-icon-info"
+              style="cursor: pointer;color: #606266;margin-left: 4px;"
+            />
+          </el-tooltip>
         </el-form-item>
         <div v-show="showProperty('axisValue') && !splitForm.axisValue.auto">
           <el-form-item :label="$t('chart.axis_value_min')">
             <el-input-number
               v-model="splitForm.axisValue.min"
-              @blur="changeSplitStyle('axisValue')"
+              :max="splitForm.axisValue.max"
+              @change="changeSplitStyle('axisValue')"
             />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_value_max')">
             <el-input-number
               v-model="splitForm.axisValue.max"
-              @blur="changeSplitStyle('axisValue')"
+              :min="splitForm.axisValue.min"
+              @change="changeSplitStyle('axisValue')"
             />
           </el-form-item>
         </div>
diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
index 7eda5d1489..45e374d51e 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
@@ -244,7 +244,6 @@
         <!--table-begin-->
         <el-form-item
           v-if="showProperty('tableItemFontSize')"
-          label-width="100px"
           :label="$t('chart.table_item_fontsize')"
           class="form-item"
         >
@@ -263,7 +262,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('tableItemHeight')"
-          label-width="100px"
           :label="$t('chart.table_item_height')"
           class="form-item form-item-slider"
         >
@@ -280,7 +278,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('tablePageMode')"
-          label-width="100px"
           :label="$t('chart.table_page_mode')"
           class="form-item"
         >
@@ -301,7 +298,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('tablePageSize') && sizeForm.tablePageMode === 'page'"
-          label-width="100px"
           :label="$t('chart.table_page_size')"
           class="form-item"
         >
@@ -320,7 +316,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('tableColumnWidth')"
-          label-width="100px"
           :label="$t('chart.table_column_width_config')"
           class="form-item form-item-slider"
         >
@@ -336,7 +331,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('tableAutoBreakLine')"
-          label-width="100px"
           :label="$t('chart.table_auto_break_line')"
           class="form-item"
         >
@@ -360,7 +354,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('showIndex')"
-          label-width="100px"
           :label="$t('chart.table_show_index')"
           class="form-item"
         >
@@ -375,7 +368,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('indexLabel') && sizeForm.showIndex"
-          label-width="100px"
           :label="$t('chart.table_index_desc')"
           class="form-item"
         >
@@ -388,7 +380,6 @@
         <el-divider v-if="includesAny(chart.type ,'table')" />
         <el-form-item
           v-if="showProperty('showTableHeader')"
-          label-width="100px"
           :label="$t('chart.table_show_table_header')"
           class="form-item"
         >
@@ -403,7 +394,6 @@
         <div v-if="showProperty('showTableHeader') && sizeForm.showTableHeader">
           <el-form-item
             v-if="showProperty('tableTitleFontSize')"
-            label-width="100px"
             :label="$t('chart.table_title_fontsize')"
             class="form-item"
           >
@@ -423,7 +413,6 @@
 
           <el-form-item
             v-if="showProperty('tableTitleHeight')"
-            label-width="100px"
             :label="$t('chart.table_title_height')"
             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 b8af05b883..4aeae80027 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
@@ -164,7 +164,6 @@
         <!--table-begin-->
         <el-form-item
           v-if="showProperty('tableItemFontSize')"
-          label-width="100px"
           :label="$t('chart.table_item_fontsize')"
           class="form-item"
         >
@@ -183,7 +182,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('tableItemAlign')"
-          label-width="100px"
           :label="$t('chart.table_item_align')"
           class="form-item"
         >
@@ -202,7 +200,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('tableItemHeight')"
-          label-width="100px"
           :label="$t('chart.table_item_height')"
           class="form-item form-item-slider"
         >
@@ -218,7 +215,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('tablePageMode')"
-          label-width="100px"
           :label="$t('chart.table_page_mode')"
           class="form-item"
         >
@@ -239,7 +235,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('tablePageSize')&&sizeForm.tablePageMode === 'page'"
-          label-width="100px"
           :label="$t('chart.table_page_size')"
           class="form-item"
         >
@@ -258,7 +253,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('tableColumnMode')"
-          label-width="100px"
           :label="$t('chart.table_column_width_config')"
           class="form-item"
         >
@@ -289,7 +283,6 @@
         <el-form-item
           v-if="showProperty('tableColumnMode') && sizeForm.tableColumnMode === 'custom'"
           label=""
-          label-width="100px"
           class="form-item form-item-slider"
         >
           <el-slider
@@ -304,7 +297,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('showIndex')"
-          label-width="100px"
           :label="$t('chart.table_show_index')"
           class="form-item"
         >
@@ -319,7 +311,6 @@
         </el-form-item>
         <el-form-item
           v-if="showProperty('indexLabel') && sizeForm.showIndex"
-          label-width="100px"
           :label="$t('chart.table_index_desc')"
           class="form-item"
         >
@@ -332,7 +323,6 @@
         <el-divider v-if="equalsAny(chart.type, 'table-info', 'table-normal')" />
         <el-form-item
           v-if="showProperty('showTableHeader')"
-          label-width="100px"
           :label="$t('chart.table_show_table_header')"
           class="form-item"
         >
@@ -347,7 +337,6 @@
         <div v-if="showProperty('showTableHeader') && sizeForm.showTableHeader">
           <el-form-item
             v-if="showProperty('tableTitleFontSize')"
-            label-width="100px"
             :label="$t('chart.table_title_fontsize')"
             class="form-item"
           >
@@ -366,7 +355,6 @@
           </el-form-item>
           <el-form-item
             v-if="showProperty('tableHeaderAlign')"
-            label-width="100px"
             :label="$t('chart.table_header_align')"
             class="form-item"
           >
@@ -385,7 +373,6 @@
           </el-form-item>
           <el-form-item
             v-if="showProperty('tableTitleHeight')"
-            label-width="100px"
             :label="$t('chart.table_title_height')"
             class="form-item form-item-slider"
           >
@@ -401,7 +388,6 @@
           </el-form-item>
           <el-form-item
             v-if="showProperty('tableRowTooltip')"
-            label-width="100px"
             :label="$t('chart.table_row_tooltip')"
             class="form-item"
           >
@@ -412,7 +398,6 @@
           </el-form-item>
           <el-form-item
             v-if="showProperty('tableColTooltip')"
-            label-width="100px"
             :label="$t('chart.table_col_tooltip')"
             class="form-item"
           >
@@ -557,7 +542,7 @@
       <el-form
         ref="sizeFormGauge"
         :model="sizeForm"
-        label-width="100px"
+        label-width="80px"
         size="mini"
       >
         <div v-if="!batchOptStatus">
@@ -849,7 +834,7 @@
       <el-form
         ref="sizeFormPie"
         :model="sizeForm"
-        label-width="100px"
+        label-width="80px"
         size="mini"
       >
         <!--text&label-start-->