feat(图表): 词云图支持配置字号大小区间和文字间距

core/core-frontend/src/locales/zh-CN.ts

@@ -1107,7 +1107,9 @@ export default {
     add_condition: '添加条件',
     chart_quadrant: '象限图',
     quadrant: '象限',
-    font_size: '字号'
+    font_size: '字号',
+    word_size_range: '字号区间',
+    word_spacing: '文字间隔'
   },
   dataset: {
     scope_edit: '仅编辑时生效',

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -542,6 +542,14 @@ declare interface ChartMiscAttr {
    * 指标/文本卡垂直位置
    */
   vPosition: 'top' | 'center' | 'bottom'
+  /**
+   * 词云图字体大小区间
+   */
+  wordSizeRange: [number, number]
+  /**
+   * 词云图文字间距
+   */
+  wordSpacing: number
 }
 /**
  * 动态极值配置

core/core-frontend/src/utils/canvasStyle.ts

@@ -121,7 +121,9 @@ export const customAttrTrans = {
     'valueFontSize',
     'spaceSplit', // 间隔
     'scatterSymbolSize', // 气泡大小，散点图
-    'radarSize' // 雷达占比
+    'radarSize', // 雷达占比
+    'wordSizeRange',
+    'wordSpacing'
   ],
   label: ['fontSize'],
   tooltip: ['fontSize'],
@@ -278,6 +280,13 @@ export const mobileSpecialProps = {
 }
 
 export function getScaleValue(propValue, scale) {
+  if (propValue instanceof Array) {
+    propValue.forEach((v, i) => {
+      const val = Math.round(v * scale)
+      propValue[i] = val > 1 ? val : 1
+    })
+    return propValue
+  }
   const propValueTemp = Math.round(propValue * scale)
   return propValueTemp > 1 ? propValueTemp : 1
 }

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -248,7 +248,9 @@ export const DEFAULT_MISC: ChartMiscAttr = {
   mapLineAnimateDuration: 3,
   mapLineGradient: false,
   mapLineSourceColor: '#146C94',
-  mapLineTargetColor: '#576CBC'
+  mapLineTargetColor: '#576CBC',
+  wordSizeRange: [8, 32],
+  wordSpacing: 6
 }
 
 export const DEFAULT_MARK = {

core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts

@@ -25,7 +25,7 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
     'background-overall-component': ['all'],
     'basic-style-selector': ['colors', 'alpha'],
     'label-selector': ['fontSize', 'color', 'labelFormatter'],
-    'misc-selector': ['liquidShape', 'liquidMaxType', 'liquidMaxField'],
+    'misc-selector': ['liquidShape', 'liquidSize', 'liquidMaxType', 'liquidMaxField'],
     'title-selector': [
       'title',
       'fontSize',

core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts

@@ -8,6 +8,7 @@ import { getPadding } from '@/views/chart/components/js/panel/common/common_antv
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { useI18n } from '@/hooks/web/useI18n'
 import { isEmpty } from 'lodash-es'
+import { DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
 
 const { t } = useI18n()
 const DEFAULT_DATA = []
@@ -20,6 +21,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
     'background-overall-component',
     'title-selector',
     'tooltip-selector',
+    'misc-selector',
     'jump-set',
     'linkage'
   ]
@@ -38,6 +40,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
       'letterSpace',
       'fontShadow'
     ],
+    'misc-selector': ['wordSizeRange', 'wordSpacing'],
     'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter']
   }
   axis: AxisType[] = ['xAxis', 'yAxis', 'filter']
@@ -58,6 +61,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
     if (chart?.data) {
       // data
       const data = chart.data.data
+      const { misc } = parseJson(chart.customAttr)
       // options
       const initOptions: WordCloudOptions = {
         data: data,
@@ -66,9 +70,9 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
         colorField: 'field',
         wordStyle: {
           fontFamily: 'Verdana',
-          fontSize: [8, 32],
+          fontSize: (misc.wordSizeRange ?? DEFAULT_MISC.wordSizeRange) as [number, number],
           rotation: [0, 0],
-          padding: 6
+          padding: misc.wordSpacing ?? DEFAULT_MISC.wordSpacing
         },
         random: () => 0.5,
         appendPadding: getPadding(chart),