[Bug] position of markLine and markArea not align #4293
Description
Version
2.0.7
Link to Minimal Reproduction
no
Steps to Reproduce
{
"type": "line",
"direction": "vertical",
"xField": "__Dim_X__",
"yField": "__MeaValue__",
"seriesField": "__Dim_ColorId__",
"padding": 0,
"region": [
{
"clip": true
}
],
"animation": true,
"color": {
"type": "ordinal",
"domain": [
"sum(amount)-yA_20251107173841_82fb"
],
"range": [
"#7E5DFF",
"#BCB5D6",
"#5B5F89",
"#80E1D9",
"#F8BC3B",
"#B2596E",
"#72BEF4",
"#C9A0FF"
]
},
"background": "transparent",
"data": {
"id": "line",
"values": [
{
"xA_20251107173836_32e2": "2016-01-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2016-01-01",
"yA_20251107173841_82fb": "1095"
},
"yA_20251107173841_82fb": "1095",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "1095",
"__Dim_X__": "2016-01-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2016-04-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2016-04-01",
"yA_20251107173841_82fb": "1597"
},
"yA_20251107173841_82fb": "1597",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "1597",
"__Dim_X__": "2016-04-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2016-07-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2016-07-01",
"yA_20251107173841_82fb": "1728"
},
"yA_20251107173841_82fb": "1728",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "1728",
"__Dim_X__": "2016-07-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2016-10-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2016-10-01",
"yA_20251107173841_82fb": "2290"
},
"yA_20251107173841_82fb": "2290",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "2290",
"__Dim_X__": "2016-10-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2017-01-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2017-01-01",
"yA_20251107173841_82fb": "1268"
},
"yA_20251107173841_82fb": "1268",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "1268",
"__Dim_X__": "2017-01-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2017-04-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2017-04-01",
"yA_20251107173841_82fb": "2044"
},
"yA_20251107173841_82fb": "2044",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "2044",
"__Dim_X__": "2017-04-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2017-07-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2017-07-01",
"yA_20251107173841_82fb": "1992"
},
"yA_20251107173841_82fb": "1992",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "1992",
"__Dim_X__": "2017-07-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2017-10-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2017-10-01",
"yA_20251107173841_82fb": "2708"
},
"yA_20251107173841_82fb": "2708",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "2708",
"__Dim_X__": "2017-10-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2018-01-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2018-01-01",
"yA_20251107173841_82fb": "1287"
},
"yA_20251107173841_82fb": "1287",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "1287",
"__Dim_X__": "2018-01-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2018-04-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2018-04-01",
"yA_20251107173841_82fb": "2448"
},
"yA_20251107173841_82fb": "2448",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "2448",
"__Dim_X__": "2018-04-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2018-07-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2018-07-01",
"yA_20251107173841_82fb": "2723"
},
"yA_20251107173841_82fb": "2723",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "2723",
"__Dim_X__": "2018-07-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2018-10-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2018-10-01",
"yA_20251107173841_82fb": "3443"
},
"yA_20251107173841_82fb": "3443",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "3443",
"__Dim_X__": "2018-10-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2019-01-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2019-01-01",
"yA_20251107173841_82fb": "2196"
},
"yA_20251107173841_82fb": "2196",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "2196",
"__Dim_X__": "2019-01-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2019-04-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2019-04-01",
"yA_20251107173841_82fb": "3629"
},
"yA_20251107173841_82fb": "3629",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "3629",
"__Dim_X__": "2019-04-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2019-07-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2019-07-01",
"yA_20251107173841_82fb": "3232"
},
"yA_20251107173841_82fb": "3232",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "3232",
"__Dim_X__": "2019-07-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
},
{
"xA_20251107173836_32e2": "2019-10-01",
"__OriginalData__": {
"xA_20251107173836_32e2": "2019-10-01",
"yA_20251107173841_82fb": "3854"
},
"yA_20251107173841_82fb": "3854",
"__MeaId__": "yA_20251107173841_82fb",
"__MeaName__": "sum(amount)",
"__MeaValue__": "3854",
"__Dim_X__": "2019-10-01",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-yA_20251107173841_82fb"
}
],
"fields": {
"__Dim_Angle__": {
"sortIndex": 0
},
"__Dim_X__": {
"sortIndex": 0
},
"__Dim_ColorId__": {
"sortIndex": 0
}
}
},
"large": false,
"largeThreshold": null,
"progressiveStep": 400,
"progressiveThreshold": null,
"axes": [
{
"visible": true,
"type": "band",
"orient": "bottom",
"maxHeight": 140,
"sampling": false,
"hover": true,
"label": {
"visible": true,
"flush": true,
"space": 8,
"style": {
"maxLineWidth": 80,
"fill": "#8F959E",
"angle": 0,
"fontSize": 12,
"fontWeight": 400
},
"minGap": 4,
"autoHide": true,
"autoHideMethod": "greedy",
"autoHideSeparation": 4,
"autoLimit": true,
"autoRotate": false,
"autoRotateAngle": [
0,
-45,
-90
],
"lastVisible": true
},
"title": {
"visible": false,
"text": "order_date",
"style": {
"fill": "#606773",
"fontSize": 12,
"fontWeight": 400
}
},
"tick": {
"visible": false,
"tickSize": 4,
"inside": false,
"style": {
"stroke": "#3641594d"
}
},
"grid": {
"visible": false,
"style": {
"lineWidth": 1,
"stroke": "#E3E5EB",
"lineDash": [
4,
2
]
}
},
"domainLine": {
"visible": true,
"style": {
"lineWidth": 1,
"stroke": "#21252C0F"
}
},
"paddingInner": [
0.15,
0.1
],
"paddingOuter": [
0.075,
0.1
]
},
{
"visible": false,
"type": "linear",
"base": 10,
"orient": "left",
"nice": true,
"zero": true,
"inverse": false,
"label": {
"visible": true,
"style": {
"fill": "#8F959E",
"angle": 0,
"fontSize": 12,
"fontWeight": 400
}
},
"title": {
"visible": false,
"text": "sum(amount)",
"style": {
"fill": "#606773",
"fontSize": 12,
"fontWeight": 400
}
},
"tick": {
"visible": false,
"tickSize": 4,
"inside": false,
"style": {
"stroke": "#3641594d"
}
},
"grid": {
"visible": true,
"style": {
"lineWidth": 1,
"stroke": "#E3E5EB",
"lineDash": [
4,
2
]
}
},
"domainLine": {
"visible": false,
"style": {
"lineWidth": 1,
"stroke": "#21252C0F"
}
},
"innerOffset": {
"top": 7
}
}
],
"crosshair": {
"xField": {
"visible": true,
"line": {
"type": "line",
"style": {
"lineWidth": 1,
"opacity": 1,
"stroke": "#21252C",
"lineDash": [
4,
2
]
}
},
"label": {
"visible": true,
"labelBackground": {
"visible": true,
"style": {
"fill": "#21252C"
}
},
"style": {
"fill": "#ffffff"
}
}
}
},
"legends": {
"type": "discrete",
"visible": true,
"maxCol": 1,
"maxRow": 1,
"autoPage": true,
"orient": "top",
"position": "end",
"item": {
"focus": true,
"maxWidth": "30%",
"focusIconStyle": {
"size": 14,
"fill": "#646A73",
"fontWeight": 400
},
"shape": {
"space": 6,
"state": {
"unSelected": {
"opacity": 0.2,
"fillOpacity": 1
}
}
},
"label": {
"style": {
"fontSize": 12,
"fill": "#646A73",
"fontWeight": 400
},
"state": {
"unSelected": {
"fill": "#646A73",
"fillOpacity": 0.8
}
}
},
"background": {
"state": {
"selectedHover": {
"fill": "#646A73",
"fillOpacity": 0.05
},
"unSelectedHover": {
"fill": null
}
}
}
},
"padding": 0
},
"point": {
"style": {},
"state": {
"dimension_hover": {
"scaleX": 1.4,
"scaleY": 1.4,
"outerBorder": {
"lineWidth": 4,
"strokeOpacity": 0.25,
"distance": 2
}
}
}
},
"line": {
"style": {}
},
"label": {
"visible": false,
"style": {
"stroke": "#fff",
"fill": "#212121",
"fontSize": 12
},
"smartInvert": false,
"overlap": {
"hideOnHit": true,
"clampForce": true
}
},
"tooltip": {
"visible": true,
"mark": {
"title": {
"visible": false
},
"content": [
{
"visible": true,
"hasShape": true,
"shapeType": "rectRound"
},
{
"visible": true,
"hasShape": true,
"shapeType": "rectRound"
}
]
},
"dimension": {
"title": {
"visible": true
},
"content": [
{
"visible": true,
"shapeType": "rectRound",
"hasShape": true,
"key": "sum(amount)"
}
]
}
},
"markPoint": [],
"markLine": [
{
"x": "2016-01-01",
"zIndex": 1000,
"line": {
"style": {
"visible": "solid",
"stroke": "#BCC1CB",
"lineStyle": "solid",
"lineWidth": 1,
"lineDash": [
0
]
}
},
"label": {
"text": "增长点",
"position": "insideEndTop",
"style": {
"dx": 5,
"visible": true,
"stroke": "#BCC1CB",
"lineWidth": 1,
"textAlign": "center",
"textBaseline": "top",
"fill": "#fff",
"fontSize": 12,
"fontWeight": 400
},
"labelBackground": {
"visible": true,
"padding": 2,
"style": {
"dx": 5,
"cornerRadius": 0,
"fill": "#BCC1CB",
"fillOpacity": 1,
"stroke": "#BCC1CB",
"lineWidth": 1
}
}
},
"startSymbol": {
"visible": true,
"symbolType": "triangleDown",
"size": 6,
"style": {
"dy": -3,
"fill": "#BCC1CB"
}
},
"endSymbol": {
"visible": false,
"symbolType": "arrow",
"size": 11,
"style": {
"dy": 4,
"fill": "#BCC1CB"
}
}
},
{
"y": 1500,
"zIndex": 1000,
"line": {
"style": {
"visible": "solid",
"stroke": "#BCC1CB",
"lineWidth": 1,
"lineDash": [
0
]
}
},
"label": {
"text": "平均值",
"position": "insideEndTop",
"style": {
"visible": true,
"dy": 4,
"stroke": "#BCC1CB",
"lineWidth": 1,
"textAlign": "right",
"textBaseline": "bottom",
"fill": "#fff",
"fontSize": 12,
"fontWeight": 400
},
"labelBackground": {
"visible": true,
"padding": 2,
"style": {
"dy": 4,
"cornerRadius": 0,
"fill": "#BCC1CB",
"stroke": "#BCC1CB",
"lineWidth": 1,
"fillOpacity": 1
}
}
},
"startSymbol": {
"visible": true,
"symbolType": "triangleDown",
"size": 5,
"style": {
"dx": 0,
"fill": "#BCC1CB"
}
},
"endSymbol": {
"visible": false,
"symbolType": "arrow",
"size": 11,
"style": {
"dx": -4,
"fill": "#BCC1CB"
}
}
}
],
"markArea": [
{
"zIndex": 1000,
"regionRelative": true,
"label": {
"position": "insideTop",
"visible": true,
"text": "活动区间",
"style": {
"dy": 0,
"textAlign": "center",
"textBaseline": "top",
"fill": "#FFFFFF",
"stroke": "#BCC1CB",
"lineWidth": 1,
"fontSize": 12,
"fontWeight": 400
},
"labelBackground": {
"visible": true,
"padding": 4,
"style": {
"dy": 0,
"cornerRadius": 3,
"fill": "#BCC1CB",
"stroke": "#BCC1CB",
"lineWidth": 0,
"fillOpacity": 1
}
}
},
"area": {
"style": {
"visible": true,
"fill": "#BCC1CB",
"fillOpacity": 0.12,
"stroke": "#BCC1CB",
"lineWidth": 0,
"cornerRadius": 0,
"lineDash": [
2,
2
]
}
}
}
]
}
Current Behavior
- yAxis 设置了 innerOffser，标注线的Y是对齐了region,markArea 的顶部是对齐了yAxis 最大值
- 隐藏y轴，标注线左侧的startSymbol 没有完整显示
Expected Behavior
- 标注线和 markArea顶部对齐
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response