diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index 113ffc7521..60fbf8b68c 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -1466,6 +1466,7 @@ export default {
     dimension_text_style: 'Name Style',
     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',
     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 d4ea027e6f..d09ad5b60b 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -1465,6 +1465,7 @@ export default {
     dimension_text_style: '名稱樣式',
     dimension_letter_space: '名稱字間距',
     font_family: '字體',
+    font_family_tip: '只有操作系統上已安裝該字體才能生效',
     letter_space: '字間距',
     font_shadow: '字體陰影',
     chart_area: '面積圖',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index c8593421b1..ec9e6a5618 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -1464,6 +1464,7 @@ export default {
     dimension_text_style: '名称样式',
     dimension_letter_space: '名称字间距',
     font_family: '字体',
+    font_family_tip: '只有操作系统上已安装该字体才能生效',
     letter_space: '字间距',
     font_shadow: '字体阴影',
     chart_area: '面积图',
diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js
index 6eb7fa837e..1af8b92939 100644
--- a/core/frontend/src/views/chart/chart/chart.js
+++ b/core/frontend/src/views/chart/chart/chart.js
@@ -1146,6 +1146,13 @@ export const CHART_FONT_FAMILY = [
   { name: '楷体', value: 'KaiTi' }
 ]
 
+export const CHART_CONT_FAMILY_MAP = {
+  'Microsoft YaHei': 'Microsoft YaHei',
+  'SimSun': 'SimSun, "Songti SC", STSong',
+  'SimHei': 'SimHei, Helvetica',
+  'KaiTi': 'KaiTi, "Kaiti SC", STKaiti'
+}
+
 export const CHART_FONT_LETTER_SPACE = [
   { name: '0px', value: '0' },
   { name: '1px', value: '1' },
diff --git a/core/frontend/src/views/chart/components/ChartComponentG2.vue b/core/frontend/src/views/chart/components/ChartComponentG2.vue
index 086615a457..1ae307cfba 100644
--- a/core/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/core/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -55,7 +55,7 @@ import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
 import { baseWaterfallOptionAntV } from '@/views/chart/chart/waterfall/waterfall'
 import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_cloud'
 import TitleRemark from '@/views/chart/view/TitleRemark'
-import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
+import { CHART_CONT_FAMILY_MAP, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
 import ChartTitleUpdate from './ChartTitleUpdate.vue'
 import { equalsAny } from '@/utils/StringUtils'
@@ -429,7 +429,7 @@ export default {
           this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
           this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
 
-          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.fontFamily = customStyle.text.fontFamily ? CHART_CONT_FAMILY_MAP[customStyle.text.fontFamily] : DEFAULT_TITLE_STYLE.fontFamily
           this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
           this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
diff --git a/core/frontend/src/views/chart/components/ChartComponentS2.vue b/core/frontend/src/views/chart/components/ChartComponentS2.vue
index deb834afdc..31d5e3ca22 100644
--- a/core/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/core/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -97,7 +97,7 @@ import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar'
 import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
 import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/chart/table/table-info'
 import TitleRemark from '@/views/chart/view/TitleRemark'
-import { DEFAULT_TITLE_STYLE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
+import { CHART_CONT_FAMILY_MAP, DEFAULT_TITLE_STYLE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
 import ChartTitleUpdate from './ChartTitleUpdate.vue'
 import { mapState } from 'vuex'
 import DePagination from '@/components/deCustomCm/pagination.js'
@@ -459,7 +459,7 @@ export default {
             this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px'
           }
 
-          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.fontFamily = customStyle.text.fontFamily ? CHART_CONT_FAMILY_MAP[customStyle.text.fontFamily] : DEFAULT_TITLE_STYLE.fontFamily
           this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
           this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
           // 表格总计与分页颜色，取标题颜色
diff --git a/core/frontend/src/views/chart/components/componentStyle/TitleSelector.vue b/core/frontend/src/views/chart/components/componentStyle/TitleSelector.vue
index d5691cc72e..0d52ad248e 100644
--- a/core/frontend/src/views/chart/components/componentStyle/TitleSelector.vue
+++ b/core/frontend/src/views/chart/components/componentStyle/TitleSelector.vue
@@ -50,6 +50,20 @@
                 :value="option.value"
               />
             </el-select>
+            <el-tooltip
+                class="item"
+                effect="dark"
+                placement="bottom"
+            >
+              <div
+                  slot="content"
+                  v-html="$t('chart.font_family_tip')"
+              />
+              <i
+                  class="el-icon-info"
+                  style="cursor: pointer;color: #606266;margin-left: 4px;"
+              />
+            </el-tooltip>
           </el-form-item>
           <el-form-item
             v-show="showProperty('fontSize')"
diff --git a/core/frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue b/core/frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue
index c48046f890..2c5eefbc23 100644
--- a/core/frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue
@@ -51,6 +51,20 @@
                 :value="option.value"
               />
             </el-select>
+            <el-tooltip
+              class="item"
+              effect="dark"
+              placement="bottom"
+            >
+              <div
+                slot="content"
+                v-html="$t('chart.font_family_tip')"
+              />
+              <i
+                class="el-icon-info"
+                style="cursor: pointer;color: #606266;margin-left: 4px;"
+              />
+            </el-tooltip>
           </el-form-item>
           <el-form-item
             v-show="showProperty('fontSize')"
diff --git a/core/frontend/src/views/chart/components/normal/LabelNormal.vue b/core/frontend/src/views/chart/components/normal/LabelNormal.vue
index c874c21a4d..b20f8f2f91 100644
--- a/core/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/core/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -49,7 +49,7 @@ import { getRemark, hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 import TitleRemark from '@/views/chart/view/TitleRemark'
-import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
+import { CHART_CONT_FAMILY_MAP, DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import ChartTitleUpdate from '../ChartTitleUpdate.vue'
 
 export default {
@@ -209,7 +209,7 @@ export default {
           this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
           this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
 
-          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.fontFamily = customStyle.text.fontFamily ? CHART_CONT_FAMILY_MAP[customStyle.text.fontFamily] : DEFAULT_TITLE_STYLE.fontFamily
           this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
           this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
diff --git a/core/frontend/src/views/chart/components/normal/LabelNormalText.vue b/core/frontend/src/views/chart/components/normal/LabelNormalText.vue
index c31a4dba2b..21064e0580 100644
--- a/core/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/core/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -61,7 +61,7 @@ import { getRemark, hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
 import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar'
 import TitleRemark from '@/views/chart/view/TitleRemark'
-import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
+import { CHART_CONT_FAMILY_MAP, DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import ChartTitleUpdate from '../ChartTitleUpdate.vue'
 
 export default {
@@ -236,7 +236,7 @@ export default {
           this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
           this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
 
-          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.fontFamily = customStyle.text.fontFamily ? CHART_CONT_FAMILY_MAP[customStyle.text.fontFamily] : DEFAULT_TITLE_STYLE.fontFamily
           this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
           this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
index 96a544de6f..bbb8916efa 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
@@ -524,242 +524,242 @@
       >
         <div v-show="!batchOptStatus">
           <el-form-item
-              v-show="showProperty('gaugeMin')"
-              :label="$t('chart.min')"
-              class="form-item"
+            v-show="showProperty('gaugeMin')"
+            :label="$t('chart.min')"
+            class="form-item"
           >
             <el-radio-group
-                v-model="sizeForm.gaugeMinType"
-                size="mini"
-                @change="changeQuotaField('min')"
+              v-model="sizeForm.gaugeMinType"
+              size="mini"
+              @change="changeQuotaField('min')"
             >
               <el-radio-button label="fix">{{ $t('chart.fix') }}</el-radio-button>
               <el-radio-button label="dynamic">{{ $t('chart.dynamic') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
           <el-form-item
-              v-if="showProperty('gaugeMin') && sizeForm.gaugeMinType === 'fix'"
-              class="form-item form-item-slider"
+            v-if="showProperty('gaugeMin') && sizeForm.gaugeMinType === 'fix'"
+            class="form-item form-item-slider"
           >
             <el-input-number
-                v-model="sizeForm.gaugeMin"
-                size="mini"
-                @change="changeBarSizeCase('gaugeMin')"
+              v-model="sizeForm.gaugeMin"
+              size="mini"
+              @change="changeBarSizeCase('gaugeMin')"
             />
           </el-form-item>
           <el-form-item
-              v-if="showProperty('gaugeMin') && sizeForm.gaugeMinType === 'dynamic'"
-              class="form-item form-flex"
+            v-if="showProperty('gaugeMin') && sizeForm.gaugeMinType === 'dynamic'"
+            class="form-item form-flex"
           >
             <el-select
-                v-model="sizeForm.gaugeMinField.id"
-                :placeholder="$t('chart.field')"
-                @change="changeQuotaField('min',true)"
+              v-model="sizeForm.gaugeMinField.id"
+              :placeholder="$t('chart.field')"
+              @change="changeQuotaField('min',true)"
             >
               <el-option
-                  v-for="item in quotaData"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
+                v-for="item in quotaData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
               >
-              <span style="float: left">
-                <svg-icon
+                <span style="float: left">
+                  <svg-icon
                     v-if="item.deType === 0"
                     icon-class="field_text"
                     class="field-icon-text"
-                />
-                <svg-icon
+                  />
+                  <svg-icon
                     v-if="item.deType === 1"
                     icon-class="field_time"
                     class="field-icon-time"
-                />
-                <svg-icon
+                  />
+                  <svg-icon
                     v-if="item.deType === 2 || item.deType === 3"
                     icon-class="field_value"
                     class="field-icon-value"
-                />
-                <svg-icon
+                  />
+                  <svg-icon
                     v-if="item.deType === 5"
                     icon-class="field_location"
                     class="field-icon-location"
-                />
-              </span>
+                  />
+                </span>
                 <span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
               </el-option>
             </el-select>
             <el-select
-                v-model="sizeForm.gaugeMinField.summary"
-                :placeholder="$t('chart.summary')"
-                @change="changeQuotaField('min')"
+              v-model="sizeForm.gaugeMinField.summary"
+              :placeholder="$t('chart.summary')"
+              @change="changeQuotaField('min')"
             >
               <el-option
-                  v-if="validMinField"
-                  key="sum"
-                  value="sum"
-                  :label="$t('chart.sum')"
+                v-if="validMinField"
+                key="sum"
+                value="sum"
+                :label="$t('chart.sum')"
               />
               <el-option
-                  v-if="validMinField"
-                  key="avg"
-                  value="avg"
-                  :label="$t('chart.avg')"
+                v-if="validMinField"
+                key="avg"
+                value="avg"
+                :label="$t('chart.avg')"
               />
               <el-option
-                  v-if="validMinField"
-                  key="max"
-                  value="max"
-                  :label="$t('chart.max')"
+                v-if="validMinField"
+                key="max"
+                value="max"
+                :label="$t('chart.max')"
               />
               <el-option
-                  v-if="validMinField"
-                  key="min"
-                  value="min"
-                  :label="$t('chart.min')"
+                v-if="validMinField"
+                key="min"
+                value="min"
+                :label="$t('chart.min')"
               />
               <el-option
-                  v-if="validMinField"
-                  key="stddev_pop"
-                  value="stddev_pop"
-                  :label="$t('chart.stddev_pop')"
+                v-if="validMinField"
+                key="stddev_pop"
+                value="stddev_pop"
+                :label="$t('chart.stddev_pop')"
               />
               <el-option
-                  v-if="validMinField"
-                  key="var_pop"
-                  value="var_pop"
-                  :label="$t('chart.var_pop')"
+                v-if="validMinField"
+                key="var_pop"
+                value="var_pop"
+                :label="$t('chart.var_pop')"
               />
               <el-option
-                  key="count"
-                  value="count"
-                  :label="$t('chart.count')"
+                key="count"
+                value="count"
+                :label="$t('chart.count')"
               />
               <el-option
-                  v-if="minField.id !== 'count'"
-                  key="count_distinct"
-                  value="count_distinct"
-                  :label="$t('chart.count_distinct')"
+                v-if="minField.id !== 'count'"
+                key="count_distinct"
+                value="count_distinct"
+                :label="$t('chart.count_distinct')"
               />
             </el-select>
           </el-form-item>
 
           <el-form-item
-              v-show="showProperty('gaugeMax')"
-              :label="$t('chart.max')"
-              class="form-item"
+            v-show="showProperty('gaugeMax')"
+            :label="$t('chart.max')"
+            class="form-item"
           >
             <el-radio-group
-                v-model="sizeForm.gaugeMaxType"
-                size="mini"
-                @change="changeQuotaField('max')"
+              v-model="sizeForm.gaugeMaxType"
+              size="mini"
+              @change="changeQuotaField('max')"
             >
               <el-radio-button label="fix">{{ $t('chart.fix') }}</el-radio-button>
               <el-radio-button label="dynamic">{{ $t('chart.dynamic') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
           <el-form-item
-              v-if="showProperty('gaugeMax') && sizeForm.gaugeMaxType === 'fix'"
-              class="form-item form-item-slider"
+            v-if="showProperty('gaugeMax') && sizeForm.gaugeMaxType === 'fix'"
+            class="form-item form-item-slider"
           >
             <el-input-number
-                v-model="sizeForm.gaugeMax"
-                size="mini"
-                @change="changeBarSizeCase('gaugeMax')"
+              v-model="sizeForm.gaugeMax"
+              size="mini"
+              @change="changeBarSizeCase('gaugeMax')"
             />
           </el-form-item>
           <el-form-item
-          v-if="showProperty('gaugeMax') && sizeForm.gaugeMaxType === 'dynamic'"
-          class="form-item form-flex"
-        >
-          <el-select
-            v-model="sizeForm.gaugeMaxField.id"
-            :placeholder="$t('chart.field')"
-            @change="changeQuotaField('max',true)"
+            v-if="showProperty('gaugeMax') && sizeForm.gaugeMaxType === 'dynamic'"
+            class="form-item form-flex"
           >
-            <el-option
-              v-for="item in quotaData"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
+            <el-select
+              v-model="sizeForm.gaugeMaxField.id"
+              :placeholder="$t('chart.field')"
+              @change="changeQuotaField('max',true)"
             >
-              <span style="float: left">
-                <svg-icon
-                  v-if="item.deType === 0"
-                  icon-class="field_text"
-                  class="field-icon-text"
-                />
-                <svg-icon
-                  v-if="item.deType === 1"
-                  icon-class="field_time"
-                  class="field-icon-time"
-                />
-                <svg-icon
-                  v-if="item.deType === 2 || item.deType === 3"
-                  icon-class="field_value"
-                  class="field-icon-value"
-                />
-                <svg-icon
-                  v-if="item.deType === 5"
-                  icon-class="field_location"
-                  class="field-icon-location"
-                />
-              </span>
-              <span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
-            </el-option>
-          </el-select>
-          <el-select
-            v-model="sizeForm.gaugeMaxField.summary"
-            :placeholder="$t('chart.summary')"
-            @change="changeQuotaField('max')"
-          >
-            <el-option
-              v-if="validMaxField"
-              key="sum"
-              value="sum"
-              :label="$t('chart.sum')"
-            />
-            <el-option
-              v-if="validMaxField"
-              key="avg"
-              value="avg"
-              :label="$t('chart.avg')"
-            />
-            <el-option
-              v-if="validMaxField"
-              key="max"
-              value="max"
-              :label="$t('chart.max')"
-            />
-            <el-option
-              v-if="validMaxField"
-              key="min"
-              value="min"
-              :label="$t('chart.min')"
-            />
-            <el-option
-              v-if="validMaxField"
-              key="stddev_pop"
-              value="stddev_pop"
-              :label="$t('chart.stddev_pop')"
-            />
-            <el-option
-              v-if="validMaxField"
-              key="var_pop"
-              value="var_pop"
-              :label="$t('chart.var_pop')"
-            />
-            <el-option
-              key="count"
-              value="count"
-              :label="$t('chart.count')"
-            />
-            <el-option
-              v-if="maxField.id !== 'count'"
-              key="count_distinct"
-              value="count_distinct"
-              :label="$t('chart.count_distinct')"
-            />
-          </el-select>
-        </el-form-item>
+              <el-option
+                v-for="item in quotaData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+                <span style="float: left">
+                  <svg-icon
+                    v-if="item.deType === 0"
+                    icon-class="field_text"
+                    class="field-icon-text"
+                  />
+                  <svg-icon
+                    v-if="item.deType === 1"
+                    icon-class="field_time"
+                    class="field-icon-time"
+                  />
+                  <svg-icon
+                    v-if="item.deType === 2 || item.deType === 3"
+                    icon-class="field_value"
+                    class="field-icon-value"
+                  />
+                  <svg-icon
+                    v-if="item.deType === 5"
+                    icon-class="field_location"
+                    class="field-icon-location"
+                  />
+                </span>
+                <span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
+              </el-option>
+            </el-select>
+            <el-select
+              v-model="sizeForm.gaugeMaxField.summary"
+              :placeholder="$t('chart.summary')"
+              @change="changeQuotaField('max')"
+            >
+              <el-option
+                v-if="validMaxField"
+                key="sum"
+                value="sum"
+                :label="$t('chart.sum')"
+              />
+              <el-option
+                v-if="validMaxField"
+                key="avg"
+                value="avg"
+                :label="$t('chart.avg')"
+              />
+              <el-option
+                v-if="validMaxField"
+                key="max"
+                value="max"
+                :label="$t('chart.max')"
+              />
+              <el-option
+                v-if="validMaxField"
+                key="min"
+                value="min"
+                :label="$t('chart.min')"
+              />
+              <el-option
+                v-if="validMaxField"
+                key="stddev_pop"
+                value="stddev_pop"
+                :label="$t('chart.stddev_pop')"
+              />
+              <el-option
+                v-if="validMaxField"
+                key="var_pop"
+                value="var_pop"
+                :label="$t('chart.var_pop')"
+              />
+              <el-option
+                key="count"
+                value="count"
+                :label="$t('chart.count')"
+              />
+              <el-option
+                v-if="maxField.id !== 'count'"
+                key="count_distinct"
+                value="count_distinct"
+                :label="$t('chart.count_distinct')"
+              />
+            </el-select>
+          </el-form-item>
         </div>
 
         <el-form-item
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
index 1005301e69..3a01dbacc2 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
@@ -140,6 +140,12 @@ export default {
       },
       linkageActiveParam: null,
       linkageActiveHistory: false,
+      CHART_CONT_FAMILY_MAP: {
+        'Microsoft YaHei': 'Microsoft YaHei',
+        'SimSun': 'SimSun, "Songti SC", STSong',
+        'SimHei': 'SimHei, Helvetica',
+        'KaiTi': 'KaiTi, "Kaiti SC", STKaiti'
+      }
     }
   },
 
@@ -248,7 +254,7 @@ export default {
           this.titleClass.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
           this.titleClass.fontSize = customStyle.text.isBolder ? 'bold' : 'normal'
 
-          this.titleClass.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : 'Microsoft YaHei'
+          this.titleClass.fontFamily = customStyle.text.fontFamily ? this.CHART_CONT_FAMILY_MAP[customStyle.text.fontFamily] : 'Microsoft YaHei'
           this.titleClass.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : '0') + 'px'
           this.titleClass.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
@@ -257,23 +263,6 @@ export default {
           this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
         }
 
-        if (customStyle.text) {
-          this.title_show = customStyle.text.show
-          this.title_class.fontSize = customStyle.text.fontSize + 'px'
-          this.title_class.color = customStyle.text.color
-          this.title_class.textAlign = customStyle.text.hPosition
-          this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
-          this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
-
-          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
-          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
-          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
-        }
-        if (customStyle.background) {
-          this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
-          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
-        }
-
       }
       this.initRemark()
     },
diff --git a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/index.vue b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/index.vue
index 799b4aa88e..e3d6aa98db 100644
--- a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/index.vue
+++ b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/index.vue
@@ -133,6 +133,12 @@ export default {
       },
       linkageActiveParam: null,
       linkageActiveHistory: false,
+      CHART_CONT_FAMILY_MAP: {
+        'Microsoft YaHei': 'Microsoft YaHei',
+        'SimSun': 'SimSun, "Songti SC", STSong',
+        'SimHei': 'SimHei, Helvetica',
+        'KaiTi': 'KaiTi, "Kaiti SC", STKaiti'
+      }
     }
   },
 
@@ -240,7 +246,7 @@ export default {
           this.titleClass.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
           this.titleClass.fontSize = customStyle.text.isBolder ? 'bold' : 'normal'
 
-          this.titleClass.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : 'Microsoft YaHei'
+          this.titleClass.fontFamily = customStyle.text.fontFamily ? this.CHART_CONT_FAMILY_MAP[customStyle.text.fontFamily] : 'Microsoft YaHei'
           this.titleClass.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : '0') + 'px'
           this.titleClass.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
@@ -249,23 +255,6 @@ export default {
           this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
         }
 
-        if (customStyle.text) {
-          this.title_show = customStyle.text.show
-          this.title_class.fontSize = customStyle.text.fontSize + 'px'
-          this.title_class.color = customStyle.text.color
-          this.title_class.textAlign = customStyle.text.hPosition
-          this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
-          this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
-
-          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
-          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
-          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
-        }
-        if (customStyle.background) {
-          this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
-          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
-        }
-
       }
       this.initRemark()
     },
diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/index.vue b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/index.vue
index b85247228f..a8a7cb31dc 100644
--- a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/index.vue
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/index.vue
@@ -107,7 +107,13 @@
           content: ''
         },
         buttonTextColor: null,
-        loading: true
+        loading: true,
+        CHART_CONT_FAMILY_MAP: {
+          'Microsoft YaHei': 'Microsoft YaHei',
+          'SimSun': 'SimSun, "Songti SC", STSong',
+          'SimHei': 'SimHei, Helvetica',
+          'KaiTi': 'KaiTi, "Kaiti SC", STKaiti'
+        }
       }
     },
 
@@ -175,7 +181,7 @@
         }
       }
 
-      
+
       this.myChart.destroy()
       this.pointLayer.layerPickService.layer.textureService.destroy()
       this.pointLayer.layerPickService.layer.textureService.rendererService.destroy()
@@ -200,7 +206,7 @@
       if (this.textLayer) {
         this.textLayer.configService.clean() // GlobalConfigService
       }
-      
+
       if (this.pointLayer) {
         for (const key in this.pointLayer) {
           this.pointLayer[key] = null
@@ -574,7 +580,7 @@
             this.titleClass.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
             this.titleClass.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
 
-            this.titleClass.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : 'Microsoft YaHei'
+            this.titleClass.fontFamily = customStyle.text.fontFamily ? this.CHART_CONT_FAMILY_MAP[customStyle.text.fontFamily] : 'Microsoft YaHei'
             this.titleClass.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : '0') + 'px'
             this.titleClass.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
           }