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