Merge pull request #6695 from dataease/pr@dev@fix_label_text

fix: 指标卡/文本卡字体在 mac 上不生效

core/frontend/src/components/canvas/utils/style.js

@@ -120,7 +120,8 @@ export const customAttrTrans = {
     'quotaFontSize',
     'spaceSplit', // 间隔
     'scatterSymbolSize', // 气泡大小，散点图
-    'radarSize'// 雷达占比
+    'radarSize', // 雷达占比
+    'quotaSuffixFontSize'
   ],
   'label': [
     'fontSize'

core/frontend/src/views/chart/components/normal/LabelNormal.vue

@@ -187,6 +187,7 @@ export default {
 
           this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
           this.label_class.fontFamily = customAttr.size.dimensionFontFamily ? customAttr.size.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.label_class.fontFamily = CHART_CONT_FAMILY_MAP[this.label_class.fontFamily]
           this.label_class.fontWeight = customAttr.size.dimensionFontIsBolder ? 'bold' : 'normal'
           this.label_class.fontStyle = customAttr.size.dimensionFontIsItalic ? 'italic' : 'normal'
           this.label_class.letterSpacing = (customAttr.size.dimensionLetterSpace ? customAttr.size.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace) + 'px'
@@ -194,6 +195,7 @@ export default {
 
           this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
           this.label_content_class.fontFamily = customAttr.size.quotaFontFamily ? customAttr.size.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.label_content_class.fontFamily = CHART_CONT_FAMILY_MAP[this.label_content_class.fontFamily]
           this.label_content_class.fontWeight = customAttr.size.quotaFontIsBolder ? 'bold' : 'normal'
           this.label_content_class.fontStyle = customAttr.size.quotaFontIsItalic ? 'italic' : 'normal'
           this.label_content_class.letterSpacing = (customAttr.size.quotaLetterSpace ? customAttr.size.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace) + 'px'
@@ -205,6 +207,7 @@ export default {
           if (this.suffix) {
             this.label_suffix_class.fontSize = (customAttr.size.quotaSuffixFontSize ?? DEFAULT_SIZE.quotaSuffixFontSize) + 'px'
             this.label_suffix_class.fontFamily = customAttr.size.quotaSuffixFontFamily ? customAttr.size.quotaSuffixFontFamily : DEFAULT_SIZE.quotaSuffixFontFamily
+            this.label_suffix_class.fontFamily = CHART_CONT_FAMILY_MAP[this.label_suffix_class.fontFamily]
             this.label_suffix_class.fontWeight = customAttr.size.quotaSuffixFontIsBolder ? 'bold' : 'normal'
             this.label_suffix_class.fontStyle = customAttr.size.quotaSuffixFontIsItalic ? 'italic' : 'normal'
             this.label_suffix_class.letterSpacing = (customAttr.size.quotaSuffixLetterSpace ? customAttr.size.quotaSuffixLetterSpace : DEFAULT_SIZE.quotaSuffixLetterSpace) + 'px'

core/frontend/src/views/chart/components/normal/LabelNormalText.vue

@@ -204,6 +204,7 @@ export default {
 
           this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
           this.label_class.fontFamily = customAttr.size.dimensionFontFamily ? customAttr.size.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.label_class.fontFamily = CHART_CONT_FAMILY_MAP[this.label_class.fontFamily]
           this.label_class.fontWeight = customAttr.size.dimensionFontIsBolder ? 'bold' : 'normal'
           this.label_class.fontStyle = customAttr.size.dimensionFontIsItalic ? 'italic' : 'normal'
           this.label_class.letterSpacing = (customAttr.size.dimensionLetterSpace ? customAttr.size.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace) + 'px'
@@ -211,6 +212,7 @@ export default {
 
           this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
           this.label_content_class.fontFamily = customAttr.size.quotaFontFamily ? customAttr.size.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.label_content_class.fontFamily = CHART_CONT_FAMILY_MAP[this.label_content_class.fontFamily]
           this.label_content_class.fontWeight = customAttr.size.quotaFontIsBolder ? 'bold' : 'normal'
           this.label_content_class.fontStyle = customAttr.size.quotaFontIsItalic ? 'italic' : 'normal'
           this.label_content_class.letterSpacing = (customAttr.size.quotaLetterSpace ? customAttr.size.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace) + 'px'

core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue

@@ -523,34 +523,6 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item
-          v-show="showProperty('quotaSuffix')"
-          :label="$t('chart.quota_suffix')"
-          class="form-item"
-        >
-          <el-input
-            v-model="sizeForm.quotaSuffix"
-            @blur="changeBarSizeCase('quotaSuffix')"
-          />
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('quotaSuffixFontSize')"
-          :label="$t('chart.quota_suffix_font_size')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.quotaSuffixFontSize"
-            :placeholder="$t('chart.quota_suffix_font_size')"
-            @change="changeBarSizeCase('quotaSuffixFontSize')"
-          >
-            <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="showProperty('quotaFontFamily')"
           :label="$t('chart.quota_font_family')"
@@ -611,6 +583,143 @@
             @change="changeBarSizeCase('quotaFontShadow')"
           >{{ $t('chart.font_shadow') }}</el-checkbox>
         </el-form-item>
+        <el-form-item
+          v-show="showProperty('hPosition')"
+          :label="$t('chart.h_position')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.hPosition"
+            :placeholder="$t('chart.h_position')"
+            @change="changeBarSizeCase('hPosition')"
+          >
+            <el-option
+              value="start"
+              :label="$t('chart.p_left')"
+            >{{ $t('chart.p_left') }}</el-option>
+            <el-option
+              value="center"
+              :label="$t('chart.p_center')"
+            >{{ $t('chart.p_center') }}</el-option>
+            <el-option
+              value="end"
+              :label="$t('chart.p_right')"
+            >{{ $t('chart.p_right') }}</el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('vPosition')"
+          :label="$t('chart.v_position')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.vPosition"
+            :placeholder="$t('chart.v_position')"
+            @change="changeBarSizeCase('vPosition')"
+          >
+            <el-option
+              value="start"
+              :label="$t('chart.p_top')"
+            >{{ $t('chart.p_top') }}</el-option>
+            <el-option
+              value="center"
+              :label="$t('chart.p_center')"
+            >{{ $t('chart.p_center') }}</el-option>
+            <el-option
+              value="end"
+              :label="$t('chart.p_bottom')"
+            >{{ $t('chart.p_bottom') }}</el-option>
+          </el-select>
+        </el-form-item>
+        <el-divider v-if="showProperty('quotaSuffix')" />
+        <el-form-item
+          v-show="showProperty('quotaSuffix')"
+          :label="$t('chart.quota_suffix')"
+          class="form-item"
+        >
+          <el-input
+            v-model="sizeForm.quotaSuffix"
+            @blur="changeBarSizeCase('quotaSuffix')"
+          />
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('quotaSuffixFontSize')"
+          :label="$t('chart.quota_suffix_font_size')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaSuffixFontSize"
+            :placeholder="$t('chart.quota_suffix_font_size')"
+            @change="changeBarSizeCase('quotaSuffixFontSize')"
+          >
+            <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="showProperty('quotaSuffixFontFamily')"
+          :label="$t('chart.quota_suffix_font_family')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaSuffixFontFamily"
+            :placeholder="$t('chart.quota_suffix_font_family')"
+            @change="changeBarSizeCase('quotaSuffixFontFamily')"
+          >
+            <el-option
+              v-for="option in fontFamily"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('quotaSuffixFontStyle')"
+          :label="$t('chart.quota_suffix_text_style')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.quotaSuffixFontIsItalic"
+            @change="changeBarSizeCase('quotaSuffixFontIsItalic')"
+          >{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox
+            v-model="sizeForm.quotaSuffixFontIsBolder"
+            @change="changeBarSizeCase('quotaSuffixFontIsBolder')"
+          >{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('quotaSuffixLetterSpace')"
+          :label="$t('chart.quota_suffix_letter_space')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaSuffixLetterSpace"
+            :placeholder="$t('chart.quota_suffix_letter_space')"
+            @change="changeBarSizeCase('quotaSuffixLetterSpace')"
+          >
+            <el-option
+              v-for="option in fontLetterSpace"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('quotaSuffixFontShadow')"
+          :label="$t('chart.font_shadow')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.quotaSuffixFontShadow"
+            @change="changeBarSizeCase('quotaSuffixFontShadow')"
+          >{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
         <el-divider v-if="showProperty('dimensionShow')" />
         <el-form-item
           v-show="showProperty('dimensionShow')"
@@ -701,7 +810,6 @@
               @change="changeBarSizeCase('dimensionFontShadow')"
             >{{ $t('chart.font_shadow') }}</el-checkbox>
           </el-form-item>
-          <el-divider v-if="showProperty('spaceSplit')" />
           <el-form-item
             v-show="showProperty('spaceSplit')"
             :label="$t('chart.space_split')"
@@ -714,54 +822,6 @@
               @change="changeBarSizeCase('spaceSplit')"
             />
           </el-form-item>
-          <el-form-item
-            v-show="showProperty('hPosition')"
-            :label="$t('chart.h_position')"
-            class="form-item"
-          >
-            <el-select
-              v-model="sizeForm.hPosition"
-              :placeholder="$t('chart.h_position')"
-              @change="changeBarSizeCase('hPosition')"
-            >
-              <el-option
-                value="start"
-                :label="$t('chart.p_left')"
-              >{{ $t('chart.p_left') }}</el-option>
-              <el-option
-                value="center"
-                :label="$t('chart.p_center')"
-              >{{ $t('chart.p_center') }}</el-option>
-              <el-option
-                value="end"
-                :label="$t('chart.p_right')"
-              >{{ $t('chart.p_right') }}</el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            v-show="showProperty('vPosition')"
-            :label="$t('chart.v_position')"
-            class="form-item"
-          >
-            <el-select
-              v-model="sizeForm.vPosition"
-              :placeholder="$t('chart.v_position')"
-              @change="changeBarSizeCase('vPosition')"
-            >
-              <el-option
-                value="start"
-                :label="$t('chart.p_top')"
-              >{{ $t('chart.p_top') }}</el-option>
-              <el-option
-                value="center"
-                :label="$t('chart.p_center')"
-              >{{ $t('chart.p_center') }}</el-option>
-              <el-option
-                value="end"
-                :label="$t('chart.p_bottom')"
-              >{{ $t('chart.p_bottom') }}</el-option>
-            </el-select>
-          </el-form-item>
         </div>
         <!--text&label-end-->
         <!--scatter-begin-->
@@ -1197,6 +1257,13 @@ export default {
             this.sizeForm.indexLabel = DEFAULT_SIZE.indexLabel
           }
 
+          this.sizeForm.quotaSuffixFontSize = this.sizeForm.quotaSuffixFontSize ?? DEFAULT_SIZE.quotaSuffixFontSize
+          this.sizeForm.quotaSuffixFontFamily = this.sizeForm.quotaSuffixFontFamily ? this.sizeForm.quotaSuffixFontFamily : DEFAULT_SIZE.quotaSuffixFontFamily
+          this.sizeForm.quotaSuffixFontIsBolder = this.sizeForm.quotaSuffixFontIsBolder ? this.sizeForm.quotaSuffixFontIsBolder : DEFAULT_SIZE.quotaSuffixFontIsBolder
+          this.sizeForm.quotaSuffixFontIsItalic = this.sizeForm.quotaSuffixFontIsItalic ? this.sizeForm.quotaSuffixFontIsItalic : DEFAULT_SIZE.quotaSuffixFontIsItalic
+          this.sizeForm.quotaSuffixLetterSpace = this.sizeForm.quotaSuffixLetterSpace ? this.sizeForm.quotaSuffixLetterSpace : DEFAULT_SIZE.quotaSuffixLetterSpace
+          this.sizeForm.quotaSuffixFontShadow = this.sizeForm.quotaSuffixFontShadow ? this.sizeForm.quotaSuffixFontShadow : DEFAULT_SIZE.quotaSuffixFontShadow
+
           this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
           this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder
           this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic