feat: 词云图字间距调整

frontend/src/lang/en.js

@@ -1561,7 +1561,9 @@ export default {
     map_line_color_source_color: 'Starting Color',
     map_line_color_target_color: 'End Color',
     map_line_theta_offset: 'Radian',
-    gauge_axis_label: 'Axis Label'
+    gauge_axis_label: 'Axis Label',
+    word_size_range: 'Word Size Range',
+    word_spacing: 'Word Spacing'
   },
   dataset: {
     scope_edit: 'Effective only when editing',

frontend/src/lang/tw.js

@@ -1555,7 +1555,9 @@ export default {
     map_line_color_source_color: '起始顏色',
     map_line_color_target_color: '結束顏色',
     map_line_theta_offset: '弧度',
-    gauge_axis_label: '刻度標籤'
+    gauge_axis_label: '刻度標籤',
+    word_size_range: '字號區間',
+    word_spacing: '文字間隔'
   },
   dataset: {
     scope_edit: '僅編輯時生效',

frontend/src/lang/zh.js

@@ -1554,7 +1554,9 @@ export default {
     map_line_color_source_color: '起始颜色',
     map_line_color_target_color: '结束颜色',
     map_line_theta_offset: '弧度',
-    gauge_axis_label: '刻度标签'
+    gauge_axis_label: '刻度标签',
+    word_size_range: '字号区间',
+    word_spacing: '文字间隔'
   },
   dataset: {
     scope_edit: '仅编辑时生效',

frontend/src/views/chart/chart/chart.js

@@ -147,7 +147,8 @@ export const DEFAULT_SIZE = {
   mapLineAnimateDuration: 3,
   mapLineAnimateInterval: 1,
   mapLineAnimateTrailLength: 1,
-  wordSizeRange: [8, 32]
+  wordSizeRange: [8, 32],
+  wordSpacing: 6
 }
 export const DEFAULT_SUSPENSION = {
   show: true

frontend/src/views/chart/chart/util.js

@@ -1756,7 +1756,8 @@ export const TYPE_CONFIGS = [
         'alpha'
       ],
       'size-selector-ant-v': [
-        'wordSizeRange'
+        'wordSizeRange',
+        'wordSpacing'
       ],
       'tooltip-selector-ant-v': [
         'show',

frontend/src/views/chart/chart/wordCloud/word_cloud.js

@@ -13,12 +13,12 @@ export function baseWordCloudOptionAntV(plot, container, chart, action) {
   // data
   const data = chart.data.data
   // size
-  let wordSizeRange = [8, 32]
+  let wordSizeRange
+  let wordSpacing
   if (chart.customAttr) {
     const customAttr = JSON.parse(chart.customAttr)
-    if (customAttr?.size?.wordSizeRange) {
-      wordSizeRange = customAttr?.size?.wordSizeRange
-    }
+    wordSizeRange = customAttr?.size?.wordSizeRange ?? [8, 32]
+    wordSpacing = customAttr?.size?.wordSpacing ?? 6
   }
   // options
   const options = {
@@ -31,7 +31,7 @@ export function baseWordCloudOptionAntV(plot, container, chart, action) {
       fontFamily: 'Verdana',
       fontSize: wordSizeRange,
       rotation: [0, 0],
-      padding: 6
+      padding: wordSpacing
     },
     random: () => 0.5,
     appendPadding: getPadding(chart),

frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue

@@ -1368,7 +1368,7 @@
           <!-- word-cloud start -->
           <el-form-item
             v-show="showProperty('wordSizeRange') "
-            :label="$t('chart.text_fontsize')"
+            :label="$t('chart.word_size_range')"
             class="form-item form-item-slider"
           >
             <el-slider
@@ -1379,6 +1379,18 @@
               @change="changeBarSizeCase('wordSizeRange')"
             />
           </el-form-item>
+          <el-form-item
+            v-show="showProperty('wordSpacing') "
+            :label="$t('chart.word_spacing')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.wordSpacing"
+              :min="0"
+              :max="20"
+              @change="changeBarSizeCase('wordSpacing')"
+            />
+          </el-form-item>
           <!-- word-cloud end -->
         </div>
       </el-form>
@@ -1589,9 +1601,10 @@ export default {
           this.sizeForm.mapLineAnimateInterval = this.sizeForm.mapLineAnimateInterval !== undefined ? this.sizeForm.mapLineAnimateInterval : DEFAULT_SIZE.mapLineAnimateInterval
           this.sizeForm.mapLineAnimateTrailLength = this.sizeForm.mapLineAnimateTrailLength !== undefined ? this.sizeForm.mapLineAnimateTrailLength : DEFAULT_SIZE.mapLineAnimateTrailLength
           if (this.sizeForm.gaugeAxisLine === null || this.sizeForm.gaugeAxisLine === undefined) {
-            this.sizeForm.gaugeAxisLine = DEFAULT_SIZE.gaugeAxisLin
+            this.sizeForm.gaugeAxisLine = DEFAULT_SIZE.gaugeAxisLine
           }
-          this.sizeForm.wordSizeRange = this.sizeForm !== undefined ? this.sizeForm.wordSizeRange : DEFAULTSIZE.wordSizeRange
+          this.sizeForm.wordSizeRange = this.sizeForm.wordSizeRange ?? DEFAULT_SIZE.wordSizeRange
+          this.sizeForm.wordSpacing = this.sizeForm.wordSpacing ?? DEFAULT_SIZE.wordSpacing
         }
       }
     },