[Bug] legend layout issues

[da730]

Version

1.1.0

Link to Minimal Reproduction

null

Steps to Reproduce

const spec ={
    "type": "scatter",
    "xField": "230918173803029",
    "yField": "230918173803032",
    "region": [
        {
            "clip": true
        }
    ],
    "padding": 0,
    "labelLayout": "region",
    "data": [
        {
            "id": "data",
            "values": [
                {
                    "30001": "华北",
                    "230918173803026": "华北",
                    "230918173803029": "2447301.0141382217",
                    "230918173803032": "74.10000109672546",
                    "230918174750013": "5146",
                    "230918202052054": "2447301.0141382217"
                },
                {
                    "30001": "华东",
                    "230918173803026": "华东",
                    "230918173803029": "4684506.442247391",
                    "230918173803032": "331.10000520944595",
                    "230918174750013": "11041",
                    "230918202052054": "4684506.442247391"
                },
                {
                    "30001": "西北",
                    "230918173803026": "西北",
                    "230918173803029": "815039.5979347229",
                    "230918173803032": "53.40000084042549",
                    "230918174750013": "1785",
                    "230918202052054": "815039.5979347229"
                },
                {
                    "30001": "地区-dongbei",
                    "230918173803026": "地区-dongbei",
                    "230918173803029": "2681567.4745378494",
                    "230918173803032": "234.75000359117985",
                    "230918174750013": "6463",
                    "230918202052054": "2681567.4745378494"
                },
                {
                    "30001": "西南",
                    "230918173803026": "西南",
                    "230918173803029": "1303124.5089645386",
                    "230918173803032": "134.2000020891428",
                    "230918174750013": "3399",
                    "230918202052054": "1303124.5089645386"
                },
                {
                    "30001": "中南",
                    "230918173803026": "中南",
                    "230918173803029": "4137415.0951108932",
                    "230918173803032": "232.15000347048044",
                    "230918174750013": "9700",
                    "230918202052054": "4137415.0951108932"
                }
            ],
            "fields": {
                "30001": {
                    "alias": "图例项 "
                },
                "230918173803026": {
                    "alias": "地区"
                },
                "230918173803029": {
                    "alias": "销售额"
                },
                "230918173803032": {
                    "alias": "折扣"
                },
                "230918174750013": {
                    "alias": "数量"
                },
                "230918202052054": {
                    "alias": "销售额",
                    "domain": [
                        "2447301.0141382217",
                        "4684506.442247391",
                        "815039.5979347229",
                        "2681567.4745378494",
                        "1303124.5089645386",
                        "4137415.0951108932"
                    ]
                }
            }
        }
    ],
    "axes": [
        {
            "type": "linear",
            "tick": {
                "visible": false,
                "style": {
                    "stroke": "rgba(255, 255, 255, 0)"
                }
            },
            "niceType": "accurateFirst",
            "zIndex": 200,
            "grid": {
                "visible": true,
                "style": {
                    "zIndex": 150,
                    "stroke": "#DADCDD",
                    "lineWidth": 1,
                    "lineDash": [
                        4,
                        2
                    ]
                }
            },
            "orient": "left",
            "visible": true,
            "domainLine": {
                "visible": true,
                "style": {
                    "lineWidth": 1,
                    "stroke": "rgba(255, 255, 255, 0)"
                }
            },
            "title": {
                "visible": false,
                "text": "折扣",
                "space": 8,
                "style": {
                    "fontSize": 12,
                    "fill": "#363839",
                    "fontWeight": "normal"
                }
            },
            "sampling": false,
            "label": {
                "visible": true,
                "space": 6,
                "flush": true,
                "padding": 0,
                "style": {
                    "fontSize": 12,
                    "maxLineWidth": 174,
                    "fill": "#6F6F6F",
                    "angle": 0,
                    "fontWeight": "normal",
                    "dy": -1,
                    "direction": "horizontal"
                },
                "autoHide": true,
                "autoHideMethod": "greedy"
            },
            "hover": true,
            "background": {
                "visible": true,
                "state": {
                    "hover": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    }
                }
            },
            "zero": true,
            "nice": true
        },
        {
            "type": "linear",
            "tick": {
                "visible": false,
                "style": {
                    "stroke": "rgba(255, 255, 255, 0)"
                }
            },
            "niceType": "accurateFirst",
            "zIndex": 200,
            "grid": {
                "visible": true,
                "style": {
                    "zIndex": 150,
                    "stroke": "#DADCDD",
                    "lineWidth": 1,
                    "lineDash": [
                        4,
                        2
                    ]
                }
            },
            "orient": "bottom",
            "visible": true,
            "domainLine": {
                "visible": true,
                "style": {
                    "lineWidth": 1,
                    "stroke": "rgba(255, 255, 255, 0)"
                }
            },
            "title": {
                "visible": false,
                "text": "销售额",
                "space": 8,
                "style": {
                    "fontSize": 12,
                    "fill": "#363839",
                    "fontWeight": "normal"
                }
            },
            "sampling": false,
            "label": {
                "visible": true,
                "space": 4,
                "flush": true,
                "padding": 0,
                "style": {
                    "fontSize": 12,
                    "maxLineWidth": 174,
                    "fill": "#6F6F6F",
                    "angle": 0,
                    "fontWeight": "normal",
                    "dy": -1,
                    "direction": "horizontal"
                },
                "autoHide": true,
                "autoHideMethod": "greedy"
            },
            "hover": true,
            "background": {
                "visible": true,
                "state": {
                    "hover": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    }
                }
            },
            "zero": true,
            "nice": true
        }
    ],
    "label": {
        "visible": false,
        "overlap": {
            "hideOnHit": true,
            "avoidBaseMark": false,
            "strategy": [
                {
                    "type": "moveY",
                    "offset": [
                        -20,
                        -19,
                        -18,
                        -17,
                        -16,
                        -15,
                        -14,
                        -13,
                        -12,
                        -11,
                        -10,
                        -9,
                        -8,
                        -7,
                        -6,
                        -5,
                        -4,
                        -3,
                        -2,
                        -1,
                        0,
                        1,
                        2,
                        3,
                        4,
                        5,
                        6,
                        7,
                        8,
                        9,
                        10,
                        11,
                        12,
                        13,
                        14,
                        15,
                        16,
                        17,
                        18,
                        19,
                        20
                    ]
                },
                {
                    "type": "moveX",
                    "offset": [
                        -20,
                        -19,
                        -18,
                        -17,
                        -16,
                        -15,
                        -14,
                        -13,
                        -12,
                        -11,
                        -10,
                        -9,
                        -8,
                        -7,
                        -6,
                        -5,
                        -4,
                        -3,
                        -2,
                        -1,
                        0,
                        1,
                        2,
                        3,
                        4,
                        5,
                        6,
                        7,
                        8,
                        9,
                        10,
                        11,
                        12,
                        13,
                        14,
                        15,
                        16,
                        17,
                        18,
                        19,
                        20
                    ]
                }
            ],
            "clampForce": true
        },
        "style": {
            "fontSize": 12,
            "fontWeight": "normal",
            "zIndex": 100,
            "fill": null,
            "strokeOpacity": 1
        },
        "offset": 6,
        "position": "center"
    },
    "legends": [
        {
            "type": "color",
            "slidable": true,
            "title": {
                "visible": true,
                "text": "销售额",
                "textStyle": {
                    "fontSize": 12,
                    "fill": "#6F6F6F"
                },
                "space": 0
            },
            "id": "legend-color",
            "orient": "bottom",
            "position": "end",
            "layoutType": "normal-inline",
            "visible": true,
            "field": [
                "230918202052054"
            ],
            "layoutLevel": 70,
            "maxHeight": 130,
            "rail": {
                "width": 200
            },
            "handlerText": {
                "style": {
                    "maxLineWidth": 50,
                    "fontSize": 12,
                    "fill": "#6F6F6F"
                }
            },
            "padding": {
                // "top": 16,
                "bottom": 0,
                "left": 0,
                "right": 0
            }
        },
        {
            "type": "size",
            "slidable": true,
            "title": {
                "visible": true,
                "text": "数量",
                "textStyle": {
                    "fontSize": 12,
                    "fill": "#6F6F6F"
                },
                "space": 0
            },
            "id": "legend-size",
            "orient": "bottom",
            "position": "end",
            "layoutType": "normal-inline",
            "visible": true,
            "field": [
                "230918174750013"
            ],
            "layoutLevel": 60,
            "maxHeight": 130,
            "width": 100,
            "track": {
                "style": {
                    "fill": "rgba(20,20,20,0.1)"
                }
            },
            "rail": {
                "width": 200
            },
            "handler": {
                "style": {
                    "symbolType": "M0,6L-3.5,2.5\n    v-5\n    h7\n    v5\n    Z",
                    "size": 8,
                    "outerBorder": {
                        "stroke": "#AEB8C6",
                        "lineWidth": 1,
                        "strokeOpacity": 0.5
                    }
                }
            },
            "handlerText": {
                "style": {
                    "maxLineWidth": 50,
                    "fontSize": 12,
                    "fill": "#6F6F6F"
                }
            },
            "padding": {
                // "top": 16,
                "bottom": 0,
                "left": 0,
                "right": 0
            }
        }
    ],
    "seriesField": "230918202052054",
    "color": {
        "field": "230918202052054",
        "type": "linear",
        "range": [
            "#f5222d",
            "#e6e6e6",
            "#3772ff"
        ],
        "domain": [
            {
                "dataId": "data",
                "fields": [
                    "230918202052054"
                ]
            }
        ]
    },
    "sizeField": "230918174750013",
    "size": {
        "type": "linear",
        "range": [
            7.0898154036220635,
            28.359261614488254
        ]
    },
    "tooltip": {
        "handler": {}
    },
    "point": {
        "state": {
            "hover": {
                "cursor": "pointer",
                "fillOpacity": 0.8,
                "stroke": "#58595B",
                "lineWidth": 1,
                "zIndex": 500
            }
        }
    },
    "seriesMark": "point",
    "background": "rgba(255, 255, 255, 0)",
    "hover": {
        "enable": true
    },
    "select": {
        "enable": true
    },
    "animation": false,
    "brush": {
        "inBrush": {
            "style": {
                "fillOpacity": 1,
                "stroke": "#58595B",
                "lineWidth": 1
            }
        },
        "outOfBrush": {
            "style": {
                "fillOpacity": 0.3,
                "strokeWidth": 0.3
            }
        }
    },
    "hash": "071e847c723153a40147304133d307a1"
}

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Current Behavior

1. 两个图例orient均设为bottom，position均设为end，有一个图例会跑到图表外部
   

2. 两个图例position均设为middle，没有居中：
   

3. color legend 标题与图例之间的间距始终比size legend大一些：
   

4. size legend layoutLevel设为70，color legend layoutLevel设为60，会有重叠：
   

Expected Behavior

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[kkxxkk2019]

第三个问题和 VRender 有关系，看了下是因为给 handleStyle 配置了阴影导致的