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 fc927347c4..57cd7ccf5e 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 @@ -292,7 +292,7 @@ const configCompat = (labelAttr: DeepPartial) => { } } const checkLabelContent = contentProp => { - if (chartType.value === 'funnel') { + if (chartType.value === 'funnel' || chartType.value === 'liquid') { return false } const propIntersection = intersection(props.propertyInner, [ diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts index aaa38f4edf..9b83525d40 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts @@ -28,7 +28,7 @@ export class Liquid extends G2PlotChartView { 'background-overall-component': ['all'], 'border-style': ['all'], 'basic-style-selector': ['colors', 'alpha'], - 'label-selector': ['fontSize', 'color', 'labelFormatter'], + 'label-selector': ['fontSize', 'color', 'showQuota', 'showProportion'], 'misc-selector': [ 'liquidShape', 'liquidSize', @@ -171,21 +171,37 @@ export class Liquid extends G2PlotChartView { } } const label = customAttr.label - const labelFormatter = label.labelFormatter + const style = { + fontSize: label.fontSize.toString() + 'px', + color: label.color, + lineHeight: '"unset"', + overflow: 'visible' + } + const title = label.showQuota + ? { + style: { + ...style, + fontWeight: 'blod' + }, + formatter: () => { + return valueFormatter(chart.data.series[0].data[0], label.quotaLabelFormatter) + } + } + : false + const content = label.showProportion + ? { + style, + formatter: () => { + return (originVal * 100).toFixed(label.reserveDecimalCount) + '%' + } + } + : false + return { ...options, statistic: { - content: { - style: { - fontSize: label.fontSize.toString() + 'px', - color: label.color, - lineHeight: '"unset"', - overflow: 'visible' - }, - formatter: () => { - return valueFormatter(originVal, labelFormatter) - } - } + title, + content } } }