Merge pull request #11303 from dataease/pr@dev-v2@chart-extremum-label-fix

fix(图表): 优化最值与标签的显示

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

@@ -147,7 +147,7 @@ const initSeriesLabel = () => {
       fontSize: COMPUTED_DEFAULT_LABEL.value.fontSize,
       showExtremum: false
     } as SeriesFormatter
-    if (seriesAxisMap[next.seriesId]) {
+    if (seriesAxisMap[next.id]) {
       tmp = {
         ...tmp,
         formatterCfg: seriesAxisMap[next.id].formatterCfg,

core/core-frontend/src/views/chart/components/js/extremumUitl.ts

@@ -104,18 +104,51 @@ const noChildrenFieldChart = chart => {
 
 export const extremumEvt = (newChart, chart, _options, container) => {
   chart.container = container
+  const { label: labelAttr } = parseJson(chart.customAttr)
+  const { yAxis } = parseJson(chart)
   newChart.on('beforerender', ev => {
     ev.view.on('beforepaint', () => {
       newChart.chart.geometries[0]?.beforeMappingData.forEach(i => {
+        i.forEach(item => {
+          delete item._origin.EXTREME
+        })
         const { minItem, maxItem } = findMinMax(i)
-        minItem._origin.EXTREME = true
+        let showExtremum = false
-        maxItem._origin.EXTREME = true
+        if (noChildrenFieldChart(chart) || yAxis.length > 1) {
+          const seriesLabelFormatter = labelAttr.seriesLabelFormatter.find(
+            d => d.name === minItem._origin.category || d.name === maxItem._origin.category
+          )
+          showExtremum = seriesLabelFormatter?.showExtremum
+        } else {
+          if (['bar-group'].includes(chart.type)) {
+            showExtremum = labelAttr.showExtremum
+          } else {
+            showExtremum = labelAttr.seriesLabelFormatter[0]?.showExtremum
+          }
+        }
+        if (showExtremum) {
+          minItem._origin.EXTREME = true
+          maxItem._origin.EXTREME = true
+        }
       })
     })
-    newChart.chart.geometries[0].on('beforerenderlabel', () => {
+    newChart.chart.geometries[0].on('afteranimate', () => {
       createExtremumPoint(chart, ev)
     })
   })
+  newChart.on('legend-item:click', ev => {
+    const legendShowSize = ev.view
+      .getController('legend')
+      .components[0].component.cfg.items.filter(l => !l.unchecked)
+    if (legendShowSize.length === 0) {
+      const allElement = document.getElementById('point_' + chart.id)
+      if (allElement && allElement.childNodes) {
+        allElement.childNodes.forEach(c => {
+          c.style.display = 'none'
+        })
+      }
+    }
+  })
 }
 
 const findMinMax = (data): { minItem; maxItem } => {
@@ -182,16 +215,25 @@ export const createExtremumPoint = (chart, ev) => {
         attr = labelAttr.seriesLabelFormatter[0]
       }
       const fontSize = attr ? attr.fontSize : labelAttr.fontSize
-      const maxKey = 'point_' + pointObj._origin.category + '-' + maxItem._origin.value
+      if (!minItem) {
+        return
+      }
+      const maxKey =
+        'point_' +
+        pointObj._origin.category +
+        '-' +
+        (maxItem ? maxItem._origin.value : minItem._origin.value)
       const minKey = 'point_' + pointObj._origin.category + '-' + minItem._origin.value
       // 最值标注
-      if (showExtremum) {
+      if (showExtremum && labelAttr.show) {
-        createExtremumDiv(
+        if (maxItem) {
-          maxKey,
+          createExtremumDiv(
-          maxItem._origin.value,
+            maxKey,
-          attr ? attr.formatterCfg : labelAttr.labelFormatter,
+            maxItem._origin.value,
-          chart.id
+            attr ? attr.formatterCfg : labelAttr.labelFormatter,
-        )
+            chart.id
+          )
+        }
         createExtremumDiv(
           minKey,
           minItem._origin.value,

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

@@ -353,6 +353,9 @@ export class GroupBar extends StackBar {
     const label = {
       ...baseOptions.label,
       formatter: function (param: Datum, _point) {
+        if (param.EXTREME) {
+          return ''
+        }
         const value = valueFormatter(param.value, labelAttr.labelFormatter)
         return labelAttr.childrenShow ? value : null
       }

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

@@ -136,6 +136,9 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
       fields: [],
       ...tmpOptions.label,
       formatter: (data: Datum, _point) => {
+        if (data.EXTREME) {
+          return ''
+        }
         if (!labelAttr.seriesLabelFormatter?.length) {
           return data.value
         }

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

@@ -133,6 +133,9 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
       offsetY: -8,
       layout: [{ type: 'hide-overlap' }, { type: 'limit-in-plot' }],
       formatter: (data: Datum, _point) => {
+        if (data.EXTREME) {
+          return ''
+        }
         if (!labelAttr.seriesLabelFormatter?.length) {
           return data.value
         }