center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

fix(图表): 修复切换图表后，标签位置选项显示位置不正确的问题

Browse Source 
#12441
This commit is contained in:
ulleo 2024-09-27 13:17:22 +08:00
parent c9130a190a
commit 2ef6c04f74
1 changed files with 68 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -249,6 +249,8 @@ const init = () => {
initSeriesLabel()
formatterSelector.value?.blur()
}
//初始化标签位置
initPosition()
}
}
const checkLabelContent = contentProp => {
@ -320,33 +322,79 @@ const showPositionV = computed(() => {
}
return false
})
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')
}
}
}
function initPosition() {
if (chartType.value === 'bidirectional-bar') {
initBidirectionalBarPosition()
} else {
const oldPosition = state?.labelForm?.position
if (showProperty('rPosition')) {
if (state?.labelForm?.position !== 'inner') {
state.labelForm.position = 'outer'
}
} else if (showProperty('hPosition')) {
if (state?.labelForm?.position === 'top') {
state.labelForm.position = 'right'
} else if (state?.labelForm?.position === 'bottom') {
state.labelForm.position = 'left'
} else if (state?.labelForm?.position === 'inner' || state?.labelForm?.position === 'outer') {
state.labelForm.position = 'middle'
}
} else if (showProperty('vPosition')) {
if (state?.labelForm?.position === 'left') {
state.labelForm.position = 'bottom'
} else if (state?.labelForm?.position === 'right') {
state.labelForm.position = 'top'
} else if (state?.labelForm?.position === 'inner' || state?.labelForm?.position === 'outer') {
state.labelForm.position = 'middle'
}
}
if (oldPosition !== state.labelForm.position) {
changeLabelAttr('position')
}
}
}
watch(
() => props.chart.customAttr.basicStyle.layout,
() => {
const layout = props.chart.customAttr.basicStyle.layout
if (chartType.value === 'bidirectional-bar') {
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'
}
}
changeLabelAttr('position')
}
initBidirectionalBarPosition()
},
{ deep: true }
)
watch(chartType, (value, oldValue) => {
initPosition()
})
const allFields = computed(() => {
return defaultTo(props.allFields, []).map(item => ({
key: item.dataeaseName,