Merge pull request #13737 from ulleo/dev-v2

feat(图表): 指标卡、云词图支持更换字体
2025-02-24 11:32:57 +08:00 · 2024-12-02 17:39:43 +08:00 · 2024-12-02 17:39:43 +08:00 · f2f4487c91
commit f2f4487c91
parent 6c86ebf754 b81f54751b
6 changed files with 48 additions and 21 deletions
--- a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue
+++ b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue
@ -43,6 +43,11 @@ const props = defineProps({
    type: String,
    required: false,
    default: 'common'
+  },
+  fontFamily: {
+    type: String,
+    required: false,
+    default: 'inherit'
  }
 })

@ -195,8 +200,8 @@ const indicatorClass = ref<CSSProperties>({
  color: thresholdColor.value.color,
  'font-size': DEFAULT_INDICATOR_STYLE.fontSize + 'px',
  'font-family': defaultTo(
-    CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily],
-    DEFAULT_INDICATOR_STYLE.fontFamily
+    props.fontFamily,
+    CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily]
  ),
  'font-weight': DEFAULT_INDICATOR_STYLE.isBolder ? 'bold' : 'normal',
  'font-style': DEFAULT_INDICATOR_STYLE.isItalic ? 'italic' : 'normal',
@ -209,8 +214,8 @@ const indicatorSuffixClass = ref<CSSProperties>({
  color: DEFAULT_INDICATOR_STYLE.suffixColor,
  'font-size': DEFAULT_INDICATOR_STYLE.suffixFontSize + 'px',
  'font-family': defaultTo(
-    CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.suffixFontFamily],
-    DEFAULT_INDICATOR_STYLE.suffixFontFamily
+    props.fontFamily,
+    CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily]
  ),
  'font-weight': DEFAULT_INDICATOR_STYLE.suffixIsBolder ? 'bold' : 'normal',
  'font-style': DEFAULT_INDICATOR_STYLE.suffixIsItalic ? 'italic' : 'normal',
@ -233,8 +238,8 @@ const indicatorNameClass = ref<CSSProperties>({
  color: DEFAULT_INDICATOR_NAME_STYLE.color,
  'font-size': DEFAULT_INDICATOR_NAME_STYLE.fontSize + 'px',
  'font-family': defaultTo(
-    CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_NAME_STYLE.fontFamily],
-    DEFAULT_INDICATOR_NAME_STYLE.fontFamily
+    props.fontFamily,
+    CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily]
  ),
  'font-weight': DEFAULT_INDICATOR_NAME_STYLE.isBolder ? 'bold' : 'normal',
  'font-style': DEFAULT_INDICATOR_NAME_STYLE.isItalic ? 'italic' : 'normal',
@ -296,8 +301,8 @@ const renderChart = async view => {
        color: thresholdColor.value.color,
        'font-size': indicator.fontSize + 'px',
        'font-family': defaultTo(
-          CHART_FONT_FAMILY_MAP[indicator.fontFamily],
-          DEFAULT_INDICATOR_STYLE.fontFamily
+          indicator.fontFamily,
+          CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily]
        ),
        'font-weight': indicator.isBolder ? 'bold' : 'normal',
        'font-style': indicator.isItalic ? 'italic' : 'normal',
@ -311,8 +316,8 @@ const renderChart = async view => {
        color: suffixColor,
        'font-size': indicator.suffixFontSize + 'px',
        'font-family': defaultTo(
-          CHART_FONT_FAMILY_MAP[indicator.suffixFontFamily],
-          DEFAULT_INDICATOR_STYLE.suffixFontFamily
+          indicator.suffixFontFamily,
+          CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.suffixFontFamily]
        ),
        'font-weight': indicator.suffixIsBolder ? 'bold' : 'normal',
        'font-style': indicator.suffixIsItalic ? 'italic' : 'normal',
@ -336,8 +341,8 @@ const renderChart = async view => {
        color: nameColor,
        'font-size': indicatorName.fontSize + 'px',
        'font-family': defaultTo(
-          CHART_FONT_FAMILY_MAP[indicatorName.fontFamily],
-          DEFAULT_INDICATOR_NAME_STYLE.fontFamily
+          indicatorName.fontFamily,
+          CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_NAME_STYLE.fontFamily]
        ),
        'font-weight': indicatorName.isBolder ? 'bold' : 'normal',
        'font-style': indicatorName.isItalic ? 'italic' : 'normal',
--- a/core/core-frontend/src/utils/canvasStyle.ts
+++ b/core/core-frontend/src/utils/canvasStyle.ts
@ -427,10 +427,14 @@ export function adaptCurTheme(customStyle, customAttr) {

 export function adaptTitleFontFamily(fontFamily, viewInfo) {
  if (viewInfo) {
-    viewInfo.customStyle['text']['fontFamily'] = defaultTo(
-      CHART_FONT_FAMILY_MAP_TRANS[fontFamily],
-      fontFamily
-    )
+    const _fontFamily = defaultTo(CHART_FONT_FAMILY_MAP_TRANS[fontFamily], fontFamily)
+    viewInfo.customStyle['text']['fontFamily'] = _fontFamily
+    //针对指标卡设置字体
+    if (viewInfo.type === 'indicator') {
+      viewInfo.customAttr['indicator']['fontFamily'] = fontFamily
+      viewInfo.customAttr['indicator']['suffixFontFamily'] = fontFamily
+      viewInfo.customAttr['indicatorName']['fontFamily'] = fontFamily
+    }
  }
 }

--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
@ -9,17 +9,21 @@ import {
  CHART_FONT_FAMILY,
  CHART_FONT_LETTER_SPACE,
  DEFAULT_INDICATOR_NAME_STYLE,
-  DEFAULT_BASIC_STYLE
+  DEFAULT_BASIC_STYLE,
+  CHART_FONT_FAMILY_ORIGIN
 } from '@/views/chart/components/editor/util/chart'
 import { cloneDeep, defaultsDeep } from 'lodash-es'
 import Icon from '@/components/icon-custom/src/Icon.vue'
 import { hexColorToRGBA } from '@/views/chart/components/js/util'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
+import { useAppearanceStoreWithOut } from '@/store/modules/appearance'

 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const { batchOptStatus } = storeToRefs(dvMainStore)
+const appearanceStore = useAppearanceStoreWithOut()
+
 const props = defineProps({
  chart: {
    type: Object,
@ -39,7 +43,12 @@ const toolTip = computed(() => {
  return props.themes === 'dark' ? 'ndark' : 'dark'
 })
 const predefineColors = COLOR_PANEL
-const fontFamily = CHART_FONT_FAMILY
+const fontFamily = CHART_FONT_FAMILY_ORIGIN.concat(
+  appearanceStore.fontList.map(ele => ({
+    name: ele.name,
+    value: ele.name
+  }))
+)
 const fontLetterSpace = CHART_FONT_LETTER_SPACE

 const state = reactive({
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
@ -15,7 +15,8 @@ import {
  CHART_FONT_FAMILY,
  CHART_FONT_LETTER_SPACE,
  DEFAULT_INDICATOR_STYLE,
-  DEFAULT_BASIC_STYLE
+  DEFAULT_BASIC_STYLE,
+  CHART_FONT_FAMILY_ORIGIN
 } from '@/views/chart/components/editor/util/chart'
 import { cloneDeep, defaultsDeep } from 'lodash-es'
 import { ElIcon, ElInput } from 'element-plus-secondary'
@ -23,8 +24,10 @@ import Icon from '@/components/icon-custom/src/Icon.vue'
 import { hexColorToRGBA } from '@/views/chart/components/js/util'
 import { storeToRefs } from 'pinia'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 const dvMainStore = dvMainStoreWithOut()
 const { batchOptStatus } = storeToRefs(dvMainStore)
+const appearanceStore = useAppearanceStoreWithOut()

 const { t } = useI18n()

@ -47,7 +50,12 @@ const toolTip = computed(() => {
  return props.themes === 'dark' ? 'ndark' : 'dark'
 })
 const predefineColors = COLOR_PANEL
-const fontFamily = CHART_FONT_FAMILY
+const fontFamily = CHART_FONT_FAMILY_ORIGIN.concat(
+  appearanceStore.fontList.map(ele => ({
+    name: ele.name,
+    value: ele.name
+  }))
+)
 const fontLetterSpace = CHART_FONT_LETTER_SPACE

 const state = reactive({
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts
@ -99,7 +99,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
        weightField: 'value',
        colorField: 'field',
        wordStyle: {
-          fontFamily: 'Verdana',
+          fontFamily: chart.fontFamily ? chart.fontFamily : 'Verdana',
          fontSize: (misc.wordSizeRange ?? DEFAULT_MISC.wordSizeRange) as [number, number],
          rotation: [0, 0],
          padding: misc.wordSpacing ?? DEFAULT_MISC.wordSpacing
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@ -1142,6 +1142,7 @@ const titleTooltipWidth = computed(() => {
        :view="view"
        :show-position="showPosition"
        :suffixId="suffixId"
+        :font-family="fontFamily"
      />
      <chart-component-g2-plot
        :scale="scale"