From 54acf06a763a7f5b9add34762e34159d4f320efa Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Mon, 8 Jun 2026 17:26:21 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E5=AD=90=E5=BC=B9=E5=9B=BE=E6=A8=AA=E7=BA=B5=E8=BD=B4?= =?UTF-8?q?=E8=BD=B4=E7=BA=BF=E4=BB=A5=E5=8F=8A=E6=A0=87=E7=AD=BE=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E9=80=8F=E6=98=8E=E5=BA=A6=E4=B8=BA=E4=B8=8D=E9=80=8F?= =?UTF-8?q?=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/js/panel/charts/g2/bar/bullet-graph.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts index abf8a4a677..7854ced9fd 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts @@ -334,13 +334,15 @@ export class BulletGraph extends G2ChartView { line: axis.axisLine.show, lineLineWidth: axis.axisLine.lineStyle.width, lineStroke: axis.axisLine.lineStyle.color, - lineLineDash: getLineDash(axis.axisLine.lineStyle.style) + lineLineDash: getLineDash(axis.axisLine.lineStyle.style), + lineStrokeOpacity: 1 } // 刻度 const tick = { tick: axis.axisLine.show, tickLineWidth: axis.axisLine.lineStyle.width, - tickStroke: axis.axisLine.lineStyle.color + tickStroke: axis.axisLine.lineStyle.color, + tickOpacity: 1 } // 网格线 const grid = { @@ -355,6 +357,7 @@ export class BulletGraph extends G2ChartView { label: axis.axisLabel.show, labelFontSize: axis.axisLabel.fontSize, labelFill: axis.axisLabel.color, + labelOpacity: 1, labelFormatter: value => { if (axisType === 'yAxis') { return valueFormatter(value, axis.axisLabelFormatter) From e36865ff7eaf36086d5bed4a00c4ec239dc514bf Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Mon, 8 Jun 2026 17:51:13 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E5=AD=90=E5=BC=B9=E5=9B=BE=E6=A0=87=E7=AD=BE=E4=BD=8D?= =?UTF-8?q?=E7=BD=AE=E9=85=8D=E7=BD=AE=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BB=A5=E5=8F=8A=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=AD=90=E5=BC=B9=E5=9B=BE=E6=96=B9=E5=90=91=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E5=AF=B9=E6=A0=87=E7=AD=BE=E4=BD=8D=E7=BD=AE=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../editor-style/components/LabelSelector.vue | 61 +++++++++++-------- .../components/bullet/BulletRangeSelector.vue | 19 ++++++ .../js/panel/charts/g2/bar/bullet-graph.ts | 40 +++++++++--- 3 files changed, 86 insertions(+), 34 deletions(-) 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 6feaea16fe..22f5da751a 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 @@ -347,6 +347,9 @@ const isBarRangeTime = computed(() => { }) const showPositionH = computed(() => { if (showProperty('hPosition')) { + if (props.chart.type === 'bullet-graph') { + return props.chart.customAttr.basicStyle.layout === 'horizontal' + } if (props.chart.type !== 'bidirectional-bar') { return true } @@ -356,6 +359,9 @@ const showPositionH = computed(() => { }) const showPositionV = computed(() => { if (showProperty('vPosition')) { + if (props.chart.type === 'bullet-graph') { + return props.chart.customAttr.basicStyle.layout !== 'horizontal' + } if (props.chart.type !== 'bidirectional-bar' && props.chart.type !== 'bar-group') { return true } @@ -363,38 +369,42 @@ const showPositionV = computed(() => { } return false }) +function initLayoutPosition() { + const layout = props.chart.customAttr.basicStyle.layout + const oldPosition = state?.labelForm?.position + if (state?.labelForm?.position === 'inner' || state?.labelForm?.position === 'outer') { + state.labelForm.position = 'middle' + } + if (layout === 'horizontal') { + if (state?.labelForm?.position === 'top') { + state.labelForm.position = 'right' + } + if (state?.labelForm?.position === 'bottom') { + state.labelForm.position = 'left' + } + } else { + if (state?.labelForm?.position === 'left') { + state.labelForm.position = 'bottom' + } + if (state?.labelForm?.position === 'right') { + state.labelForm.position = 'top' + } + } + if (oldPosition !== state.labelForm.position) { + changeLabelAttr('position') + } +} function initBidirectionalBarPosition() { if (chartType.value === 'bidirectional-bar') { - const layout = props.chart.customAttr.basicStyle.layout - const oldPosition = state?.labelForm?.position - if (state?.labelForm?.position === 'inner' || state?.labelForm?.position === 'outer') { - state.labelForm.position = 'middle' - } - if (layout === 'horizontal') { - if (state?.labelForm?.position === 'top') { - state.labelForm.position = 'right' - } - if (state?.labelForm?.position === 'bottom') { - state.labelForm.position = 'left' - } - } - if (layout === 'vertical') { - if (state?.labelForm?.position === 'left') { - state.labelForm.position = 'bottom' - } - if (state?.labelForm?.position === 'right') { - state.labelForm.position = 'top' - } - } - if (oldPosition !== state.labelForm.position) { - changeLabelAttr('position') - } + initLayoutPosition() } } function initPosition() { if (chartType.value === 'bidirectional-bar') { initBidirectionalBarPosition() + } else if (chartType.value === 'bullet-graph') { + initLayoutPosition() } else { const oldPosition = state?.labelForm?.position if (showProperty('rPosition')) { @@ -428,6 +438,9 @@ watch( () => props.chart.customAttr.basicStyle.layout, () => { initBidirectionalBarPosition() + if (chartType.value === 'bullet-graph') { + initLayoutPosition() + } }, { deep: true } ) diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/bullet/BulletRangeSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/bullet/BulletRangeSelector.vue index 2afbbc338e..4ce7016e57 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/bullet/BulletRangeSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/bullet/BulletRangeSelector.vue @@ -63,7 +63,21 @@ const emitMiscChange = (payload, prop?) => { }) } +const normalizeColor = color => { + if (Array.isArray(color)) { + return color[0] || predefineColors[0] + } + return typeof color === 'string' ? color : predefineColors[0] +} + +const normalizeRangeFill = () => { + state.bulletRangeForm.bar.ranges.fill = normalizeColor(state.bulletRangeForm.bar.ranges.fill) +} + const changeStyle = (prop?) => { + if (state.bulletRangeForm.bar.ranges.showType === 'dynamic') { + normalizeRangeFill() + } if (state.bulletRangeForm.bar.ranges.showType === 'fixed' && state.rangeList.length) { state.bulletRangeForm.bar.ranges.fixedRange = cloneDeep(state.rangeList) } @@ -121,6 +135,7 @@ const init = () => { customAttr = JSON.parse(chart.customAttr) } state.bulletRangeForm = defaultsDeep(customAttr.misc.bullet, cloneDeep(DEFAULT_MISC.bullet)) + normalizeRangeFill() getRangeList() } } @@ -129,6 +144,9 @@ const getRangeList = () => { const range = [] if (state.bulletRangeForm.bar.ranges?.fixedRange?.length) { state.rangeList = state.bulletRangeForm.bar.ranges.fixedRange + state.rangeList.forEach(item => { + item.fill = normalizeColor(item.fill) + }) } else { for (let i = 0; i < state.bulletRangeForm.bar.ranges.fixedRangeNumber; i++) { range.push({ @@ -143,6 +161,7 @@ const getRangeList = () => { const changeShowType = () => { if (state.bulletRangeForm.bar.ranges.showType === 'dynamic') { + normalizeRangeFill() changeStyle() } else { changeRangeItem() diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts index 7854ced9fd..deb297bfaf 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts @@ -61,7 +61,7 @@ export class BulletGraph extends G2ChartView { ] propertyInner = { 'basic-style-selector': ['radiusColumnBar', 'layout'], - 'label-selector': ['hPosition', 'fontSize', 'color', 'labelFormatter'], + 'label-selector': ['hPosition', 'vPosition', 'fontSize', 'color', 'labelFormatter'], 'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'], 'x-axis-selector': [ ...BAR_EDITOR_PROPERTY_INNER['x-axis-selector'].filter(item => item != 'position'), @@ -453,17 +453,15 @@ export class BulletGraph extends G2ChartView { } const basicStyle = parseJson(chart.customAttr).basicStyle const { layout } = basicStyle + const labelPosition = getBulletLabelPosition(l.position, layout) const position = { - position: l.position === 'middle' ? 'inside' : l.position, + position: labelPosition, textAlign: 'left', - dy: 0, + dy: labelPosition === 'top' ? -10 : 0, dx: 0 } if (layout !== 'horizontal') { - ;(position.position = - l.position === 'middle' ? 'inside' : l.position === 'left' ? 'bottom' : 'top'), - (position.textAlign = 'center') - position.dy = position.position === 'top' ? -10 : 0 + position.textAlign = 'center' } // contrastReverse 标签颜色在图形背景上对比度低的情况下，从指定色板选择一个对比度最优的颜色 // overlapDodgeY 对位置碰撞的标签在 y 方向上进行调整，防止标签重叠 @@ -481,9 +479,9 @@ export class BulletGraph extends G2ChartView { formatter: d => valueFormatter(d, l.labelFormatter), ...(l.fullDisplay ? {} : transform) } - // 将标签配置应用到最后一个子元素（实际值） - options.children?.forEach((item, index) => { - if (index === options.children.length - 1) { + // 将标签配置应用到实际值条 + options.children?.forEach(item => { + if (item.type === 'interval' && item.encode?.y === 'measures') { item.labels = [label] } }) @@ -833,3 +831,25 @@ function mergeBulletData(chart): any[] { }) return result } + +function getBulletLabelPosition(position: string, layout: string): string { + if (position === 'middle') { + return 'inside' + } + if (layout === 'horizontal') { + if (position === 'top') { + return 'right' + } + if (position === 'bottom') { + return 'left' + } + return position + } + if (position === 'left') { + return 'bottom' + } + if (position === 'right') { + return 'top' + } + return position +}