From 53ebf769e4e030ec8699d296e9d160c62f6726ff Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Tue, 22 Oct 2024 20:07:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E5=9C=A8=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E7=9A=84=E8=AE=BE=E7=BD=AE=E9=A1=B9=E4=B8=AD=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E3=80=90=E5=85=A8=E9=87=8F=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E3=80=91=E7=9A=84=E9=80=89=E9=A1=B9=EF=BC=8C=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=85=A8=E9=87=8F=E6=98=BE=E7=A4=BA=E4=B8=8D=E5=8B=BE=E9=80=89?=
 =?UTF-8?q?=EF=BC=8C=E4=BB=A5=E6=9C=80=E4=BC=98=E6=98=BE=E7=A4=BA=E6=9D=A5?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=A0=87=E7=AD=BE=20#9829?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/locales/zh-CN.ts       |  3 +-
 .../src/models/chart/chart-attr.d.ts          |  6 +++-
 .../editor-style/components/LabelSelector.vue | 12 +++++++
 .../chart/components/editor/util/chart.ts     |  3 +-
 .../views/chart/components/js/extremumUitl.ts | 10 +++---
 .../js/panel/charts/bar/bidirectional-bar.ts  |  7 +++-
 .../components/js/panel/charts/line/area.ts   |  9 +++--
 .../components/js/panel/charts/line/line.ts   |  1 -
 .../js/panel/charts/map/bubble-map.ts         |  1 -
 .../components/js/panel/charts/map/map.ts     |  1 -
 .../js/panel/charts/others/funnel.ts          |  6 +++-
 .../js/panel/charts/others/quadrant.ts        |  7 +++-
 .../js/panel/charts/others/radar.ts           |  2 +-
 .../js/panel/charts/others/sankey.ts          |  6 +++-
 .../js/panel/charts/others/treemap.ts         |  3 ++
 .../components/js/panel/charts/pie/pie.ts     | 19 ++++++++++-
 .../components/js/panel/charts/pie/rose.ts    |  6 ++++
 .../js/panel/charts/table/t-heatmap.ts        |  6 +++-
 .../components/js/panel/common/common_antv.ts | 33 +++++++++++++++----
 19 files changed, 114 insertions(+), 27 deletions(-)

diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 2731a814dd..76d8a5e54c 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -1543,7 +1543,8 @@ export default {
     security_code: '安全密钥',
     auto_fit: '自适应缩放',
     zoom_level: '缩放等级',
-    central_point: '中心点'
+    central_point: '中心点',
+    full_display: '全量显示'
   },
   dataset: {
     scope_edit: '仅编辑时生效',
diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts
index fbaa5b3c5b..6b73e6dc25 100644
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@@ -313,7 +313,7 @@ declare interface ChartBasicStyle {
      * 纬度
      */
     latitude: number
-  },
+  }
   /**
    * 缩放等级
    */
