From ef9ab063cd0aac286734f413ff223efdcd80a352 Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Tue, 14 Nov 2023 19:18:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8C=87=E6=A0=87=E5=8D=A1=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E7=A9=BA=E5=80=BC=E5=A4=84=E7=90=86=E5=92=8C=E5=90=8E?=
 =?UTF-8?q?=E7=BC=80=20#5413=20#5576?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/customComponent/UserView.vue       | 74 +++++++-------
 core/frontend/src/lang/en.js                  |  7 ++
 core/frontend/src/lang/tw.js                  |  5 +
 core/frontend/src/lang/zh.js                  |  6 ++
 core/frontend/src/views/chart/chart/chart.js  | 15 ++-
 core/frontend/src/views/chart/chart/util.js   | 18 +++-
 .../chart/components/normal/LabelNormal.vue   | 28 +++++-
 .../chart/components/senior/FunctionCfg.vue   |  6 +-
 .../components/shapeAttr/ColorSelector.vue    | 13 +++
 .../components/shapeAttr/SizeSelector.vue     | 28 ++++++
 .../components/shapeAttr/SizeSelectorAntV.vue | 96 +++++++++++++++++++
 .../src/views/chart/view/ChartEdit.vue        |  6 +-
 12 files changed, 251 insertions(+), 51 deletions(-)

diff --git a/core/frontend/src/components/canvas/customComponent/UserView.vue b/core/frontend/src/components/canvas/customComponent/UserView.vue
index bd09268065..1ee4b721ea 100644
--- a/core/frontend/src/components/canvas/customComponent/UserView.vue
+++ b/core/frontend/src/components/canvas/customComponent/UserView.vue
@@ -205,34 +205,34 @@
 </template>
 
 <script>
-import {viewData} from '@/api/panel/panel'
-import {viewInfo} from '@/api/link'
+import { viewData } from '@/api/panel/panel'
+import { viewInfo } from '@/api/link'
 import ChartComponent from '@/views/chart/components/ChartComponent.vue'
 import TableNormal from '@/views/chart/components/table/TableNormal'
 import LabelNormal from '../../../views/chart/components/normal/LabelNormal'
-import {uuid} from 'vue-uuid'
+import { uuid } from 'vue-uuid'
 import bus from '@/utils/bus'
-import {mapState} from 'vuex'
-import {isChange} from '@/utils/conditionUtil'
-import {BASE_CHART_STRING} from '@/views/chart/chart/chart'
-import {deepCopy} from '@/components/canvas/utils/utils'
-import {getLinkToken, getToken} from '@/utils/auth'
+import { mapState } from 'vuex'
+import { isChange } from '@/utils/conditionUtil'
+import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
+import { deepCopy } from '@/components/canvas/utils/utils'
+import { getLinkToken, getToken } from '@/utils/auth'
 import DrillPath from '@/views/chart/view/DrillPath'
-import {areaMapping} from '@/api/map/map'
+import { areaMapping } from '@/api/map/map'
 import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
 import EditBarView from '@/components/canvas/components/editor/EditBarView'
