feat(图表): 进度条支持显示实际数值 #12469

core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue

@@ -473,6 +473,9 @@ const noFullDisplay = computed(() => {
 const isGauge = computed(() => {
   return props.chart.type === 'gauge'
 })
+const isProgressBar = computed(() => {
+  return props.chart.type === 'progress-bar'
+})
 </script>
 
 <template>
@@ -940,7 +943,7 @@ const isGauge = computed(() => {
         <el-checkbox
           v-model="state.labelForm.showQuota"
           :effect="themes"
-          :disabled="checkLabelContent('showQuota')"
+          :disabled="isProgressBar ? false : checkLabelContent('showQuota')"
           size="small"
           label="quota"
           @change="changeLabelAttr('showQuota')"
@@ -1060,12 +1063,12 @@ const isGauge = computed(() => {
         <el-checkbox
           v-model="state.labelForm.showProportion"
           :effect="themes"
-          :disabled="checkLabelContent('showProportion')"
+          :disabled="isProgressBar ? false : checkLabelContent('showProportion')"
           size="small"
           label="proportion"
           @change="changeLabelAttr('showProportion')"
         >
-          {{ t('chart.proportion') }}
+          {{ isProgressBar ? t('chart.value_formatter_percent') : t('chart.proportion') }}
         </el-checkbox>
       </el-form-item>
       <div style="padding-left: 22px">

core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts

@@ -55,7 +55,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
     'background-overall-component': ['all'],
     'border-style': ['all'],
     'basic-style-selector': ['colors', 'alpha', 'gradient', 'radiusColumnBar'],
-    'label-selector': ['hPosition', 'color', 'fontSize'],
+    'label-selector': ['hPosition', 'color', 'fontSize', 'showQuota', 'showProportion'],
     'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show'],
     'y-axis-selector': [
       'name',
@@ -249,27 +249,30 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
 
   protected configLabel(chart: Chart, options: BarOptions): BarOptions {
     const baseOptions = super.configLabel(chart, options)
-    if (!baseOptions.label) {
+    if (!baseOptions.label) return baseOptions
-      return baseOptions
+    if (!baseOptions.label.layout?.[0]) {
+      baseOptions.label.layout = [{ type: 'limit-in-canvas' }]
     }
     const { label: labelAttr } = parseJson(chart.customAttr)
     baseOptions.label.style.fill = labelAttr.color
     const label = {
       ...baseOptions.label,
       content: item => {
-        if (item.type === 'target') {
+        if (item.type === 'target') return ''
-          return ''
+        let text = ''
+        if (labelAttr.showQuota) text += valueFormatter(item.value, labelAttr.quotaLabelFormatter)
+        if (labelAttr.showProportion) {
+          let proportion = item.originalProgress.toFixed(labelAttr.reserveDecimalCount) + '%'
+          if (labelAttr.showQuota) {
+            proportion = ` (${proportion}) `
           }
-        return item.originalProgress.toFixed(2) + '%'
+          text += proportion
+        }
+        return text
       }
     }
-    if (label.position === 'top') {
+    if (label.position === 'top') label.position = 'right'
-      label.position = 'right'
+    return { ...baseOptions, label }
-    }
-    return {
-      ...baseOptions,
-      label
-    }
   }
   protected configYAxis(chart: Chart, options: BarOptions): BarOptions {
     const baseOption = super.configYAxis(chart, options)
@@ -300,6 +303,8 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
     chart.customStyle.legend.show = false
     chart.customAttr.label.show = true
     chart.customAttr.label.position = 'right'
+    chart.customAttr.label.showQuota = false
+    chart.customAttr.label.showProportion = true
     return chart
   }