From 844f23b586bbda70e82d1fc0191f346ed39fd7d0 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Mon, 31 Mar 2025 17:59:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=95=B0=E5=80=BC?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96=E5=86=85=EF=BC=8C=E6=95=B0=E9=87=8F?=
 =?UTF-8?q?=E5=8D=95=E4=BD=8D=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=E8=8B=B1?=
 =?UTF-8?q?=E6=96=87=E7=AE=80=E7=A7=B0=20#14335?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/locales/en.ts          |   3 +
 core/core-frontend/src/locales/tw.ts          |   3 +
 core/core-frontend/src/locales/zh-CN.ts       |   3 +
 .../core-frontend/src/models/chart/chart.d.ts |   1 +
 .../components/ValueFormatterEdit.vue         |  67 +-
 .../components/DualYAxisSelector.vue          |   5 +-
 .../components/DualYAxisSelectorInner.vue     | 127 ++--
 .../editor-style/components/LabelSelector.vue | 649 +++++++++++-------
 .../components/TooltipSelector.vue            | 237 ++++---
 .../editor-style/components/XAxisSelector.vue | 121 ++--
 .../editor-style/components/YAxisSelector.vue | 127 ++--
 .../chart/components/editor/util/chart.ts     |   3 +
 .../views/chart/components/js/formatter.ts    | 105 ++-
 .../extensions/view/dto/FormatterCfgDTO.java  |   1 +
 14 files changed, 944 insertions(+), 508 deletions(-)

diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index 916dae60af..d4f12cbc1e 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -1735,6 +1735,9 @@ export default {
     value_formatter_value: 'Number',
     value_formatter_percent: 'Percentage',
     value_formatter_unit: 'Unit',
+    value_formatter_unit_language: 'Language',
+    value_formatter_unit_language_ch: 'Chinese',
+    value_formatter_unit_language_en: 'English',
     value_formatter_decimal_count: 'Number of decimal places',
     value_formatter_suffix: 'Unit suffix',
     show_gap: 'Show interval value',
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index d7dbc87775..da374abeb0 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -1695,6 +1695,9 @@ export default {
     value_formatter_value: '數值',
     value_formatter_percent: '百分比',
     value_formatter_unit: '數量單位',
+    value_formatter_unit_language: '單位語言',
+    value_formatter_unit_language_ch: '中文',
+    value_formatter_unit_language_en: '英文',
     value_formatter_decimal_count: '小數位數',
     value_formatter_suffix: '單位字尾',
     show_gap: '顯示間隔值',
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index f595ff9f22..dc7e0944a2 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -1700,6 +1700,9 @@ export default {
     value_formatter_value: '数值',
     value_formatter_percent: '百分比',
     value_formatter_unit: '数量单位',
+    value_formatter_unit_language: '单位语言',
+    value_formatter_unit_language_ch: '中文',
+    value_formatter_unit_language_en: '英文',
     value_formatter_decimal_count: '小数位数',
     value_formatter_suffix: '单位后缀',
     show_gap: '显示间隔值',
diff --git a/core/core-frontend/src/models/chart/chart.d.ts b/core/core-frontend/src/models/chart/chart.d.ts
index aef3385b16..bca4d0b0b3 100644
--- a/core/core-frontend/src/models/chart/chart.d.ts
+++ b/core/core-frontend/src/models/chart/chart.d.ts
@@ -100,6 +100,7 @@ declare interface BaseFormatter {
   /**
    * 单位换算
    */
+  unitLanguage: 'ch' | 'en'
   unit: number
   /**
    * 单位后缀
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/components/ValueFormatterEdit.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/components/ValueFormatterEdit.vue
index b4d1166290..b317192ac3 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/components/ValueFormatterEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/components/ValueFormatterEdit.vue
@@ -1,7 +1,14 @@
 <script lang="tsx" setup>
 import { useI18n } from '@/hooks/web/useI18n'
 import { reactive, toRefs } from 'vue'
-import { formatterType, unitType, valueFormatter } from '@/views/chart/components/js/formatter'
+import {
+  isEnLocal,
+  formatterType,
+  getUnitTypeList,
+  onChangeFormatCfgUnitLanguage,
+  valueFormatter,
+  initFormatCfgUnit
+} from '@/views/chart/components/js/formatter'
 
 const { t } = useI18n()
 
@@ -20,13 +27,18 @@ const { formatterItem } = toRefs(props)
 
 const state = reactive({
   typeList: formatterType,
-  unitList: unitType,
   exampleResult: '20000000'
 })
 
+function changeUnitLanguage(cfg: BaseFormatter, lang) {
+  onChangeFormatCfgUnitLanguage(cfg, lang)
+}
+
 const init = () => {
   if (!formatterItem.value.formatterCfg) {
     formatterItem.value.formatterCfg = formatterItem
+
+    initFormatCfgUnit(formatterItem.value.formatterCfg)
   }
 }
 const getExampleValue = () => {
@@ -66,24 +78,39 @@ getExampleValue()
         />
       </el-form-item>
 
-      <el-form-item
-        v-if="formatterItem.formatterCfg.type !== 'percent'"
-        :label="t('chart.value_formatter_unit')"
-      >
-        <el-select
-          v-model="formatterItem.formatterCfg.unit"
-          :placeholder="t('chart.pls_select_field')"
-          @change="getExampleValue"
-          style="width: 100%"
-        >
-          <el-option
-            v-for="item in state.unitList"
-            :key="item.value"
-            :label="t('chart.' + item.name)"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
+      <template v-if="formatterItem.formatterCfg.type !== 'percent'">
+        <el-row :gutter="8">
+          <el-col :span="12" v-if="!isEnLocal">
+            <el-form-item :label="t('chart.value_formatter_unit_language')">
+              <el-select
+                v-model="formatterItem.formatterCfg.unitLanguage"
+                :placeholder="t('chart.pls_select_field')"
+                @change="v => changeUnitLanguage(formatterItem.formatterCfg, v)"
+              >
+                <el-option :label="t('chart.value_formatter_unit_language_ch')" value="ch" />
+                <el-option :label="t('chart.value_formatter_unit_language_en')" value="en" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="isEnLocal ? 24 : 12">
+            <el-form-item :label="t('chart.value_formatter_unit')">
+              <el-select
+                v-model="formatterItem.formatterCfg.unit"
+                :placeholder="t('chart.pls_select_field')"
+                @change="getExampleValue"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in getUnitTypeList(formatterItem.formatterCfg.unitLanguage)"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </template>
 
       <el-form-item :label="t('chart.value_formatter_suffix')">
         <el-input
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelector.vue
index 8b55883384..f076986c90 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelector.vue
@@ -1,13 +1,10 @@
 <script lang="tsx" setup>
-import { computed, onMounted, PropType, reactive, ref, watch } from 'vue'
+import { onMounted, PropType, reactive, ref, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import {
-  COLOR_PANEL,
   DEFAULT_YAXIS_EXT_STYLE,
   DEFAULT_YAXIS_STYLE
 } from '@/views/chart/components/editor/util/chart'
-import { formatterType, unitType } from '@/views/chart/components/js/formatter'
-import { ElMessage } from 'element-plus-secondary'
 import { cloneDeep } from 'lodash-es'
 import DualYAxisSelectorInner from './DualYAxisSelectorInner.vue'
 
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue
index 6a681960ea..6c8f314561 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue
@@ -3,8 +3,14 @@ import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '@/views/chart/components/editor/util/chart'
-import { formatterType, unitType } from '@/views/chart/components/js/formatter'
-import { ElMessage } from 'element-plus-secondary'
+import {
+  isEnLocal,
+  formatterType,
+  getUnitTypeList,
+  initFormatCfgUnit,
+  onChangeFormatCfgUnitLanguage
+} from '@/views/chart/components/js/formatter'
+import { ElFormItem, ElMessage } from 'element-plus-secondary'
 
 const { t } = useI18n()
 
@@ -25,7 +31,6 @@ const props = withDefaults(
 
 const predefineColors = COLOR_PANEL
 const typeList = formatterType
-const unitList = unitType
 const toolTip = computed(() => {
   return props.themes === 'dark' ? 'ndark' : 'dark'
 })
@@ -77,8 +82,14 @@ const changeAxisStyle = prop => {
   emit('onChangeYAxisForm', state.axisForm, prop)
 }
 
+function changeUnitLanguage(cfg: BaseFormatter, lang, prop: string) {
+  onChangeFormatCfgUnitLanguage(cfg, lang)
+  changeAxisStyle(prop)
+}
+
 const init = () => {
   state.axisForm = JSON.parse(JSON.stringify(props.form))
+  initFormatCfgUnit(state.axisForm.axisLabelFormatter)
 }
 
 const showProperty = prop => props.propertyInner?.includes(prop)
@@ -516,52 +527,82 @@ onMounted(() => {
             />
           </el-form-item>
 
-          <el-row
-            :gutter="8"
+          <template
             v-if="
               state.axisForm.axisLabel.show && state.axisForm.axisLabelFormatter.type !== 'percent'
             "
           >
-            <el-col :span="12">
-              <el-form-item
-                class="form-item"
-                :class="'form-item-' + themes"
-                :label="t('chart.value_formatter_unit')"
-              >
-                <el-select
-                  :effect="props.themes"
-                  v-model="state.axisForm.axisLabelFormatter.unit"
-                  :placeholder="t('chart.pls_select_field')"
-                  size="small"
-                  @change="changeAxisStyle('axisLabelFormatter.unit')"
+            <el-row :gutter="8">
+              <el-col :span="12" v-if="!isEnLocal">
+                <el-form-item
+                  :label="t('chart.value_formatter_unit_language')"
+                  class="form-item"
+                  :class="'form-item-' + themes"
                 >
-                  <el-option
-                    v-for="item in unitList"
-                    :key="item.value"
-                    :label="t('chart.' + item.name)"
-                    :value="item.value"
+                  <el-select
+                    size="small"
+                    :effect="themes"
+                    v-model="state.axisForm.axisLabelFormatter.unitLanguage"
+                    :placeholder="t('chart.pls_select_field')"
+                    @change="
+                      v =>
+                        changeUnitLanguage(
+                          state.axisForm.axisLabelFormatter,
+                          v,
+                          'axisLabelFormatter'
+                        )
+                    "
+                  >
+                    <el-option :label="t('chart.value_formatter_unit_language_ch')" value="ch" />
+                    <el-option :label="t('chart.value_formatter_unit_language_en')" value="en" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="isEnLocal ? 24 : 12">
+                <el-form-item
+                  class="form-item"
+                  :class="'form-item-' + themes"
+                  :label="t('chart.value_formatter_unit')"
+                >
+                  <el-select
+                    :effect="props.themes"
+                    v-model="state.axisForm.axisLabelFormatter.unit"
+                    :placeholder="t('chart.pls_select_field')"
+                    size="small"
+                    @change="changeAxisStyle('axisLabelFormatter.unit')"
+                  >
+                    <el-option
+                      v-for="item in getUnitTypeList(
+                        state.axisForm.axisLabelFormatter.unitLanguage
+                      )"
+                      :key="item.value"
+                      :label="item.name"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="8">
+              <el-col :span="24">
+                <el-form-item
+                  class="form-item"
+                  :class="'form-item-' + themes"
+                  :label="t('chart.value_formatter_suffix')"
+                >
+                  <el-input
+                    :disabled="!state.axisForm.axisLabel.show"
+                    :effect="props.themes"
+                    v-model="state.axisForm.axisLabelFormatter.suffix"
+                    size="small"
+                    clearable
+                    :placeholder="t('commons.input_content')"
+                    @change="changeAxisStyle('axisLabelFormatter.suffix')"
                   />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item
-                class="form-item"
-                :class="'form-item-' + themes"
-                :label="t('chart.value_formatter_suffix')"
-              >
-                <el-input
-                  :disabled="!state.axisForm.axisLabel.show"
-                  :effect="props.themes"
-                  v-model="state.axisForm.axisLabelFormatter.suffix"
-                  size="small"
-                  clearable
-                  :placeholder="t('commons.input_content')"
-                  @change="changeAxisStyle('axisLabelFormatter.suffix')"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
 
           <el-form-item class="form-item" :class="'form-item-' + themes">
             <el-checkbox
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
index 0b8b21e6e4..275b05b01c 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
@@ -4,7 +4,13 @@ import { computed, onMounted, PropType, reactive, ref, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
 import { ElFormItem, ElIcon, ElInput, ElSpace } from 'element-plus-secondary'
-import { formatterType, unitType } from '../../../js/formatter'
+import {
+  isEnLocal,
+  formatterType,
+  getUnitTypeList,
+  initFormatCfgUnit,
+  onChangeFormatCfgUnitLanguage
+} from '@/views/chart/components/js/formatter'
 import { defaultsDeep, cloneDeep, intersection, union, defaultTo, map, isEmpty } from 'lodash-es'
 import { includesAny } from '../../util/StringUtils'
 import { fieldType } from '@/utils/attr'
@@ -152,6 +158,7 @@ const initSeriesLabel = () => {
       position: 'top'
     } as SeriesFormatter
     if (seriesAxisMap[next[computedIdKey.value]]) {
+      initFormatCfgUnit(seriesAxisMap[next[computedIdKey.value]].formatterCfg)
       tmp = {
         ...tmp,
         formatterCfg: seriesAxisMap[next[computedIdKey.value]].formatterCfg,
@@ -253,6 +260,11 @@ const changeLabelAttr = (prop: string, render = true) => {
   emit('onLabelChange', { data: state.labelForm, render }, prop)
 }
 
+function changeLabelUnitLanguage(cfg: BaseFormatter, lang, prop: string, render = true) {
+  onChangeFormatCfgUnitLanguage(cfg, lang)
+  changeLabelAttr(prop, render)
+}
+
 const init = () => {
   const chart = JSON.parse(JSON.stringify(props.chart))
   if (chart.customAttr) {
@@ -260,6 +272,11 @@ const init = () => {
     if (customAttr.label) {
       configCompat(customAttr.label)
       state.labelForm = defaultsDeep(customAttr.label, cloneDeep(COMPUTED_DEFAULT_LABEL.value))
+      //初始化format单位语言
+      initFormatCfgUnit(state.labelForm.labelFormatter)
+      initFormatCfgUnit(state.labelForm.quotaLabelFormatter)
+      initFormatCfgUnit(state.labelForm.totalFormatter)
+
       if (chartType.value === 'liquid' && state.labelForm.fontSize < fontSizeList.value[0].value) {
         state.labelForm.fontSize = fontSizeList.value[0].value
       }
@@ -738,48 +755,71 @@ const isProgressBar = computed(() => {
         />
       </el-form-item>
 
-      <el-row
-        :gutter="8"
+      <template
         v-if="state.labelForm.labelFormatter && state.labelForm.labelFormatter.type !== 'percent'"
       >
-        <el-col :span="12">
-          <el-form-item
-            :label="$t('chart.value_formatter_unit')"
-            class="form-item"
-            :class="'form-item-' + themes"
-          >
-            <el-select
-              size="small"
-              :effect="themes"
-              v-model="state.labelForm.labelFormatter.unit"
-              :placeholder="$t('chart.pls_select_field')"
-              @change="changeLabelAttr('labelFormatter.unit')"
+        <el-row :gutter="8">
+          <el-col :span="12" v-if="!isEnLocal">
+            <el-form-item
+              :label="$t('chart.value_formatter_unit_language')"
+              class="form-item"
+              :class="'form-item-' + themes"
             >
-              <el-option
-                v-for="item in unitType"
-                :key="item.value"
-                :label="$t('chart.' + item.name)"
-                :value="item.value"
+              <el-select
+                size="small"
+                :effect="themes"
+                v-model="state.labelForm.labelFormatter.unitLanguage"
+                :placeholder="$t('chart.pls_select_field')"
+                @change="
+                  v => changeLabelUnitLanguage(state.labelForm.labelFormatter, v, 'labelFormatter')
+                "
+              >
+                <el-option :label="$t('chart.value_formatter_unit_language_ch')" value="ch" />
+                <el-option :label="$t('chart.value_formatter_unit_language_en')" value="en" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="isEnLocal ? 24 : 12">
+            <el-form-item
+              :label="$t('chart.value_formatter_unit')"
+              class="form-item"
+              :class="'form-item-' + themes"
+            >
+              <el-select
+                size="small"
+                :effect="themes"
+                v-model="state.labelForm.labelFormatter.unit"
+                :placeholder="$t('chart.pls_select_field')"
+                @change="changeLabelAttr('labelFormatter.unit')"
+              >
+                <el-option
+                  v-for="item in getUnitTypeList(state.labelForm.labelFormatter.unitLanguage)"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="8">
+          <el-col :span="24">
+            <el-form-item
+              :label="$t('chart.value_formatter_suffix')"
+              class="form-item"
+              :class="'form-item-' + themes"
+            >
+              <el-input
+                :effect="themes"
+                v-model="state.labelForm.labelFormatter.suffix"
+                clearable
+                :placeholder="$t('commons.input_content')"
+                @change="changeLabelAttr('labelFormatter.suffix')"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item
-            :label="$t('chart.value_formatter_suffix')"
-            class="form-item"
-            :class="'form-item-' + themes"
-          >
-            <el-input
-              :effect="themes"
-              v-model="state.labelForm.labelFormatter.suffix"
-              clearable
-              :placeholder="$t('commons.input_content')"
-              @change="changeLabelAttr('labelFormatter.suffix')"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </template>
 
       <el-form-item class="form-item" :class="'form-item-' + themes">
         <el-checkbox
@@ -871,48 +911,72 @@ const isProgressBar = computed(() => {
           />
         </el-form-item>
 
-        <el-row
-          :gutter="8"
+        <template
           v-if="state.labelForm.totalFormatter && state.labelForm.totalFormatter.type !== 'percent'"
         >
-          <el-col :span="12">
-            <el-form-item
-              :label="$t('chart.value_formatter_unit')"
-              class="form-item"
-              :class="'form-item-' + themes"
-            >
-              <el-select
-                size="small"
-                :effect="themes"
-                v-model="state.labelForm.totalFormatter.unit"
-                :placeholder="$t('chart.pls_select_field')"
-                @change="changeLabelAttr('totalFormatter.unit')"
+          <el-row :gutter="8">
+            <el-col :span="12" v-if="!isEnLocal">
+              <el-form-item
+                :label="$t('chart.value_formatter_unit_language')"
+                class="form-item"
+                :class="'form-item-' + themes"
               >
-                <el-option
-                  v-for="item in unitType"
-                  :key="item.value"
-                  :label="$t('chart.' + item.name)"
-                  :value="item.value"
+                <el-select
+                  size="small"
+                  :effect="themes"
+                  v-model="state.labelForm.totalFormatter.unitLanguage"
+                  :placeholder="$t('chart.pls_select_field')"
+                  @change="
+                    v =>
+                      changeLabelUnitLanguage(state.labelForm.totalFormatter, v, 'totalFormatter')
+                  "
+                >
+                  <el-option :label="$t('chart.value_formatter_unit_language_ch')" value="ch" />
+                  <el-option :label="$t('chart.value_formatter_unit_language_en')" value="en" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="isEnLocal ? 24 : 12">
+              <el-form-item
+                :label="$t('chart.value_formatter_unit')"
+                class="form-item"
+                :class="'form-item-' + themes"
+              >
+                <el-select
+                  size="small"
+                  :effect="themes"
+                  v-model="state.labelForm.totalFormatter.unit"
+                  :placeholder="$t('chart.pls_select_field')"
+                  @change="changeLabelAttr('totalFormatter.unit')"
+                >
+                  <el-option
+                    v-for="item in getUnitTypeList(state.labelForm.totalFormatter.unitLanguage)"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="8">
+            <el-col :span="24">
+              <el-form-item
+                :label="$t('chart.value_formatter_suffix')"
+                class="form-item"
+                :class="'form-item-' + themes"
+              >
+                <el-input
+                  :effect="themes"
+                  v-model="state.labelForm.totalFormatter.suffix"
+                  clearable
+                  :placeholder="$t('commons.input_content')"
+                  @change="changeLabelAttr('totalFormatter.suffix')"
                 />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item
-              :label="$t('chart.value_formatter_suffix')"
-              class="form-item"
-              :class="'form-item-' + themes"
-            >
-              <el-input
-                :effect="themes"
-                v-model="state.labelForm.totalFormatter.suffix"
-                clearable
-                :placeholder="$t('commons.input_content')"
-                @change="changeLabelAttr('totalFormatter.suffix')"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
 
         <el-form-item class="form-item" :class="'form-item-' + themes">
           <el-checkbox
@@ -1001,54 +1065,84 @@ const isProgressBar = computed(() => {
           />
         </el-form-item>
 
-        <el-row
-          :gutter="8"
+        <template
           v-if="
             state.labelForm.quotaLabelFormatter &&
             state.labelForm.quotaLabelFormatter.type !== 'percent'
           "
         >
-          <el-col :span="12">
-            <el-form-item
-              :label="t('chart.value_formatter_unit')"
-              class="form-item"
-              :class="'form-item-' + themes"
-            >
-              <el-select
-                :disabled="!state.labelForm.showQuota"
-                :effect="themes"
-                v-model="state.labelForm.quotaLabelFormatter.unit"
-                :placeholder="t('chart.pls_select_field')"
-                size="small"
-                @change="changeLabelAttr('quotaLabelFormatter.unit')"
+          <el-row :gutter="8">
+            <el-col :span="12" v-if="!isEnLocal">
+              <el-form-item
+                :label="$t('chart.value_formatter_unit_language')"
+                class="form-item"
+                :class="'form-item-' + themes"
               >
-                <el-option
-                  v-for="item in unitType"
-                  :key="item.value"
-                  :label="t('chart.' + item.name)"
-                  :value="item.value"
+                <el-select
+                  size="small"
+                  :effect="themes"
+                  v-model="state.labelForm.quotaLabelFormatter.unitLanguage"
+                  :placeholder="$t('chart.pls_select_field')"
+                  @change="
+                    v =>
+                      changeLabelUnitLanguage(
+                        state.labelForm.quotaLabelFormatter,
+                        v,
+                        'quotaLabelFormatter'
+                      )
+                  "
+                >
+                  <el-option :label="$t('chart.value_formatter_unit_language_ch')" value="ch" />
+                  <el-option :label="$t('chart.value_formatter_unit_language_en')" value="en" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="isEnLocal ? 24 : 12">
+              <el-form-item
+                :label="t('chart.value_formatter_unit')"
+                class="form-item"
+                :class="'form-item-' + themes"
+              >
+                <el-select
+                  :disabled="!state.labelForm.showQuota"
+                  :effect="themes"
+                  v-model="state.labelForm.quotaLabelFormatter.unit"
+                  :placeholder="t('chart.pls_select_field')"
+                  size="small"
+                  @change="changeLabelAttr('quotaLabelFormatter.unit')"
+                >
+                  <el-option
+                    v-for="item in getUnitTypeList(
+                      state.labelForm.quotaLabelFormatter.unitLanguage
+                    )"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="8">
+            <el-col :span="24">
+              <el-form-item
+                :label="t('chart.value_formatter_suffix')"
+                class="form-item"
+                :class="'form-item-' + themes"
+              >
+                <el-input
+                  :disabled="!state.labelForm.showQuota"
+                  :effect="themes"
+                  v-model="state.labelForm.quotaLabelFormatter.suffix"
+                  size="small"
+                  clearable
+                  :placeholder="t('commons.input_content')"
+                  @change="changeLabelAttr('quotaLabelFormatter.suffix')"
                 />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item
-              :label="t('chart.value_formatter_suffix')"
-              class="form-item"
-              :class="'form-item-' + themes"
-            >
-              <el-input
-                :disabled="!state.labelForm.showQuota"
-                :effect="themes"
-                v-model="state.labelForm.quotaLabelFormatter.suffix"
-                size="small"
-                clearable
-                :placeholder="t('commons.input_content')"
-                @change="changeLabelAttr('quotaLabelFormatter.suffix')"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
 
         <el-form-item class="form-item" :class="'form-item-' + themes">
           <el-checkbox
@@ -1267,55 +1361,83 @@ const isProgressBar = computed(() => {
             />
           </el-form-item>
 
-          <el-row
-            :gutter="8"
+          <template
             v-if="
               curSeriesFormatter.show &&
               curSeriesFormatter.formatterCfg &&
               curSeriesFormatter.formatterCfg.type !== 'percent'
             "
           >
-            <el-col :span="12">
-              <el-form-item
-                :label="t('chart.value_formatter_unit')"
-                class="form-item"
-                :class="'form-item-' + themes"
-              >
-                <el-select
-                  :disabled="!curSeriesFormatter.show"
-                  :effect="props.themes"
-                  v-model="curSeriesFormatter.formatterCfg.unit"
-                  :placeholder="t('chart.pls_select_field')"
-                  size="small"
-                  @change="changeLabelAttr('seriesLabelFormatter')"
+            <el-row :gutter="8">
+              <el-col :span="12" v-if="!isEnLocal">
+                <el-form-item
+                  :label="$t('chart.value_formatter_unit_language')"
+                  class="form-item"
+                  :class="'form-item-' + themes"
                 >
-                  <el-option
-                    v-for="item in unitType"
-                    :key="item.value"
-                    :label="t('chart.' + item.name)"
-                    :value="item.value"
+                  <el-select
+                    size="small"
+                    :effect="themes"
+                    v-model="curSeriesFormatter.formatterCfg.unitLanguage"
+                    :placeholder="$t('chart.pls_select_field')"
+                    @change="
+                      v =>
+                        changeLabelUnitLanguage(
+                          curSeriesFormatter.formatterCfg,
+                          v,
+                          'seriesLabelFormatter'
+                        )
+                    "
+                  >
+                    <el-option :label="$t('chart.value_formatter_unit_language_ch')" value="ch" />
+                    <el-option :label="$t('chart.value_formatter_unit_language_en')" value="en" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="isEnLocal ? 24 : 12">
+                <el-form-item
+                  :label="t('chart.value_formatter_unit')"
+                  class="form-item"
+                  :class="'form-item-' + themes"
+                >
+                  <el-select
+                    :disabled="!curSeriesFormatter.show"
+                    :effect="props.themes"
+                    v-model="curSeriesFormatter.formatterCfg.unit"
+                    :placeholder="t('chart.pls_select_field')"
+                    size="small"
+                    @change="changeLabelAttr('seriesLabelFormatter')"
+                  >
+                    <el-option
+                      v-for="item in getUnitTypeList(curSeriesFormatter.formatterCfg.unitLanguage)"
+                      :key="item.value"
+                      :label="item.name"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="8">
+              <el-col :span="24">
+                <el-form-item
+                  :label="t('chart.value_formatter_suffix')"
+                  class="form-item"
+                  :class="'form-item-' + themes"
+                >
+                  <el-input
+                    :disabled="!curSeriesFormatter.show"
+                    :effect="props.themes"
+                    v-model="curSeriesFormatter.formatterCfg.suffix"
+                    size="small"
+                    clearable
+                    :placeholder="t('commons.input_content')"
+                    @change="changeLabelAttr('seriesLabelFormatter')"
                   />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item
-                :label="t('chart.value_formatter_suffix')"
-                class="form-item"
-                :class="'form-item-' + themes"
-              >
-                <el-input
-                  :disabled="!curSeriesFormatter.show"
-                  :effect="props.themes"
-                  v-model="curSeriesFormatter.formatterCfg.suffix"
-                  size="small"
-                  clearable
-                  :placeholder="t('commons.input_content')"
-                  @change="changeLabelAttr('seriesLabelFormatter')"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
 
           <el-form-item class="form-item" :class="'form-item-' + themes">
             <el-checkbox
@@ -1478,50 +1600,74 @@ const isProgressBar = computed(() => {
           />
         </el-form-item>
 
-        <el-row
-          :gutter="8"
+        <template
           v-if="state.labelForm.labelFormatter && state.labelForm.labelFormatter.type !== 'percent'"
         >
-          <el-col :span="12">
-            <el-form-item
-              :label="$t('chart.value_formatter_unit')"
-              class="form-item"
-              :class="'form-item-' + themes"
-            >
-              <el-select
-                :disabled="!state.labelForm.childrenShow"
-                size="small"
-                :effect="themes"
-                v-model="state.labelForm.labelFormatter.unit"
-                :placeholder="$t('chart.pls_select_field')"
-                @change="changeLabelAttr('labelFormatter.unit')"
+          <el-row :gutter="8">
+            <el-col :span="12" v-if="!isEnLocal">
+              <el-form-item
+                :label="$t('chart.value_formatter_unit_language')"
+                class="form-item"
+                :class="'form-item-' + themes"
               >
-                <el-option
-                  v-for="item in unitType"
-                  :key="item.value"
-                  :label="$t('chart.' + item.name)"
-                  :value="item.value"
+                <el-select
+                  size="small"
+                  :effect="themes"
+                  v-model="state.labelForm.labelFormatter.unitLanguage"
+                  :placeholder="$t('chart.pls_select_field')"
+                  @change="
+                    v =>
+                      changeLabelUnitLanguage(state.labelForm.labelFormatter, v, 'labelFormatter')
+                  "
+                >
+                  <el-option :label="$t('chart.value_formatter_unit_language_ch')" value="ch" />
+                  <el-option :label="$t('chart.value_formatter_unit_language_en')" value="en" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="isEnLocal ? 24 : 12">
+              <el-form-item
+                :label="$t('chart.value_formatter_unit')"
+                class="form-item"
+                :class="'form-item-' + themes"
+              >
+                <el-select
+                  :disabled="!state.labelForm.childrenShow"
+                  size="small"
+                  :effect="themes"
+                  v-model="state.labelForm.labelFormatter.unit"
+                  :placeholder="$t('chart.pls_select_field')"
+                  @change="changeLabelAttr('labelFormatter.unit')"
+                >
+                  <el-option
+                    v-for="item in getUnitTypeList(state.labelForm.labelFormatter.unitLanguage)"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="8">
+            <el-col :span="24">
+              <el-form-item
+                :label="$t('chart.value_formatter_suffix')"
+                class="form-item"
+                :class="'form-item-' + themes"
+              >
+                <el-input
+                  :disabled="!state.labelForm.childrenShow"
+                  :effect="themes"
+                  v-model="state.labelForm.labelFormatter.suffix"
+                  clearable
+                  :placeholder="$t('commons.input_content')"
+                  @change="changeLabelAttr('labelFormatter.suffix')"
                 />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item
-              :label="$t('chart.value_formatter_suffix')"
-              class="form-item"
-              :class="'form-item-' + themes"
-            >
-              <el-input
-                :disabled="!state.labelForm.childrenShow"
-                :effect="themes"
-                v-model="state.labelForm.labelFormatter.suffix"
-                clearable
-                :placeholder="$t('commons.input_content')"
-                @change="changeLabelAttr('labelFormatter.suffix')"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
 
         <el-form-item class="form-item" :class="'form-item-' + themes">
           <el-checkbox
@@ -1711,50 +1857,75 @@ const isProgressBar = computed(() => {
           />
         </el-form-item>
 
-        <el-row
-          :gutter="8"
+        <template
           v-if="state.labelForm.labelFormatter && state.labelForm.labelFormatter.type !== 'percent'"
         >
-          <el-col :span="12">
-            <el-form-item
-              :label="$t('chart.value_formatter_unit')"
-              class="form-item"
-              :class="'form-item-' + themes"
-            >
-              <el-select
-                :disabled="!state.labelForm.childrenShow"
-                size="small"
-                :effect="themes"
-                v-model="state.labelForm.labelFormatter.unit"
-                :placeholder="$t('chart.pls_select_field')"
-                @change="changeLabelAttr('labelFormatter.unit')"
+          <el-row :gutter="8">
+            <el-col :span="12" v-if="!isEnLocal">
+              <el-form-item
+                :label="$t('chart.value_formatter_unit_language')"
+                class="form-item"
+                :class="'form-item-' + themes"
               >
-                <el-option
-                  v-for="item in unitType"
-                  :key="item.value"
-                  :label="$t('chart.' + item.name)"
-                  :value="item.value"
+                <el-select
+                  size="small"
+                  :effect="themes"
+                  v-model="state.labelForm.labelFormatter.unitLanguage"
+                  :placeholder="$t('chart.pls_select_field')"
+                  @change="
+                    v =>
+                      changeLabelUnitLanguage(state.labelForm.labelFormatter, v, 'labelFormatter')
+                  "
+                >
+                  <el-option :label="$t('chart.value_formatter_unit_language_ch')" value="ch" />
+                  <el-option :label="$t('chart.value_formatter_unit_language_en')" value="en" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="isEnLocal ? 24 : 12">
+              <el-form-item
+                :label="$t('chart.value_formatter_unit')"
+                class="form-item"
+                :class="'form-item-' + themes"
+              >
+                <el-select
+                  :disabled="!state.labelForm.childrenShow"
+                  size="small"
+                  :effect="themes"
+                  v-model="state.labelForm.labelFormatter.unit"
+                  :placeholder="$t('chart.pls_select_field')"
+                  @change="changeLabelAttr('labelFormatter.unit')"
+                >
+                  <el-option
+                    v-for="item in getUnitTypeList(state.labelForm.labelFormatter.unitLanguage)"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="8">
+            <el-col :span="24">
+              <el-form-item
+                :label="$t('chart.value_formatter_suffix')"
+                class="form-item"
+                :class="'form-item-' + themes"
+              >
+                <el-input
+                  :disabled="!state.labelForm.childrenShow"
+                  :effect="themes"
+                  v-model="state.labelForm.labelFormatter.suffix"
+                  clearable
+                  :placeholder="$t('commons.input_content')"
+                  @change="changeLabelAttr('labelFormatter.suffix')"
                 />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item
-              :label="$t('chart.value_formatter_suffix')"
-              class="form-item"
-              :class="'form-item-' + themes"
-            >
-              <el-input
-                :disabled="!state.labelForm.childrenShow"
-                :effect="themes"
-                v-model="state.labelForm.labelFormatter.suffix"
-                clearable
-                :placeholder="$t('commons.input_content')"
-                @change="changeLabelAttr('labelFormatter.suffix')"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
 
         <el-form-item class="form-item" :class="'form-item-' + themes">
           <el-checkbox
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
index 59c75a106d..91388d9775 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
@@ -3,10 +3,16 @@ import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { PropType, computed, onMounted, reactive, watch, ref, inject } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_TOOLTIP } from '@/views/chart/components/editor/util/chart'
-import { ElIcon, ElSpace } from 'element-plus-secondary'
+import { ElFormItem, ElIcon, ElSpace } from 'element-plus-secondary'
 import cloneDeep from 'lodash-es/cloneDeep'
 import defaultsDeep from 'lodash-es/defaultsDeep'
-import { formatterType, unitType } from '../../../js/formatter'
+import {
+  isEnLocal,
+  formatterType,
+  getUnitTypeList,
+  initFormatCfgUnit,
+  onChangeFormatCfgUnitLanguage
+} from '@/views/chart/components/js/formatter'
 import { fieldType } from '@/utils/attr'
 import { defaultTo, partition, map, includes, isEmpty } from 'lodash-es'
 import chartViewManager from '../../../js/panel'
@@ -229,6 +235,12 @@ const changeTooltipAttr = (prop: string, requestData = false, render = true) =>
   }
   emit('onTooltipChange', { data: state.tooltipForm, requestData, render }, prop)
 }
+
+function changeUnitLanguage(cfg: BaseFormatter, lang, prop: string) {
+  onChangeFormatCfgUnitLanguage(cfg, lang)
+  changeTooltipAttr(prop)
+}
+
 const formatterSelector = ref()
 const init = () => {
   const chart = JSON.parse(JSON.stringify(props.chart))
@@ -236,6 +248,9 @@ const init = () => {
     const customAttr = JSON.parse(JSON.stringify(chart.customAttr))
     if (customAttr.tooltip) {
       state.tooltipForm = defaultsDeep(customAttr.tooltip, cloneDeep(DEFAULT_TOOLTIP))
+      //初始化format单位语言
+      initFormatCfgUnit(state.tooltipForm.tooltipFormatter)
+
       formatterSelector.value?.blur()
       // 新增图表
       const formatter = state.tooltipForm.seriesTooltipFormatter
@@ -244,6 +259,9 @@ const init = () => {
         curSeriesFormatter.value = {}
         return
       }
+      formatter.forEach(f => {
+        initFormatCfgUnit(f)
+      })
       const seriesAxisMap = formatter.reduce((pre, next) => {
         next.seriesId = next.seriesId ?? next.id
         pre[next.seriesId] = next
@@ -590,47 +608,71 @@ onMounted(() => {
         />
       </el-form-item>
 
-      <el-row :gutter="8" v-if="state.tooltipForm.tooltipFormatter.type !== 'percent'">
-        <el-col :span="12">
-          <el-form-item
-            :label="t('chart.value_formatter_unit')"
-            class="form-item"
-            :class="'form-item-' + themes"
-          >
-            <el-select
-              :disabled="state.tooltipForm.tooltipFormatter.type === 'percent'"
-              :effect="props.themes"
-              v-model="state.tooltipForm.tooltipFormatter.unit"
-              :placeholder="t('chart.pls_select_field')"
-              size="small"
-              @change="changeTooltipAttr('tooltipFormatter.unit')"
+      <template v-if="state.tooltipForm.tooltipFormatter.type !== 'percent'">
+        <el-row :gutter="8">
+          <el-col :span="12" v-if="!isEnLocal">
+            <el-form-item
+              :label="$t('chart.value_formatter_unit_language')"
+              class="form-item"
+              :class="'form-item-' + themes"
             >
-              <el-option
-                v-for="item in unitType"
-                :key="item.value"
-                :label="t('chart.' + item.name)"
-                :value="item.value"
+              <el-select
+                size="small"
+                :effect="themes"
+                v-model="state.tooltipForm.tooltipFormatter.unitLanguage"
+                :placeholder="$t('chart.pls_select_field')"
+                @change="
+                  v => changeUnitLanguage(state.tooltipForm.tooltipFormatter, v, 'tooltipFormatter')
+                "
+              >
+                <el-option :label="$t('chart.value_formatter_unit_language_ch')" value="ch" />
+                <el-option :label="$t('chart.value_formatter_unit_language_en')" value="en" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="isEnLocal ? 24 : 12">
+            <el-form-item
+              :label="t('chart.value_formatter_unit')"
+              class="form-item"
+              :class="'form-item-' + themes"
+            >
+              <el-select
+                :disabled="state.tooltipForm.tooltipFormatter.type === 'percent'"
+                :effect="props.themes"
+                v-model="state.tooltipForm.tooltipFormatter.unit"
+                :placeholder="t('chart.pls_select_field')"
+                size="small"
+                @change="changeTooltipAttr('tooltipFormatter.unit')"
+              >
+                <el-option
+                  v-for="item in getUnitTypeList(state.tooltipForm.tooltipFormatter.unitLanguage)"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="8">
+          <el-col :span="24">
+            <el-form-item
+              :label="t('chart.value_formatter_suffix')"
+              class="form-item"
+              :class="'form-item-' + themes"
+            >
+              <el-input
+                :effect="props.themes"
+                v-model="state.tooltipForm.tooltipFormatter.suffix"
+                size="small"
+                clearable
+                :placeholder="t('commons.input_content')"
+                @change="changeTooltipAttr('tooltipFormatter.suffix')"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item
-            :label="t('chart.value_formatter_suffix')"
-            class="form-item"
-            :class="'form-item-' + themes"
-          >
-            <el-input
-              :effect="props.themes"
-              v-model="state.tooltipForm.tooltipFormatter.suffix"
-              size="small"
-              clearable
-              :placeholder="t('commons.input_content')"
-              @change="changeTooltipAttr('tooltipFormatter.suffix')"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </template>
 
       <el-form-item class="form-item" :class="'form-item-' + themes">
         <el-checkbox
@@ -781,50 +823,79 @@ onMounted(() => {
             />
           </el-form-item>
 
-          <el-row :gutter="8" v-if="curSeriesFormatter.formatterCfg.type !== 'percent'">
-            <el-col :span="12">
-              <el-form-item
-                :label="t('chart.value_formatter_unit')"
-                class="form-item"
-                :class="'form-item-' + themes"
-              >
-                <el-select
-                  :disabled="
-                    !curSeriesFormatter.show || curSeriesFormatter.formatterCfg.type == 'percent'
-                  "
-                  :effect="props.themes"
-                  v-model="curSeriesFormatter.formatterCfg.unit"
-                  :placeholder="t('chart.pls_select_field')"
-                  size="small"
-                  @change="changeTooltipAttr('seriesTooltipFormatter')"
+          <template v-if="curSeriesFormatter.formatterCfg.type !== 'percent'">
+            <el-row :gutter="8">
+              <el-col :span="12" v-if="!isEnLocal">
+                <el-form-item
+                  :label="$t('chart.value_formatter_unit_language')"
+                  class="form-item"
+                  :class="'form-item-' + themes"
                 >
-                  <el-option
-                    v-for="item in unitType"
-                    :key="item.value"
-                    :label="t('chart.' + item.name)"
-                    :value="item.value"
+                  <el-select
+                    size="small"
+                    :effect="themes"
+                    v-model="curSeriesFormatter.formatterCfg.unitLanguage"
+                    :placeholder="$t('chart.pls_select_field')"
+                    @change="
+                      v =>
+                        changeUnitLanguage(
+                          curSeriesFormatter.formatterCfg,
+                          v,
+                          'seriesTooltipFormatter'
+                        )
+                    "
+                  >
+                    <el-option :label="$t('chart.value_formatter_unit_language_ch')" value="ch" />
+                    <el-option :label="$t('chart.value_formatter_unit_language_en')" value="en" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="isEnLocal ? 24 : 12">
+                <el-form-item
+                  :label="t('chart.value_formatter_unit')"
+                  class="form-item"
+                  :class="'form-item-' + themes"
+                >
+                  <el-select
+                    :disabled="
+                      !curSeriesFormatter.show || curSeriesFormatter.formatterCfg.type == 'percent'
+                    "
+                    :effect="props.themes"
+                    v-model="curSeriesFormatter.formatterCfg.unit"
+                    :placeholder="t('chart.pls_select_field')"
+                    size="small"
+                    @change="changeTooltipAttr('seriesTooltipFormatter')"
+                  >
+                    <el-option
+                      v-for="item in getUnitTypeList(curSeriesFormatter.formatterCfg.unitLanguage)"
+                      :key="item.value"
+                      :label="item.name"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="8">
+              <el-col :span="24">
+                <el-form-item
+                  :label="t('chart.value_formatter_suffix')"
+                  class="form-item"
+                  :class="'form-item-' + themes"
+                >
+                  <el-input
+                    :disabled="!curSeriesFormatter.show"
+                    :effect="props.themes"
+                    v-model="curSeriesFormatter.formatterCfg.suffix"
+                    size="small"
+                    clearable
+                    :placeholder="t('commons.input_content')"
+                    @change="changeTooltipAttr('seriesTooltipFormatter')"
                   />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item
-                :label="t('chart.value_formatter_suffix')"
-                class="form-item"
-                :class="'form-item-' + themes"
-              >
-                <el-input
-                  :disabled="!curSeriesFormatter.show"
-                  :effect="props.themes"
-                  v-model="curSeriesFormatter.formatterCfg.suffix"
-                  size="small"
-                  clearable
-                  :placeholder="t('commons.input_content')"
-                  @change="changeTooltipAttr('seriesTooltipFormatter')"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
 
           <el-form-item class="form-item" :class="'form-item-' + themes">
             <el-checkbox
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
index 6a3209ea40..bce80c67db 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
@@ -3,8 +3,14 @@ import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { computed, onMounted, PropType, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '@/views/chart/components/editor/util/chart'
-import { formatterType, unitType } from '@/views/chart/components/js/formatter'
-import { ElMessage } from 'element-plus-secondary'
+import {
+  isEnLocal,
+  formatterType,
+  getUnitTypeList,
+  initFormatCfgUnit,
+  onChangeFormatCfgUnitLanguage
+} from '@/views/chart/components/js/formatter'
+import { ElFormItem, ElMessage } from 'element-plus-secondary'
 
 const { t } = useI18n()
 
@@ -24,7 +30,6 @@ const props = defineProps({
 
 const predefineColors = COLOR_PANEL
 const typeList = formatterType
-const unitList = unitType
 
 const state = reactive({
   axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE))
@@ -90,6 +95,11 @@ const changeAxisStyle = prop => {
   emit('onChangeXAxisForm', state.axisForm, prop)
 }
 
+function changeUnitLanguage(cfg: BaseFormatter, lang, prop: string) {
+  onChangeFormatCfgUnitLanguage(cfg, lang)
+  changeAxisStyle(prop)
+}
+
 const init = () => {
   const chart = JSON.parse(JSON.stringify(props.chart))
   if (chart.customStyle) {
@@ -101,6 +111,7 @@ const init = () => {
     }
     if (customStyle.xAxis) {
       state.axisForm = customStyle.xAxis
+      initFormatCfgUnit(state.axisForm.axisLabelFormatter)
     }
   }
 }
@@ -570,52 +581,76 @@ onMounted(() => {
           />
         </el-form-item>
 
-        <el-row
-          :gutter="8"
+        <template
           v-if="
             state.axisForm.axisLabel.show && state.axisForm.axisLabelFormatter.type !== 'percent'
           "
         >
-          <el-col :span="12">
-            <el-form-item
-              class="form-item"
-              :class="'form-item-' + themes"
-              :label="t('chart.value_formatter_unit')"
-            >
-              <el-select
-                :effect="props.themes"
-                v-model="state.axisForm.axisLabelFormatter.unit"
-                :placeholder="t('chart.pls_select_field')"
-                size="small"
-                @change="changeAxisStyle('axisLabelFormatter.unit')"
+          <el-row :gutter="8">
+            <el-col :span="12" v-if="!isEnLocal">
+              <el-form-item
+                :label="t('chart.value_formatter_unit_language')"
+                class="form-item"
+                :class="'form-item-' + themes"
               >
-                <el-option
-                  v-for="item in unitList"
-                  :key="item.value"
-                  :label="t('chart.' + item.name)"
-                  :value="item.value"
+                <el-select
+                  size="small"
+                  :effect="themes"
+                  v-model="state.axisForm.axisLabelFormatter.unitLanguage"
+                  :placeholder="t('chart.pls_select_field')"
+                  @change="
+                    v =>
+                      changeUnitLanguage(state.axisForm.axisLabelFormatter, v, 'axisLabelFormatter')
+                  "
+                >
+                  <el-option :label="t('chart.value_formatter_unit_language_ch')" value="ch" />
+                  <el-option :label="t('chart.value_formatter_unit_language_en')" value="en" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="isEnLocal ? 24 : 12">
+              <el-form-item
+                class="form-item"
+                :class="'form-item-' + themes"
+                :label="t('chart.value_formatter_unit')"
+              >
+                <el-select
+                  :effect="props.themes"
+                  v-model="state.axisForm.axisLabelFormatter.unit"
+                  :placeholder="t('chart.pls_select_field')"
+                  size="small"
+                  @change="changeAxisStyle('axisLabelFormatter.unit')"
+                >
+                  <el-option
+                    v-for="item in getUnitTypeList(state.axisForm.axisLabelFormatter.unitLanguage)"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="8">
+            <el-col :span="24">
+              <el-form-item
+                class="form-item"
+                :class="'form-item-' + themes"
+                :label="t('chart.value_formatter_suffix')"
+              >
+                <el-input
+                  :disabled="!state.axisForm.axisLabel.show"
+                  :effect="props.themes"
+                  v-model="state.axisForm.axisLabelFormatter.suffix"
+                  size="small"
+                  clearable
+                  :placeholder="t('commons.input_content')"
+                  @change="changeAxisStyle('axisLabelFormatter.suffix')"
                 />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item
-              class="form-item"
-              :class="'form-item-' + themes"
-              :label="t('chart.value_formatter_suffix')"
-            >
-              <el-input
-                :disabled="!state.axisForm.axisLabel.show"
-                :effect="props.themes"
-                v-model="state.axisForm.axisLabelFormatter.suffix"
-                size="small"
-                clearable
-                :placeholder="t('commons.input_content')"
-                @change="changeAxisStyle('axisLabelFormatter.suffix')"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
 
         <el-form-item class="form-item" :class="'form-item-' + themes">
           <el-checkbox
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
index c2a9a71e80..d4eb4ec342 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
@@ -3,8 +3,14 @@ import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { computed, onMounted, PropType, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '@/views/chart/components/editor/util/chart'
-import { formatterType, unitType } from '@/views/chart/components/js/formatter'
-import { ElMessage } from 'element-plus-secondary'
+import {
+  isEnLocal,
+  formatterType,
+  getUnitTypeList,
+  initFormatCfgUnit,
+  onChangeFormatCfgUnitLanguage
+} from '@/views/chart/components/js/formatter'
+import { ElFormItem, ElMessage } from 'element-plus-secondary'
 
 const { t } = useI18n()
 
@@ -24,7 +30,6 @@ const props = defineProps({
 
 const predefineColors = COLOR_PANEL
 const typeList = formatterType
-const unitList = unitType
 const toolTip = computed(() => {
   return props.themes === 'dark' ? 'ndark' : 'dark'
 })
@@ -76,6 +81,11 @@ const changeAxisStyle = prop => {
   emit('onChangeYAxisForm', state.axisForm, prop)
 }
 
+function changeUnitLanguage(cfg: BaseFormatter, lang, prop: string) {
+  onChangeFormatCfgUnitLanguage(cfg, lang)
+  changeAxisStyle(prop)
+}
+
 const init = () => {
   const chart = JSON.parse(JSON.stringify(props.chart))
   if (chart.customStyle) {
@@ -87,6 +97,7 @@ const init = () => {
     }
     if (customStyle.yAxis) {
       state.axisForm = customStyle.yAxis
+      initFormatCfgUnit(state.axisForm.axisLabelFormatter)
     }
   }
 }
@@ -551,52 +562,82 @@ onMounted(() => {
             />
           </el-form-item>
 
-          <el-row
-            :gutter="8"
+          <template
             v-if="
               state.axisForm.axisLabel.show && state.axisForm.axisLabelFormatter.type !== 'percent'
             "
           >
-            <el-col :span="12">
-              <el-form-item
-                class="form-item"
-                :class="'form-item-' + themes"
-                :label="t('chart.value_formatter_unit')"
-              >
-                <el-select
-                  :effect="props.themes"
-                  v-model="state.axisForm.axisLabelFormatter.unit"
-                  :placeholder="t('chart.pls_select_field')"
-                  size="small"
-                  @change="changeAxisStyle('axisLabelFormatter.unit')"
+            <el-row :gutter="8">
+              <el-col :span="12" v-if="!isEnLocal">
+                <el-form-item
+                  :label="t('chart.value_formatter_unit_language')"
+                  class="form-item"
+                  :class="'form-item-' + themes"
                 >
-                  <el-option
-                    v-for="item in unitList"
-                    :key="item.value"
-                    :label="t('chart.' + item.name)"
-                    :value="item.value"
+                  <el-select
+                    size="small"
+                    :effect="themes"
+                    v-model="state.axisForm.axisLabelFormatter.unitLanguage"
+                    :placeholder="t('chart.pls_select_field')"
+                    @change="
+                      v =>
+                        changeUnitLanguage(
+                          state.axisForm.axisLabelFormatter,
+                          v,
+                          'axisLabelFormatter'
+                        )
+                    "
+                  >
+                    <el-option :label="t('chart.value_formatter_unit_language_ch')" value="ch" />
+                    <el-option :label="t('chart.value_formatter_unit_language_en')" value="en" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="isEnLocal ? 24 : 12">
+                <el-form-item
+                  class="form-item"
+                  :class="'form-item-' + themes"
+                  :label="t('chart.value_formatter_unit')"
+                >
+                  <el-select
+                    :effect="props.themes"
+                    v-model="state.axisForm.axisLabelFormatter.unit"
+                    :placeholder="t('chart.pls_select_field')"
+                    size="small"
+                    @change="changeAxisStyle('axisLabelFormatter.unit')"
+                  >
+                    <el-option
+                      v-for="item in getUnitTypeList(
+                        state.axisForm.axisLabelFormatter.unitLanguage
+                      )"
+                      :key="item.value"
+                      :label="item.name"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="8">
+              <el-col :span="24">
+                <el-form-item
+                  class="form-item"
+                  :class="'form-item-' + themes"
+                  :label="t('chart.value_formatter_suffix')"
+                >
+                  <el-input
+                    :disabled="!state.axisForm.axisLabel.show"
+                    :effect="props.themes"
+                    v-model="state.axisForm.axisLabelFormatter.suffix"
+                    size="small"
+                    clearable
+                    :placeholder="t('commons.input_content')"
+                    @change="changeAxisStyle('axisLabelFormatter.suffix')"
                   />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item
-                class="form-item"
-                :class="'form-item-' + themes"
-                :label="t('chart.value_formatter_suffix')"
-              >
-                <el-input
-                  :disabled="!state.axisForm.axisLabel.show"
-                  :effect="props.themes"
-                  v-model="state.axisForm.axisLabelFormatter.suffix"
-                  size="small"
-                  clearable
-                  :placeholder="t('commons.input_content')"
-                  @change="changeAxisStyle('axisLabelFormatter.suffix')"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
 
           <el-form-item class="form-item" :class="'form-item-' + themes">
             <el-checkbox
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index 4c77f17c02..7c053e791e 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -662,6 +662,7 @@ export const DEFAULT_XAXIS_STYLE: ChartAxisStyle = {
   },
   axisLabelFormatter: {
     type: 'auto',
+    unitLanguage: 'ch',
     unit: 1,
     suffix: '',
     decimalCount: 2,
@@ -708,6 +709,7 @@ export const DEFAULT_YAXIS_STYLE: ChartAxisStyle = {
   },
   axisLabelFormatter: {
     type: 'auto',
+    unitLanguage: 'ch',
     unit: 1,
     suffix: '',
     decimalCount: 2,
@@ -752,6 +754,7 @@ export const DEFAULT_YAXIS_EXT_STYLE: ChartAxisStyle = {
   },
   axisLabelFormatter: {
     type: 'auto',
+    unitLanguage: 'ch',
     unit: 1,
     suffix: '',
     decimalCount: 2,
diff --git a/core/core-frontend/src/views/chart/components/js/formatter.ts b/core/core-frontend/src/views/chart/components/js/formatter.ts
index 480750eaba..133ce4f4c0 100644
--- a/core/core-frontend/src/views/chart/components/js/formatter.ts
+++ b/core/core-frontend/src/views/chart/components/js/formatter.ts
@@ -1,7 +1,13 @@
-import { Datum } from '@antv/g2plot'
+import { find } from 'lodash-es'
+import { useI18n } from '@/hooks/web/useI18n'
+import { getLocale } from '@/utils/utils'
+const { t } = useI18n()
+
+export const isEnLocal = getLocale() === 'en'
 
 export const formatterItem = {
   type: 'auto', // auto,value,percent
+  unitLanguage: 'ch',
   unit: 1, // 换算单位
   suffix: '', // 单位后缀
   decimalCount: 2, // 小数位数
@@ -10,12 +16,51 @@ export const formatterItem = {
 
 // 单位list
 export const unitType = [
-  { name: 'unit_none', value: 1 },
-  { name: 'unit_thousand', value: 1000 },
-  { name: 'unit_ten_thousand', value: 10000 },
-  { name: 'unit_million', value: 1000000 },
-  { name: 'unit_hundred_million', value: 100000000 }
+  { name: t('chart.unit_none'), value: 1 },
+  { name: t('chart.unit_thousand'), value: 1000 },
+  { name: t('chart.unit_ten_thousand'), value: 10000 },
+  { name: t('chart.unit_million'), value: 1000000 },
+  { name: t('chart.unit_hundred_million'), value: 100000000 }
 ]
+export const unitEnType = [
+  { name: 'None', value: 1 },
+  { name: 'Thousand (K)', value: 1000 },
+  { name: 'Million (M)', value: 1000000 },
+  { name: 'Billion (B)', value: 1000000000 }
+]
+
+export function getUnitTypeList(lang) {
+  if (isEnLocal) {
+    return unitEnType
+  }
+  if (lang === 'ch') {
+    return unitType
+  }
+  return unitEnType
+}
+
+export function getUnitTypeValue(lang, value) {
+  const list = getUnitTypeList(lang)
+  const item = find(list, l => l.value === value)
+  if (item) {
+    return value
+  }
+  return 1
+}
+
+export function initFormatCfgUnit(cfg) {
+  if (cfg.unitLanguage === undefined) {
+    cfg.unitLanguage = 'ch'
+  }
+  if (cfg && isEnLocal && cfg.unitLanguage === 'ch') {
+    cfg.unitLanguage = 'en'
+  }
+  onChangeFormatCfgUnitLanguage(cfg, cfg.unitLanguage)
+}
+
+export function onChangeFormatCfgUnitLanguage(cfg, lang) {
+  cfg.unit = getUnitTypeValue(lang, cfg.unit)
+}
 
 // 格式化方式
 export const formatterType = [
@@ -47,6 +92,7 @@ export function valueFormatter(value, formatter) {
 }
 
 function transUnit(value, formatter) {
+  initFormatCfgUnit(formatter)
   return value / formatter.unit
 }
 
@@ -88,34 +134,27 @@ function transSeparatorAndSuffix(value, formatter) {
     //百分比没有后缀，直接返回
     return str
   } else {
-    if (formatter.unit === 1000) {
-      str += '千'
-    } else if (formatter.unit === 10000) {
-      str += '万'
-    } else if (formatter.unit === 1000000) {
-      str += '百万'
-    } else if (formatter.unit === 100000000) {
-      str += '亿'
+    const unit = formatter.unit
+
+    if (formatter.unitLanguage === 'ch') {
+      if (unit === 1000) {
+        str += t('chart.unit_thousand')
+      } else if (unit === 10000) {
+        str += t('chart.unit_ten_thousand')
+      } else if (unit === 1000000) {
+        str += t('chart.unit_million')
+      } else if (unit === 100000000) {
+        str += t('chart.unit_hundred_million')
+      }
+    } else {
+      if (unit === 1000) {
+        str += 'K'
+      } else if (unit === 1000000) {
+        str += 'M'
+      } else if (unit === 1000000000) {
+        str += 'B'
+      }
     }
   }
   return str + formatter.suffix.replace(/(^\s*)|(\s*$)/g, '')
 }
-
-export function singleDimensionTooltipFormatter(param: Datum, chart: Chart, prop = 'category') {
-  let res
-  const yAxis = chart.yAxis
-  const obj = { name: param[prop], value: param.value }
-  for (let i = 0; i < yAxis.length; i++) {
-    const f = yAxis[i]
-    if (f.name === param[prop]) {
-      if (f.formatterCfg) {
-        res = valueFormatter(param.value, f.formatterCfg)
-      } else {
-        res = valueFormatter(param.value, formatterItem)
-      }
-      break
-    }
-  }
-  obj.value = res ?? ''
-  return obj
-}
diff --git a/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/FormatterCfgDTO.java b/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/FormatterCfgDTO.java
index aa8b1cb7be..281ef7bcaf 100644
--- a/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/FormatterCfgDTO.java
+++ b/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/FormatterCfgDTO.java
@@ -8,6 +8,7 @@ import lombok.Data;
 @Data
 public class FormatterCfgDTO {
     private String type = "auto"; // auto,value,percent
+    private String unitLanguage = "ch";
     private Integer unit = 1; // 换算单位
     private String suffix = ""; // 单位后缀
     private Integer decimalCount = 0; // 小数位数