-import {adaptCurTheme, customAttrTrans, customStyleTrans, recursionTransObj} from '@/components/canvas/utils/style'
+import { adaptCurTheme, customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
-import {viewEditSave, viewPropsSave} from '@/api/chart/chart'
-import {checkAddHttp} from '@/utils/urlUtils'
+import { viewEditSave, viewPropsSave } from '@/api/chart/chart'
+import { checkAddHttp } from '@/utils/urlUtils'
 import DeRichTextView from '@/components/canvas/customComponent/DeRichTextView'
 import Vue from 'vue'
-import {formatterItem, valueFormatter} from '@/views/chart/chart/formatter'
+import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
 import UserViewMobileDialog from '@/components/canvas/customComponent/UserViewMobileDialog'
-import {equalsAny} from '@/utils/StringUtils'
+import { equalsAny } from '@/utils/StringUtils'
 
 export default {
   name: 'UserView',
@@ -267,7 +267,7 @@ export default {
     outStyle: {
       type: Object,
       required: false,
-      default: function () {
+      default: function() {
         return {}
       }
     },
@@ -306,7 +306,7 @@ export default {
     canvasStyleData: {
       type: Object,
       required: false,
-      default: function () {
+      default: function() {
         return {}
       }
     },
@@ -508,7 +508,7 @@ export default {
 
   watch: {
     'innerPadding': {
-      handler: function (val1, val2) {
+      handler: function(val1, val2) {
         if (val1 !== val2) {
           this.resizeChart()
         }
@@ -516,7 +516,7 @@ export default {
       deep: true
     },
     'cfilters': {
-      handler: function (val1, val2) {
+      handler: function(val1, val2) {
         if (isChange(val1, val2) && !this.isFirstLoad) {
           this.getData(this.element.propValue.viewId)
           this.getDataLoading = true
@@ -532,13 +532,13 @@ export default {
       },
       deep: true
     },
-    resultCount: function () {
+    resultCount: function() {
       this.getData(this.element.propValue.viewId, false)
     },
-    resultMode: function () {
+    resultMode: function() {
       this.getData(this.element.propValue.viewId, false)
     },
-    gap: function () {
+    gap: function() {
       this.resizeChart()
     },
     // 监听外部的样式变化 （非实时性要求）
@@ -557,13 +557,13 @@ export default {
       deep: true
     },
     // 监听外部计时器变化
-    searchCount: function (val1) {
+    searchCount: function(val1) {
       // 内部计时器启动 忽略外部计时器
       if (val1 > 0 && this.requestStatus !== 'waiting' && !this.innerRefreshTimer) {
         this.getData(this.element.propValue.viewId)
       }
     },
-    'chartType': function (newVal, oldVal) {
+    'chartType': function(newVal, oldVal) {
       if ((newVal === 'map' || newVal === 'buddle-map') && newVal !== oldVal) {
         this.initAreas()
       }
@@ -577,10 +577,10 @@ export default {
       },
       deep: true
     },
-    'chart.yaxis': function (newVal, oldVal) {
+    'chart.yaxis': function(newVal, oldVal) {
       this.$emit('fill-chart-2-parent', this.chart)
     },
-    'chart.title': function (newVal, oldVal) {
+    'chart.title': function(newVal, oldVal) {
       this.$emit('fill-chart-2-parent', this.chart)
     }
   },
@@ -691,7 +691,7 @@ export default {
       })
     },
     pluginEditHandler(e) {
-      this.$emit('trigger-plugin-edit', {e, id: this.element.id})
+      this.$emit('trigger-plugin-edit', { e, id: this.element.id })
     },
     batchOptChange(param) {
       if (this.curBatchOptComponents.includes(this.element.propValue.viewId)) {
@@ -700,7 +700,7 @@ export default {
     },
     optFromBatchSingleProp(param) {
       this.$store.commit('canvasChange')
-      const updateParams = {'id': this.chart.id}
+      const updateParams = { 'id': this.chart.id }
       if (param.custom === 'customAttr') {
         const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
         if (!sourceCustomAttr[param.property]) {
@@ -733,11 +733,11 @@ export default {
       viewPropsSave(this.panelInfo.id, updateParams).then(rsp => {
         this.active && bus.$emit('current-component-change')
       })
-      this.$store.commit('recordViewEdit', {viewId: this.chart.id, hasEdit: true})
+      this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
       this.mergeScale()
     },
     optFromBatchThemeChange() {
-      const updateParams = {'id': this.chart.id}
+      const updateParams = { 'id': this.chart.id }
       const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
       const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
       adaptCurTheme(sourceCustomStyle, sourceCustomAttr, this.chart.type)
@@ -750,7 +750,7 @@ export default {
       viewPropsSave(this.panelInfo.id, updateParams).then(rsp => {
         this.active && bus.$emit('current-component-change')
       })
-      this.$store.commit('recordViewEdit', {viewId: this.chart.id, hasEdit: true})
+      this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
       this.mergeScale()
     },
     resizeChart() {
@@ -760,7 +760,7 @@ export default {
         this.chartResize(this.changeIndex)
       } else if (this.$refs[this.element.propValue.id]) {
         this.chart.isPlugin
-          ? this.$refs[this.element.propValue.id].callPluginInner({methodName: 'chartResize'})
+          ? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
           : this.$refs[this.element.propValue.id].chartResize()
       }
     },
@@ -825,11 +825,11 @@ export default {
         const filters = this.filter.filter
         const group = this.groupRequiredInvalid(filters)
         if (group.unReady?.length) {
-          this.view.unReadyMsg = '请先完成必填项过滤器！'
+          this.view && (this.view.unReadyMsg = '请先完成必填项过滤器！')
           this.getDataLoading = false
           return
         } else {
-          this.view.unReadyMsg = ''
+          this.view && (this.view.unReadyMsg = '')
         }
         if (this.getDataLoading || Vue.prototype.$currentHttpRequestList.get(`/chart/view/getData/${id}/${this.panelInfo.id}`)) {
           const url = `/chart/view/getData/${id}/${this.panelInfo.id}`
@@ -860,7 +860,7 @@ export default {
         }
         if (this.panelInfo.proxy) {
           // method = viewInfo
-          requestInfo.proxy = {userId: this.panelInfo.proxy}
+          requestInfo.proxy = { userId: this.panelInfo.proxy }
         }
         // table-info明细表增加分页
         if (this.view && this.view.customAttr) {
@@ -879,7 +879,7 @@ export default {
             this.chart = response.data
             this.view = response.data
             if (this.chart.type.includes('table')) {
-              this.$store.commit('setLastViewRequestInfo', {viewId: id, requestInfo: requestInfo})
+              this.$store.commit('setLastViewRequestInfo', { viewId: id, requestInfo: requestInfo })
             }
             this.buildInnerRefreshTimer(this.chart.refreshViewEnable, this.chart.refreshUnit, this.chart.refreshTime)
             this.$emit('fill-chart-2-parent', this.chart)
@@ -1048,7 +1048,7 @@ export default {
     chartClick(param) {
       if (this.drillClickDimensionList.length < this.chart.drillFields.length - 1) {
         (this.chart.type === 'map' || this.chart.type === 'buddle-map') && this.sendToChildren(param)
-        this.drillClickDimensionList.push({dimensionList: param.data.dimensionList})
+        this.drillClickDimensionList.push({ dimensionList: param.data.dimensionList })
         this.getData(this.element.propValue.viewId)
       } else if (this.chart.drillFields.length > 0) {
         this.$message({
@@ -1308,7 +1308,7 @@ export default {
         this.timeMachine = setTimeout(() => {
           if (index === this.changeIndex) {
             this.chart.isPlugin
-              ? this.$refs[this.element.propValue.id].callPluginInner({methodName: 'chartResize'})
+              ? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
               : this.$refs[this.element.propValue.id].chartResize()
           }
           this.destroyTimeMachine()
diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index fc1f6730f1..78e327f6c9 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -1161,6 +1161,12 @@ export default {
     quota_color: 'Value Color',
     dimension_font_size: 'Name FontSize',
     quota_font_size: 'Value FontSize',
+    quota_suffix: 'Value Suffix',
+    quota_suffix_font_size: 'Value Suffix FontSize',
+    quota_suffix_color: 'Value Suffix Color',
+    quota_suffix_font_family: 'Value Suffix Font Family',
+    quota_suffix_text_style: 'Value Suffix Style',
+    quota_suffix_letter_space: 'Value Suffix Letter Space',
     space_split: 'Name/Value Space',
     only_one_quota: 'Only support 1 quota',
     only_one_result: 'Only show first result',
@@ -1436,6 +1442,7 @@ export default {
     value_formatter_suffix: 'Unit Suffix',
     value_formatter_thousand_separator: 'Thousand Separator',
     value_formatter_example: 'Example',
+    value_suffix: 'Value Suffix',
     unit_none: 'None',
     unit_thousand: 'Thousand',
     unit_ten_thousand: 'Ten Thousand',
diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js
index a31ab5f69a..258f784a4e 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -1160,6 +1160,11 @@ export default {
     quota_color: '值顔色',
     dimension_font_size: '名稱字體大小',
     quota_font_size: '值字體大小',
+    quota_suffix_font_size: '後綴字體大小',
+    quota_suffix_font_family: '後綴字體',
+    quota_suffix_text_style: '後綴樣式',
+    quota_suffix_letter_space: '後綴字間距',
+    quota_suffix_color: '後綴顏色',
     space_split: '名稱/值間隔',
     only_one_quota: '僅支持1個指標',
     only_one_result: '僅顯示第1個計算結果',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index d896a56bf2..4177153841 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -1159,6 +1159,12 @@ export default {
     quota_color: '值颜色',
     dimension_font_size: '名称字体大小',
     quota_font_size: '值字体大小',
+    quota_suffix: '值后缀',
+    quota_suffix_font_size: '后缀字体大小',
+    quota_suffix_font_family: '后缀字体',
+    quota_suffix_text_style: '后缀样式',
+    quota_suffix_letter_space: '后缀字间距',
+    quota_suffix_color: '后缀颜色',
     space_split: '名称/值间隔',
     only_one_quota: '仅支持1个指标',
     only_one_result: '仅显示第1个计算结果',
diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js
index 9c17cadbe2..e4bc954ec8 100644
--- a/core/frontend/src/views/chart/chart/chart.js
+++ b/core/frontend/src/views/chart/chart/chart.js
@@ -39,7 +39,8 @@ export const DEFAULT_COLOR_CASE = {
   mapStyle: 'normal',
   mapLineGradient: false,
   mapLineSourceColor: '#146C94',
-  mapLineTargetColor: '#576CBC'
+  mapLineTargetColor: '#576CBC',
+  quotaSuffixColor: '#5470c6'
 }
 
 export const DEFAULT_COLOR_CASE_DARK = {
@@ -63,7 +64,8 @@ export const DEFAULT_COLOR_CASE_DARK = {
   mapStyle: 'darkblue',
   mapLineGradient: false,
   mapLineSourceColor: '#2F58CD',
-  mapLineTargetColor: '#3795BD'
+  mapLineTargetColor: '#3795BD',
+  quotaSuffixColor: '#5470c6'
 }
 export const DEFAULT_SIZE = {
   barDefault: true,
@@ -161,7 +163,14 @@ export const DEFAULT_SIZE = {
   mapLineAnimateTrailLength: 1,
   wordSizeRange: [8, 32],
   wordSpacing: 6,
-  showTableHeader: true
+  showTableHeader: true,
+  quotaSuffix: '',
+  quotaSuffixFontSize: 12,
+  quotaSuffixFontFamily: 'Microsoft YaHei',
+  quotaSuffixFontIsItalic: false,
+  quotaSuffixFontIsBolder: false,
+  quotaSuffixLetterSpace: '0',
+  quotaSuffixFontShadow: false
 }
 export const DEFAULT_SUSPENSION = {
   show: true
diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js
index 220354eefb..d8eafb566d 100644
--- a/core/frontend/src/views/chart/chart/util.js
+++ b/core/frontend/src/views/chart/chart/util.js
@@ -251,6 +251,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'quotaColor',
+        'quotaSuffixColor',
         'dimensionColor'
       ],
       'size-selector-ant-v': [
@@ -267,7 +268,13 @@ export const TYPE_CONFIGS = [
         'dimensionFontShadow',
         'spaceSplit',
         'hPosition',
-        'vPosition'
+        'vPosition',
+        'quotaSuffix',
+        'quotaSuffixFontSize',
+        'quotaSuffixFontFamily',
+        'quotaSuffixFontStyle',
+        'quotaSuffixLetterSpace',
+        'quotaSuffixFontShadow'
       ],
       'title-selector-ant-v': [
         'show',
@@ -2123,6 +2130,7 @@ export const TYPE_CONFIGS = [
 
       'color-selector': [
         'quotaColor',
+        'quotaSuffixColor',
         'dimensionColor'
       ],
       'size-selector': [
@@ -2139,7 +2147,13 @@ export const TYPE_CONFIGS = [
         'dimensionFontShadow',
         'spaceSplit',
         'hPosition',
-        'vPosition'
+        'vPosition',
+        'quotaSuffix',
+        'quotaSuffixFontSize',
+        'quotaSuffixFontFamily',
+        'quotaSuffixFontStyle',
+        'quotaSuffixLetterSpace',
+        'quotaSuffixFontShadow'
       ],
       'title-selector': [
         'show',
diff --git a/core/frontend/src/views/chart/components/normal/LabelNormal.vue b/core/frontend/src/views/chart/components/normal/LabelNormal.vue
index f1197d19bd..12c163b56f 100644
--- a/core/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/core/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -28,9 +28,12 @@
       :style="content_class"
     >
       <span :style="label_class">
-        <p :style="label_content_class">
+        <span :style="label_content_class">
           {{ result }}
-        </p>
+        </span>
+        <span :style="label_suffix_class">
+          {{ suffix }}
+        </span>
       </span>
       <span
         v-if="dimensionShow"
@@ -49,7 +52,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 { CHART_CONT_FAMILY_MAP, DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
+import { CHART_CONT_FAMILY_MAP, DEFAULT_COLOR_CASE, DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import ChartTitleUpdate from '../ChartTitleUpdate.vue'
 
 export default {
@@ -110,6 +113,10 @@ export default {
       remarkCfg: {
         show: false,
         content: ''
+      },
+      suffix: '',
+      label_suffix_class: {
+        fontSize: 12
       }
     }
   },
@@ -170,6 +177,7 @@ export default {
           this.label_class.color = customAttr.color.dimensionColor
           // color threshold
           this.colorThreshold(customAttr.color.quotaColor)
+          this.label_suffix_class.color = customAttr.color.quotaSuffixColor ?? DEFAULT_COLOR_CASE.quotaSuffixColor
         }
         // 设置背景
         this.colorThreshold(null, true)
@@ -193,7 +201,15 @@ export default {
 
           this.content_class.alignItems = customAttr.size.hPosition ? customAttr.size.hPosition : DEFAULT_SIZE.hPosition
           this.content_class.justifyContent = customAttr.size.vPosition ? customAttr.size.vPosition : DEFAULT_SIZE.vPosition
-
+          this.suffix = customAttr.size.quotaSuffix
+          if (this.suffix) {
+            this.label_suffix_class.fontSize = (customAttr.size.quotaSuffixFontSize ?? DEFAULT_SIZE.quotaSuffixFontSize) + 'px'
+            this.label_suffix_class.fontFamily = customAttr.size.quotaSuffixFontFamily ? customAttr.size.quotaSuffixFontFamily : DEFAULT_SIZE.quotaSuffixFontFamily
+            this.label_suffix_class.fontWeight = customAttr.size.quotaSuffixFontIsBolder ? 'bold' : 'normal'
+            this.label_suffix_class.fontStyle = customAttr.size.quotaSuffixFontIsItalic ? 'italic' : 'normal'
+            this.label_suffix_class.letterSpacing = (customAttr.size.quotaSuffixLetterSpace ? customAttr.size.quotaSuffixLetterSpace : DEFAULT_SIZE.quotaSuffixLetterSpace) + 'px'
+            this.label_suffix_class.textShadow = customAttr.size.quotaSuffixFontShadow ? '2px 2px 4px' : 'none'
+          }
           if (!this.dimensionShow) {
             this.label_space.marginTop = '0px'
           } else {
@@ -326,8 +342,12 @@ export default {
     resultFormat() {
       if (!this.chart.data) return
       const value = this.chart.data.series[0].data[0]
+      const senior = JSON.parse(this.chart.senior)
       if (value === null || value === undefined) {
         this.result = '-'
+        if (senior?.functionCfg?.emptyDataStrategy === 'setZero') {
+          this.result = 0
+        }
         return
       }
       let yAxis = []
diff --git a/core/frontend/src/views/chart/components/senior/FunctionCfg.vue b/core/frontend/src/views/chart/components/senior/FunctionCfg.vue
index 342ba22dc0..e5b99b5135 100644
--- a/core/frontend/src/views/chart/components/senior/FunctionCfg.vue
+++ b/core/frontend/src/views/chart/components/senior/FunctionCfg.vue
@@ -134,15 +134,15 @@ export default {
     showSlider() {
       return this.chart.type !== 'bidirectional-bar' &&
         !equalsAny(this.chart.type, 'map') &&
-        !includesAny(this.chart.type, 'table')
+        !includesAny(this.chart.type, 'table', 'text')
     },
     showEmptyStrategy() {
       return (this.chart.render === 'antv' &&
-        includesAny(this.chart.type, 'line', 'bar', 'area', 'table')) ||
+        includesAny(this.chart.type, 'line', 'bar', 'area', 'table', 'text')) ||
         (this.chart.render === 'echarts' && equalsAny(this.chart.type, 'map'))
     },
     showIgnoreOption() {
-      return !equalsAny(this.chart.type, 'map', 'table-pivot', 'table-info')
+      return !equalsAny(this.chart.type, 'map', 'table-pivot', 'table-info', 'text')
     },
     showEmptyDataFieldCtrl() {
       return this.showEmptyStrategy &&
diff --git a/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue b/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
index 66158bd917..f4941b0671 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
@@ -174,6 +174,18 @@
               @change="changeColorCase('quotaColor')"
             />
           </el-form-item>
+          <el-form-item
+            v-show="showProperty('quotaSuffixColor')"
+            :label="$t('chart.quota_suffix_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.quotaSuffixColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase('quotaSuffixColor')"
+            />
+          </el-form-item>
           <el-form-item
             v-show="showProperty('dimensionColor')"
             :label="$t('chart.dimension_color')"
@@ -593,6 +605,7 @@ export default {
           this.colorForm.tableHeaderFontColor = this.colorForm.tableHeaderFontColor ? this.colorForm.tableHeaderFontColor : this.colorForm.tableFontColor
           this.$set(this.colorForm, 'gradient', this.colorForm.gradient || false)
           this.colorForm.tableScrollBarColor = this.colorForm.tableScrollBarColor ? this.colorForm.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
+          this.colorForm.quotaSuffixColor = this.colorForm.quotaSuffixColor ? this.colorForm.quotaSuffixColor :DEFAULT_COLOR_CASE.quotaSuffixColor
 
           this.colorForm.mapStyle = this.colorForm.mapStyle ? this.colorForm.mapStyle : DEFAULT_COLOR_CASE.mapStyle
           this.colorForm.mapLineGradient = this.colorForm.mapLineGradient ? this.colorForm.mapLineGradient : DEFAULT_COLOR_CASE.mapLineGradient
diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
index ca4a384770..80683a9cbb 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue
@@ -523,6 +523,34 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item
+          v-show="showProperty('quotaSuffix')"
+          :label="$t('chart.quota_suffix')"
+          class="form-item"
+        >
+          <el-input
+            v-model="sizeForm.quotaSuffix"
+            @blur="changeBarSizeCase('quotaSuffix')"
+          />
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('quotaSuffixFontSize')"
+          :label="$t('chart.quota_suffix_font_size')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaSuffixFontSize"
+            :placeholder="$t('chart.quota_suffix_font_size')"
+            @change="changeBarSizeCase('quotaSuffixFontSize')"
+          >
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
         <el-form-item
           v-show="showProperty('quotaFontFamily')"
           :label="$t('chart.quota_font_family')"
diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
index 0b4bf1aee2..763e821f2b 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
@@ -979,6 +979,95 @@
             >{{ $t('chart.p_bottom') }}</el-option>
           </el-select>
         </el-form-item>
+        <el-divider v-if="showProperty('quotaSuffix')" />
+        <el-form-item
+          v-show="showProperty('quotaSuffix')"
+          :label="$t('chart.quota_suffix')"
+          class="form-item"
+        >
+          <el-input
+            v-model="sizeForm.quotaSuffix"
+            @blur="changeBarSizeCase('quotaSuffix')"
+          />
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('quotaSuffixFontSize')"
+          :label="$t('chart.quota_suffix_font_size')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaSuffixFontSize"
+            :placeholder="$t('chart.quota_suffix_font_size')"
+            @change="changeBarSizeCase('quotaSuffixFontSize')"
+          >
+            <el-option
+              v-for="option in fontSize"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('quotaSuffixFontFamily')"
+          :label="$t('chart.quota_suffix_font_family')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaSuffixFontFamily"
+            :placeholder="$t('chart.quota_suffix_font_family')"
+            @change="changeBarSizeCase('quotaSuffixFontFamily')"
+          >
+            <el-option
+              v-for="option in fontFamily"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('quotaSuffixFontStyle')"
+          :label="$t('chart.quota_suffix_text_style')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.quotaSuffixFontIsItalic"
+            @change="changeBarSizeCase('quotaSuffixFontIsItalic')"
+          >{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox
+            v-model="sizeForm.quotaSuffixFontIsBolder"
+            @change="changeBarSizeCase('quotaSuffixFontIsBolder')"
+          >{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('quotaSuffixLetterSpace')"
+          :label="$t('chart.quota_suffix_letter_space')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.quotaSuffixLetterSpace"
+            :placeholder="$t('chart.quota_suffix_letter_space')"
+            @change="changeBarSizeCase('quotaSuffixLetterSpace')"
+          >
+            <el-option
+              v-for="option in fontLetterSpace"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('quotaSuffixFontShadow')"
+          :label="$t('chart.font_shadow')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.quotaSuffixFontShadow"
+            @change="changeBarSizeCase('quotaSuffixFontShadow')"
+          >{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
         <el-divider v-if="showProperty('dimensionShow')" />
         <el-form-item
           v-show="showProperty('dimensionShow')"
@@ -1639,6 +1728,13 @@ export default {
           this.sizeForm.dimensionLetterSpace = this.sizeForm.dimensionLetterSpace ? this.sizeForm.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace
           this.sizeForm.dimensionFontShadow = this.sizeForm.dimensionFontShadow ? this.sizeForm.dimensionFontShadow : DEFAULT_SIZE.dimensionFontShadow
 
+          this.sizeForm.quotaSuffixFontSize = this.sizeForm.quotaSuffixFontSize ?? DEFAULT_SIZE.quotaSuffixFontSize
+          this.sizeForm.quotaSuffixFontFamily = this.sizeForm.quotaSuffixFontFamily ? this.sizeForm.quotaSuffixFontFamily : DEFAULT_SIZE.quotaSuffixFontFamily
+          this.sizeForm.quotaSuffixFontIsBolder = this.sizeForm.quotaSuffixFontIsBolder ? this.sizeForm.quotaSuffixFontIsBolder : DEFAULT_SIZE.quotaSuffixFontIsBolder
+          this.sizeForm.quotaSuffixFontIsItalic = this.sizeForm.quotaSuffixFontIsItalic ? this.sizeForm.quotaSuffixFontIsItalic : DEFAULT_SIZE.quotaSuffixFontIsItalic
+          this.sizeForm.quotaSuffixLetterSpace = this.sizeForm.quotaSuffixLetterSpace ? this.sizeForm.quotaSuffixLetterSpace : DEFAULT_SIZE.quotaSuffixLetterSpace
+          this.sizeForm.quotaSuffixFontShadow = this.sizeForm.quotaSuffixFontShadow ? this.sizeForm.quotaSuffixFontShadow : DEFAULT_SIZE.quotaSuffixFontShadow
+
           this.sizeForm.hPosition = this.sizeForm.hPosition ? this.sizeForm.hPosition : DEFAULT_SIZE.hPosition
           this.sizeForm.vPosition = this.sizeForm.vPosition ? this.sizeForm.vPosition : DEFAULT_SIZE.vPosition
 
diff --git a/core/frontend/src/views/chart/view/ChartEdit.vue b/core/frontend/src/views/chart/view/ChartEdit.vue
index 59aba3c8b7..d0ec9c8165 100644
--- a/core/frontend/src/views/chart/view/ChartEdit.vue
+++ b/core/frontend/src/views/chart/view/ChartEdit.vue
@@ -2065,11 +2065,11 @@ export default {
     },
     showSeniorCfg() {
       return includesAny(this.view.type, 'bar', 'line', 'area', 'table') ||
-        equalsAny(this.view.type, 'table-normal', 'table-info', 'map') || this.view.render === 'echarts' && includesAny(this.view.type, 'mix')
+        equalsAny(this.view.type, 'table-normal', 'table-info', 'map', 'text') || this.view.render === 'echarts' && includesAny(this.view.type, 'mix')
     },
     showFunctionCfg() {
       return includesAny(this.view.type, 'bar', 'line', 'area', 'mix', 'table') ||
-        equalsAny(this.view.type, 'map')
+        equalsAny(this.view.type, 'map', 'text')
     },
     showScrollCfg() {
       return equalsAny(this.view.type, 'table-normal', 'table-info')
@@ -3514,6 +3514,8 @@ export default {
         if (this.view?.senior?.functionCfg?.emptyDataStrategy === 'ignoreData') {
           this.view.senior.functionCfg.emptyDataStrategy = 'breakLine'
         }
+      } else if (type === 'label-normal') {
+        this.view.senior.functionCfg.emptyDataStrategy = 'breakLine'
       }
       // reset custom colors
       this.view.customAttr.color.seriesColors = []