@@ -922,6 +922,10 @@ declare interface ChartLabelAttr {
    * 柱状图堆叠指标
    */
   showStackQuota: boolean
+  /**
+   * 全部显示
+   */
+  fullDisplay: boolean
 }
 /**
  * 提示设置
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 ee7225db53..0b7e0dfed9 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
@@ -448,6 +448,9 @@ const conversionPrecision = [
   { name: t('chart.reserve_one'), value: 1 },
   { name: t('chart.reserve_two'), value: 2 }
 ]
+const noFullDisplay = computed(() => {
+  return !['symbolic-map', 'liquid', 'gauge', 'indicator'].includes(props.chart.type)
+})
 </script>
 
 <template>
@@ -459,6 +462,15 @@ const conversionPrecision = [
   >
     <el-row v-show="showEmpty" style="margin-bottom: 12px"> 无其他可设置的属性</el-row>
     <div>
+      <el-form-item v-if="noFullDisplay" class="form-item" :class="'form-item-' + themes">
+        <el-checkbox
+          size="small"
+          :effect="themes"
+          v-model="state.labelForm.fullDisplay"
+          @change="changeLabelAttr('fullDisplay')"
+          :label="t('chart.full_display')"
+        />
+      </el-form-item>
       <el-form-item
         v-if="showProperty('showStackQuota')"
         class="form-item"
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 22cdff6530..17f7dc3f1b 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
@@ -342,7 +342,8 @@ export const DEFAULT_LABEL: ChartLabelAttr = {
   totalFontSize: 12,
   totalColor: '#FFF',
   totalFormatter: formatterItem,
-  showStackQuota: false
+  showStackQuota: false,
+  fullDisplay: false
 }
 export const DEFAULT_TOOLTIP: ChartTooltipAttr = {
   show: true,
diff --git a/core/core-frontend/src/views/chart/components/js/extremumUitl.ts b/core/core-frontend/src/views/chart/components/js/extremumUitl.ts
index 047bb6746a..732a7e9e87 100644
--- a/core/core-frontend/src/views/chart/components/js/extremumUitl.ts
+++ b/core/core-frontend/src/views/chart/components/js/extremumUitl.ts
@@ -157,12 +157,10 @@ export const extremumEvt = (newChart, chart, _options, container) => {
         }
         let showExtremum = false
         if (noChildrenFieldChart(chart) || yAxis.length > 1) {
-          const seriesLabelFormatter = labelAttr.seriesLabelFormatter.find(d =>
-            d.chartShowName
-              ? d.chartShowName
-              : d.name === minItem._origin.category || d.chartShowName
-              ? d.chartShowName
-              : d.name === maxItem._origin.category
+          const seriesLabelFormatter = labelAttr.seriesLabelFormatter.find(
+            d =>
+              (d.chartShowName ? d.chartShowName : d.name === minItem._origin.category) ||
+              (d.chartShowName ? d.chartShowName : d.name === maxItem._origin.category)
           )
           showExtremum = seriesLabelFormatter?.showExtremum
         } else {
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
index dd21a10aff..5480b2c25f 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
@@ -429,9 +429,14 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
       if (customAttr.label) {
         const l = customAttr.label
         if (l.show) {
+          const layout = []
+          if (!labelAttr.fullDisplay) {
+            const tmpOptions = super.configLabel(chart, options)
+            layout.push(...tmpOptions.label.layout)
+          }
           label = {
             position: l.position,
-            layout: [{ type: 'limit-in-canvas' }],
+            layout,
             style: {
               fill: l.color,
               fontSize: l.fontSize
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
index baafe0395b..0077e3c46d 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
@@ -312,16 +312,21 @@ export class StackArea extends Area {
         label: false
       }
     }
+    const layout = []
+    if (!labelAttr.fullDisplay) {
+      const tmpOptions = super.configLabel(chart, options)
+      layout.push(...tmpOptions.label.layout)
+    }
     const label: Label = {
       position: labelAttr.position as any,
       offsetY: -8,
+      layout,
       style: {
         fill: labelAttr.color,
         fontSize: labelAttr.fontSize
       },
       formatter: function (param: Datum) {
-        const res = valueFormatter(param.value, labelAttr.labelFormatter)
-        return res
+        return valueFormatter(param.value, labelAttr.labelFormatter)
       }
     }
     return { ...options, label }
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
index b5bfb30743..f2b23b31ce 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
@@ -144,7 +144,6 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
       fields: [],
       ...tmpOptions.label,
       offsetY: -8,
-      layout: [{ type: 'hide-overlap' }, { type: 'limit-in-plot' }],
       formatter: (data: Datum, _point) => {
         if (data.EXTREME) {
           return ''
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts
index 5a9f799037..54fb48aba0 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts
@@ -92,7 +92,6 @@ export class BubbleMap extends L7PlotChartView<ChoroplethOptions, Choropleth> {
       label: {
         field: '_DE_LABEL_',
         style: {
-          textAllowOverlap: true,
           textAnchor: 'center'
         }
       },
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts
index a8ba1bd030..4ab380bcce 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts
@@ -145,7 +145,6 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
       label: {
         field: '_DE_LABEL_',
         style: {
-          textAllowOverlap: true,
           textAnchor: 'center'
         }
       },
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts
index fa3ad36de3..2cea0114d6 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts
@@ -124,9 +124,13 @@ export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
       if (customAttr.label?.show) {
         // label
         if (showQuota) {
+          const layout = []
+          if (!l.fullDisplay) {
+            layout.push(...[{ type: 'hide-overlap' }, { type: 'limit-in-plot' }])
+          }
           label = {
             position: l.position,
-            layout: [{ type: 'limit-in-canvas' }],
+            layout,
             style: {
               fill: l.color,
               fontSize: l.fontSize
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
index 23e94cc72f..4d0de4afce 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
@@ -295,6 +295,11 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
       if (customAttr.label) {
         const l = customAttr.label
         if (l.show) {
+          const layout = []
+          if (!l.fullDisplay) {
+            layout.push({ type: 'hide-overlap' })
+            layout.push({ type: 'limit-in-shape' })
+          }
           label = {
             offset: 0,
             style: {
@@ -304,7 +309,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
             content: datum => {
               return datum['name']
             },
-            layout: [{ type: 'limit-in-shape' }]
+            layout
           }
         } else {
           label = false
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts
index 31a38c0ef7..097c97d8e4 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts
@@ -72,7 +72,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
       xField: 'field',
       yField: 'value',
       seriesField: 'category',
-      appendPadding: getPadding(chart),
+      appendPadding: [10, 10, 10, 10],
       point: {
         size: 4,
         shape: 'circle',
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts
index d38dbfc300..6605e4f04a 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts
@@ -233,6 +233,10 @@ export class SankeyBar extends G2PlotChartView<SankeyOptions, Sankey> {
   protected configLabel(chart: Chart, options: SankeyOptions): SankeyOptions {
     const labelAttr = parseJson(chart.customAttr).label
     if (labelAttr.show) {
+      const layout = []
+      if (!labelAttr.fullDisplay) {
+        layout.push(...[{ type: 'hide-overlap' }, { type: 'limit-in-canvas' }])
+      }
       const label = {
         //...tmpOptions.label,
         formatter: ({ name }) => name,
@@ -247,7 +251,7 @@ export class SankeyBar extends G2PlotChartView<SankeyOptions, Sankey> {
             offsetX: isLast ? -8 : 8
           }
         },
-        layout: [{ type: 'hide-overlap' }, { type: 'limit-in-canvas' }]
+        layout
       }
       return {
         ...options,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts
index 0acf5777c7..2735418356 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts
@@ -200,6 +200,9 @@ export class Treemap extends G2PlotChartView<TreemapOptions, G2Treemap> {
         return res
       }
     }
+    if (labelAttr.fullDisplay) {
+      label.layout = [{ type: 'limit-in-plot' }]
+    }
     return { ...options, label }
   }
 
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts
index b68502ff4b..75670af8e6 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts
@@ -129,9 +129,26 @@ export class Pie extends G2PlotChartView<PieOptions, G2Pie> {
         label: false
       }
     }
+    const layout = []
+    const type =
+      labelAttr.position === 'inner'
+        ? labelAttr.fullDisplay
+          ? 'limit-in-plot'
+          : 'custom-layout'
+        : labelAttr.fullDisplay
+        ? 'hide-overlap'
+        : 'limit-in-plot'
+
+    if (type === 'custom-layout') {
+      const tmpOptions = super.configLabel(chart, options)
+      layout.push({ type: 'limit-in-plot' })
+      layout.push(...tmpOptions.label.layout)
+    } else {
+      layout.push({ type })
+    }
     const label = {
       type: labelAttr.position === 'outer' ? 'spider' : labelAttr.position,
-      layout: [{ type: 'limit-in-plot' }],
+      layout,
       autoRotate: false,
       style: {
         fill: labelAttr.color,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts
index 87e4a95c7a..66047b64ed 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts
@@ -115,8 +115,14 @@ export class Rose extends G2PlotChartView<RoseOptions, G2Rose> {
       }
     }
     const total = options.data?.reduce((pre, next) => add(pre, next.value ?? 0), 0)
+    const layout = []
+    if (!labelAttr.fullDisplay) {
+      const tmpOptions = super.configLabel(chart, options)
+      layout.push(...tmpOptions.label.layout)
+    }
     const labelOptions: Label = {
       autoRotate: true,
+      layout,
       style: {
         fill: labelAttr.color,
         fontSize: labelAttr.fontSize
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts
index 1b178914ce..2b6506a28c 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts
@@ -310,10 +310,14 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
     const tmpOptions = super.configLabel(chart, options)
     if (tmpOptions.label) {
       const extColor = deepCopy(chart.extColor)
+      const layout = []
+      if (!tmpOptions.label.fullDisplay) {
+        layout.push(...tmpOptions.label.layout)
+      }
       const label = {
         ...tmpOptions.label,
         position: 'middle',
-        layout: [{ type: 'hide-overlap' }, { type: 'limit-in-canvas' }],
+        layout,
         formatter: data => {
           const value = data[extColor[0]?.dataeaseName]
           if (!isNaN(Number(value))) {
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
index af74b45e3d..fac171275b 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
@@ -151,9 +151,24 @@ export function getLabel(chart: Chart) {
     if (customAttr.label) {
       const l = customAttr.label
       if (l.show) {
+        const layout = []
+        if (!l.fullDisplay) {
+          if (chart.type === 'bar-stack') {
+            layout.push({ type: 'interval-hide-overlap' })
+          } else if (
+            chart.type.indexOf('-horizontal') > -1 ||
+            ['bidirectional-bar', 'progress-bar', 'pie', 'pie-donut', 'radar'].includes(chart.type)
+          ) {
+            layout.push({ type: 'hide-overlap' })
+          } else {
+            layout.push({ type: 'limit-in-plot' })
+            layout.push({ type: 'fixed-overlap' })
+            layout.push({ type: 'hide-overlap' })
+          }
+        }
         label = {
           position: l.position,
-          layout: [{ type: 'limit-in-canvas' }],
+          layout,
           style: {
             fill: l.color,
             fontSize: l.fontSize
@@ -839,13 +854,19 @@ export function transAxisPosition(position: string): string {
 export function configL7Label(chart: Chart): false | LabelOptions {
   const customAttr = parseJson(chart.customAttr)
   const label = customAttr.label
+  const style = {
+    fill: label.color,
+    fontSize: label.fontSize,
+    textAllowOverlap: true,
+    fontWeight: 'bold'
+  }
+  if (!label.fullDisplay) {
+    style.textAllowOverlap = false
+    style.padding = [2, 2]
+  }
   return {
     visible: label.show,
-    style: {
-      fill: label.color,
-      fontSize: label.fontSize,
-      fontWeight: 'bold'
-    }
+    style
   }
 }