Merge pull request #12837 from dataease/pr@dev-v2@chart-label-add-fulldisplay

feat(图表): 在标签的设置项中，增加【全量显示】的选项，默认全量显示不勾选，以最优显示来显示标签 #9829

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: '仅编辑时生效',

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
 }
 /**
  * 提示设置

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"

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,

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 =>
+          const seriesLabelFormatter = labelAttr.seriesLabelFormatter.find(
-            d.chartShowName
+            d =>
-              ? d.chartShowName
+              (d.chartShowName ? d.chartShowName : d.name === minItem._origin.category) ||
-              : d.name === minItem._origin.category || d.chartShowName
+              (d.chartShowName ? d.chartShowName : d.name === maxItem._origin.category)
-              ? d.chartShowName
-              : d.name === maxItem._origin.category
           )
           showExtremum = seriesLabelFormatter?.showExtremum
         } else {

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

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 valueFormatter(param.value, labelAttr.labelFormatter)
-        return res
       }
     }
     return { ...options, label }

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 ''

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'
         }
       },

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'
         }
       },

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

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

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',

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,

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 }
   }
 

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,

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

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))) {

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: {
+    style
-      fill: label.color,
-      fontSize: label.fontSize,
-      fontWeight: 'bold'
-    }
   }
 }