[Feature] 离散、颜色、尺寸图例, 在共存时, 可以实现左对齐.

[youngwinds]

期望效果:

1. 图例无论在左侧还是右侧, 均可以左对齐.
2. size和color图例, 滑轨可以对齐

错误效果:

[xile611]

@youngwinds spec 给一下吧

[youngwinds]

{
"type": "scatter",
"xField": "231114203244032",
"yField": "231114203244035",
"invalidType": "ignore",
"region": [
{
"clip": true
}
],
"padding": 0,
"labelLayout": "region",
"data": [
{
"id": "data",
"values": [
{
"30001": "一级",
"231114203244032": "2402674",
"231114203244035": "5582",
"231114203244038": "一级",
"231114203244043": "2402674",
"231114203244046": "276281.10993189365"
},
{
"30001": "当日",
"231114203244032": "827255",
"231114203244035": "1840",
"231114203244038": "当日",
"231114203244043": "827255",
"231114203244046": "134374.30981696397"
},
{
"30001": "标准级",
"231114203244032": "9336463",
"231114203244035": "21928",
"231114203244038": "标准级",
"231114203244043": "9336463",
"231114203244046": "1260994.3519947156"
},
{
"30001": "二级",
"231114203244032": "3497705",
"231114203244035": "8184",
"231114203244038": "二级",
"231114203244043": "3497705",
"231114203244046": "475889.1553846523"
}
],
"fields": {
"30001": {
"alias": "图例项 "
},
"231114203244032": {
"alias": "销售额"
},
"231114203244035": {
"alias": "数量"
},
"231114203244038": {
"alias": "邮寄方式"
},
"231114203244043": {
"alias": "销售额",
"domain": [
"2402674",
"827255",
"9336463",
"3497705"
]
},
"231114203244046": {
"alias": "利润"
}
}
}
],
"axes": [
{
"type": "linear",
"tick": {
"visible": false,
"tickMode": "d3",
"style": {
"stroke": "#8D8D8D"
}
},
"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": "#8D8D8D"
}
},
"title": {
"visible": false,
"text": "数量",
"space": 8,
"style": {
"fontSize": 12,
"fill": "#363839",
"fontWeight": "normal"
}
},
"autoIndent": false,
"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"
},
"background": {
"visible": true,
"state": {
"hover": {
"fillOpacity": 0.08,
"fill": "#141414"
},
"hover_reverse": {
"fillOpacity": 0.08,
"fill": "#141414"
}
}
},
"zero": true,
"nice": true
},
{
"type": "linear",
"tick": {
"visible": false,
"tickMode": "d3",
"style": {
"stroke": "#8D8D8D"
}
},
"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": "#8D8D8D"
}
},
"title": {
"visible": false,
"text": "销售额",
"space": 8,
"style": {
"fontSize": 12,
"fill": "#363839",
"fontWeight": "normal"
}
},
"autoIndent": false,
"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"
},
"background": {
"visible": true,
"state": {
"hover": {
"fillOpacity": 0.08,
"fill": "#141414"
},
"hover_reverse": {
"fillOpacity": 0.08,
"fill": "#141414"
}
}
},
"zero": true,
"nice": true
}
],
"label": {
"visible": false,
"offset": 6,
"overlap": {
"hideOnHit": true,
"avoidBaseMark": false,
"strategy": [
{
"type": "position",
"position": [
"top",
"bottom"
]
}
],
"clampForce": true
},
"style": {
"fontSize": 12,
"fontWeight": "normal",
"zIndex": 400,
"lineHeight": "100%",
"fill": "#363839",
"stroke": "rgba(255, 255, 255, 0.8)",
"lineWidth": 2,
"strokeOpacity": 1
},
"position": "top"
},
"legends": [
{
"type": "color",
"slidable": true,
"title": {
"visible": true,
"text": "销售额",
"textStyle": {
"fontSize": 12,
"fill": "#6F6F6F"
},
"space": 0
},
"visible": true,
"id": "legend-color",
"orient": "right",
"position": "start",
"layoutType": "normal-inline",
"field": [
"231114203244043"
],
"layoutLevel": 60,
"maxHeight": 130,
"rail": {
"height": 100
},
"handler": {
"style": {
"shadowBlur": 0,
"shadowColor": false,
"stroke": "#fff",
"lineWidth": 3,
"size": 9,
"outerBorder": {
"distance": 1.5,
"lineWidth": 0.5,
"stroke": "#cccccc"
}
}
},
"handlerText": {
"style": {
"maxLineWidth": 50,
"fontSize": 12,
"fill": "#6F6F6F",
"textAlign": "start"
}
},
"startText": {
"visible": false
},
"endText": {
"visible": false
},
"padding": {
"top": 0,
"bottom": 12,
"left": 16,
"right": 0
}
},
{
"type": "size",
"slidable": true,
"visible": true,
"title": {
"visible": true,
"text": "利润",
"textStyle": {
"fontSize": 12,
"fill": "#6F6F6F"
},
"space": 0
},
"handlerText": {
"style": {
"maxLineWidth": 50,
"fontSize": 12,
"fill": "#6F6F6F",
"textAlign": "start"
}
},
"id": "legend-size",
"orient": "right",
"position": "start",
"layoutType": "normal-inline",
"field": [
"231114203244046"
],
"layoutLevel": 50,
"maxHeight": 130,
"track": {
"style": {
"fill": "rgba(20,20,20,0.1)"
}
},
"rail": {
"height": 100
},
"handler": {
"style": {
"symbolType": "M-5,0L-2.5,-3.5\n h5\n v7\n h-5\n Z",
"size": 8,
"shadowBlur": 0,
"shadowColor": false,
"outerBorder": {
"stroke": "#AEB8C6",
"lineWidth": 1,
"strokeOpacity": 0.5
}
}
},
"startText": {
"visible": false
},
"endText": {
"visible": false
},
"padding": {
"top": 0,
"bottom": 12,
"left": 16,
"right": 0
}
}
],
"seriesField": "231114203244043",
"color": {
"field": "231114203244043",
"type": "linear",
"range": [
"#b2e3ff",
"#0050b3"
],
"domain": [
{
"dataId": "data",
"fields": [
"231114203244043"
]
}
]
},
"sizeField": "231114203244046",
"size": {
"type": "linear",
"range": [
7.0898154036220635,
28.359261614488254
]
},
"tooltip": {
"handler": {}
},
"point": {
"state": {
"hover": {
"cursor": "pointer",
"fillOpacity": 0.8,
"stroke": "#58595B",
"lineWidth": 1,
"zIndex": 500
}
}
},
"background": "rgba(255, 255, 255, 0)",
"hover": {
"enable": true
},
"select": {
"enable": true
},
"animation": false,
"brush": {
"inBrush": {
"fillOpacity": 1,
"stroke": "#58595B",
"lineWidth": 1,
"strokeOpacity": 1,
"colorAlpha": 1
},
"outOfBrush": {
"colorAlpha": 0.2,
"fillOpacity": 0.3,
"strokeWidth": 0.3
}
},
"hash": "b63ccc611e9be2f9cfbfd7760061cc67"
}