diff --git a/core/core-frontend/src/models/chart/chart.d.ts b/core/core-frontend/src/models/chart/chart.d.ts index 359037e9cb..4f3fbfc1a0 100644 --- a/core/core-frontend/src/models/chart/chart.d.ts +++ b/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 { 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 02a63739fe..efc953d811 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 @@ -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(() => {
+ + + + + { '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 { 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 { 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 { 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 { 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, 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 0735f8a78a..92015890aa 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 @@ -38,7 +38,7 @@ export class Line extends G2PlotChartView { 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 { 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 { 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 { 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',