refactor(视图): 优化视图的默认标签配置

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -532,7 +532,7 @@ declare interface ChartLabelAttr {
   /**
    * 标签格式化设置
    */
-  labelFormatter: BaseFormatter
+  labelFormatter: Partial<BaseFormatter>
   /**
    * 标签保留小数位数
    */

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

@@ -146,6 +146,20 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
     }
   }
 
+  setupDefaultOptions(chart: ChartObj): ChartObj {
+    chart.customAttr.label = {
+      ...chart.customAttr.label,
+      fontSize: 12,
+      show: true,
+      labelFormatter: {
+        type: 'percent',
+        thousandSeparator: true,
+        decimalCount: 2
+      }
+    }
+    return chart
+  }
+
   protected setupOptions(chart: Chart, options: LiquidOptions): LiquidOptions {
     return flow(this.configTheme, this.configMisc, this.configLabel)(chart, options)
   }

core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts

@@ -130,6 +130,10 @@ export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
     if (!['left', 'middle', 'right'].includes(label.position)) {
       label.position = 'middle'
     }
+    customAttr.label = {
+      ...label,
+      show: true
+    }
     return chart
   }
 

core/core-frontend/src/views/chart/components/js/panel/charts/others/gauge.ts

@@ -248,6 +248,20 @@ export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
     return { ...options, statistic }
   }
 
+  setupDefaultOptions(chart: ChartObj): ChartObj {
+    chart.customAttr.label = {
+      ...chart.customAttr.label,
+      show: true,
+      labelFormatter: {
+        type: 'value',
+        thousandSeparator: true,
+        decimalCount: 0,
+        unit: 1
+      }
+    }
+    return chart
+  }
+
   protected setupOptions(chart: Chart, options: GaugeOptions, ...extra: any[]): GaugeOptions {
     return flow(
       this.configTheme,

core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts

@@ -199,6 +199,20 @@ export class Treemap extends G2PlotChartView<TreemapOptions, G2Treemap> {
     }
     return { ...options, label }
   }
+
+  setupDefaultOptions(chart: ChartObj): ChartObj {
+    const customAttr = chart.customAttr
+    const { label } = customAttr
+    customAttr.label = {
+      ...label,
+      show: true,
+      showDimension: true,
+      showProportion: true,
+      reserveDecimalCount: 2
+    }
+    return chart
+  }
+
   protected setupOptions(chart: Chart, options: TreemapOptions): TreemapOptions {
     return flow(
       this.configTheme,

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

@@ -116,6 +116,7 @@ export class Pie extends G2PlotChartView<PieOptions, G2Pie> {
     }
     const label = {
       type: labelAttr.position === 'outer' ? 'spider' : labelAttr.position,
+      layout: [{ type: 'limit-in-plot' }],
       autoRotate: false,
       style: {
         fill: labelAttr.color,
@@ -222,6 +223,13 @@ export class Pie extends G2PlotChartView<PieOptions, G2Pie> {
     if (!['inner', 'outer'].includes(label.position)) {
       label.position = 'outer'
     }
+    customAttr.label = {
+      ...label,
+      show: true,
+      showDimension: true,
+      showProportion: true,
+      reserveDecimalCount: 2
+    }
     return chart
   }
 

core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts

@@ -208,6 +208,13 @@ export class Rose extends G2PlotChartView<RoseOptions, G2Rose> {
     if (!['inner', 'outer'].includes(label.position)) {
       label.position = 'outer'
     }
+    customAttr.label = {
+      ...label,
+      show: true,
+      showDimension: true,
+      showProportion: true,
+      reserveDecimalCount: 2
+    }
     return chart
   }