github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 03:52:59 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(图表): 修复折线图最值标签被遮挡的问题，超过显示范围时，最值标签显示在数据点下方 #13354

Browse Source
This commit is contained in:
jianneng-fit2cloud 2024-11-29 17:33:41 +08:00
parent 3165bc2004
commit d5eff14c35
1 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
core/core-frontend/src/views/chart/components/js/extremumUitl.ts
View File

@ -85,8 +85,7 @@ function createExtremumDiv(id, value, formatterCfg, chart) {
const span = document.createElement('span')
span.setAttribute(
'style',
`display: block;
width: 0px;
`width: 0px;
height: 0px;
border: 4px solid transparent;
border-top-color: red;
@ -319,10 +318,9 @@ export const createExtremumPoint = (chart, ev) => {
)
if (pointElement && point._origin.EXTREME) {
pointElement.style.position = 'absolute'
pointElement.style.top =
(point.y[1] ? point.y[1] : point.y) -
(fontSize + (pointSize ? pointSize : 0) + 12) +
'px'
const top =
(point.y[1] ? point.y[1] : point.y) - (fontSize + (pointSize ? pointSize : 0) + 12)
pointElement.style.top = top + 'px'
pointElement.style.left = point.x + 'px'
pointElement.style.zIndex = '10'
pointElement.style.fontSize = fontSize + 'px'
@ -334,6 +332,18 @@ export const createExtremumPoint = (chart, ev) => {
pointElement.children[0]['style'].borderTopColor =
'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'
pointElement.style.display = 'table'
// 显示箭头
const childNode = pointElement.childNodes[1]
// 最值在数据点下方显示
const translateYValue = Math.ceil(point.y + Math.abs(Math.floor(top)) + 6)
// 最值dom高度超过50%时，最值dom向下
if (top < 0 && (Math.abs(top) / point.y) * 100 >= 50) {
pointElement.style.transform = `translateX(-50%) translateY(${translateYValue}px)`
childNode.style.marginTop = '-12px'
childNode.style.transform = 'rotate(180deg)'
} else {
childNode.style.display = 'block'
}
}
})
} else {