Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[Bug] position of markLine and markArea not align #4293

@xile611

Description

@xile611

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

Image
  1. yAxis 设置了 innerOffser,标注线的Y是对齐了region,markArea 的顶部是对齐了yAxis 最大值
  2. 隐藏y轴,标注线左侧的startSymbol 没有完整显示

Expected Behavior

  1. 标注线和 markArea顶部对齐

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions