feat(图表): 折线图支持配置标签的位置

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

@@ -143,6 +143,10 @@ declare interface SeriesFormatter extends Axis {
 
   optionLabel?: string
   optionShowName?: string
+  /**
+   * 位置
+   */
+  position?: string
 }
 
 declare interface Axis extends ChartViewField {

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

@@ -149,7 +149,8 @@ const initSeriesLabel = () => {
       show: true,
       color: themeColor === 'dark' ? '#fff' : '#000',
       fontSize: COMPUTED_DEFAULT_LABEL.value.fontSize,
-      showExtremum: false
+      showExtremum: false,
+      position: 'top'
     } as SeriesFormatter
     if (seriesAxisMap[next[computedIdKey.value]]) {
       tmp = {
@@ -158,7 +159,8 @@ const initSeriesLabel = () => {
         show: seriesAxisMap[next[computedIdKey.value]].show,
         color: seriesAxisMap[next[computedIdKey.value]].color,
         fontSize: seriesAxisMap[next[computedIdKey.value]].fontSize,
-        showExtremum: seriesAxisMap[next[computedIdKey.value]].showExtremum
+        showExtremum: seriesAxisMap[next[computedIdKey.value]].showExtremum,
+        position: seriesAxisMap[next[computedIdKey.value]].position
       }
     } else {
       initFlag = true
@@ -188,12 +190,19 @@ const labelPositionH = [
   { name: t('chart.center'), value: 'middle' },
   { name: t('chart.text_pos_right'), value: 'right' }
 ]
-const labelPositionV = [
+const labelPositionVList = [
   { name: t('chart.text_pos_top'), value: 'top' },
   { name: t('chart.center'), value: 'middle' },
   { name: t('chart.text_pos_bottom'), value: 'bottom' }
 ]
 
+const labelPositionV = computed(() => {
+  if (['line', 'area-stack', 'area'].includes(chartType.value)) {
+    return labelPositionVList.filter(item => item.value !== 'middle')
+  }
+  return labelPositionVList
+})
+
 const chartType = computed(() => {
   const chart = JSON.parse(JSON.stringify(props.chart))
   return chart?.type
@@ -1136,6 +1145,28 @@ const noFullDisplay = computed(() => {
         </el-form-item>
 
         <div style="padding-left: 22px">
+          <el-form-item
+            v-if="showProperty('seriesLabelVPosition')"
+            class="form-item"
+            :class="'form-item-' + themes"
+            :label="t('chart.position')"
+          >
+            <el-select
+              :disabled="!curSeriesFormatter.show"
+              size="small"
+              :effect="themes"
+              v-model="curSeriesFormatter.position"
+              :placeholder="t('chart.label_position')"
+              @change="changeLabelAttr('seriesLabelFormatter')"
+            >
+              <el-option
+                v-for="option in labelPositionV"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
           <el-space>
             <el-form-item class="form-item" :class="'form-item-' + themes" :label="t('chart.text')">
               <el-color-picker

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

@@ -41,7 +41,7 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
       'gradient',
       'seriesColor'
     ],
-    'label-selector': ['seriesLabelFormatter', 'showExtremum'],
+    'label-selector': ['seriesLabelVPosition', 'seriesLabelFormatter', 'showExtremum'],
     'tooltip-selector': [
       ...LINE_EDITOR_PROPERTY_INNER['tooltip-selector'],
       'seriesTooltipFormatter'
@@ -134,7 +134,7 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
         label: false
       }
     }
-    const { label: labelAttr } = parseJson(chart.customAttr)
+    const { label: labelAttr, basicStyle } = parseJson(chart.customAttr)
     const formatterMap = labelAttr.seriesLabelFormatter?.reduce((pre, next) => {
       pre[next.id] = next
       return pre
@@ -143,6 +143,7 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
     const label = {
       fields: [],
       ...tmpOptions.label,
+      layout: labelAttr.fullDisplay ? [{ type: 'limit-in-plot' }] : tmpOptions.label.layout,
       formatter: (data: Datum, _point) => {
         if (data.EXTREME) {
           return ''
@@ -157,13 +158,17 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
         if (!labelCfg.show) {
           return
         }
+        const position =
+          labelCfg.position === 'top'
+            ? -2 - basicStyle.lineSymbolSize
+            : 10 + basicStyle.lineSymbolSize
         const value = valueFormatter(data.value, labelCfg.formatterCfg)
         const group = new Group({})
         group.addShape({
           type: 'text',
           attrs: {
             x: 0,
-            y: 0,
+            y: position,
             text: value,
             textAlign: 'start',
             textBaseline: 'top',
@@ -291,7 +296,7 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
 export class StackArea extends Area {
   propertyInner = {
     ...this['propertyInner'],
-    'label-selector': ['fontSize', 'color', 'labelFormatter'],
+    'label-selector': ['vPosition', 'fontSize', 'color', 'labelFormatter'],
     'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter', 'show']
   }
   axisConfig = {
@@ -304,8 +309,7 @@ export class StackArea extends Area {
     }
   }
   protected configLabel(chart: Chart, options: AreaOptions): AreaOptions {
-    const customAttr = parseJson(chart.customAttr)
-    const labelAttr = customAttr.label
+    const { label: labelAttr, basicStyle } = parseJson(chart.customAttr)
     if (!labelAttr?.show) {
       return {
         ...options,
@@ -316,10 +320,14 @@ export class StackArea extends Area {
     if (!labelAttr.fullDisplay) {
       const tmpOptions = super.configLabel(chart, options)
       layout.push(...tmpOptions.label.layout)
+    } else {
+      layout.push({ type: 'limit-in-plot' })
     }
+    const position =
+      labelAttr.position === 'top' ? -2 - basicStyle.lineSymbolSize : 8 + basicStyle.lineSymbolSize
     const label: Label = {
       position: labelAttr.position as any,
-      offsetY: -8,
+      offsetY: position,
       layout,
       style: {
         fill: labelAttr.color,

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

@@ -38,7 +38,7 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
   propertyInner = {
     ...LINE_EDITOR_PROPERTY_INNER,
     'basic-style-selector': [...LINE_EDITOR_PROPERTY_INNER['basic-style-selector'], 'seriesColor'],
-    'label-selector': ['seriesLabelFormatter', 'showExtremum'],
+    'label-selector': ['seriesLabelVPosition', 'seriesLabelFormatter', 'showExtremum'],
     'tooltip-selector': [
       ...LINE_EDITOR_PROPERTY_INNER['tooltip-selector'],
       'seriesTooltipFormatter'
@@ -133,7 +133,7 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
         label: false
       }
     }
-    const { label: labelAttr } = parseJson(chart.customAttr)
+    const { label: labelAttr, basicStyle } = parseJson(chart.customAttr)
     const formatterMap = labelAttr.seriesLabelFormatter?.reduce((pre, next) => {
       pre[next.id] = next
       return pre
@@ -142,7 +142,7 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
     const label = {
       fields: [],
       ...tmpOptions.label,
-      offsetY: -8,
+      layout: labelAttr.fullDisplay ? [{ type: 'limit-in-plot' }] : tmpOptions.label.layout,
       formatter: (data: Datum, _point) => {
         if (data.EXTREME) {
           return ''
@@ -157,13 +157,17 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
         if (!labelCfg.show) {
           return
         }
+        const position =
+          labelCfg.position === 'top'
+            ? -2 - basicStyle.lineSymbolSize
+            : 10 + basicStyle.lineSymbolSize
         const value = valueFormatter(data.value, labelCfg.formatterCfg)
         const group = new Group({})
         group.addShape({
           type: 'text',
           attrs: {
             x: 0,
-            y: 0,
+            y: position,
             text: value,
             textAlign: 'start',
             textBaseline: 'top',