[Bug] some issues about marker label when the label type is richText #3790
Description
Version
latest
Link to Minimal Reproduction
NA
Steps to Reproduce
当标注的文本是富文本时，和普通文本时的渲染位置有偏移，同时 containerAlign 没有生效。
const spec = {
"direction": "vertical",
"type": "common",
"series": [
{
"type": "bar",
"stack": true,
"direction": "vertical",
"bar": {
"style": {
"stroke": "",
"lineWidth": 1
},
"state": {
"hover": {
"stroke": "#000",
"lineWidth": 1
}
}
},
"barBackground": {
"style": {
"stroke": "",
"lineWidth": 1
}
},
"label": {
"visible": true,
"position": "inside",
"style": {
"lineHeight": "100%",
"fontSize": 16,
"fontWeight": "bold",
"pickMode": "imprecise"
},
"overlap": {
"strategy": []
},
"smartInvert": true,
"formatConfig": {},
"interactive": true
},
"totalLabel": {
"visible": true,
"position": "top",
"overlap": false,
"clampForce": false,
"formatConfig": {
"fixed": 0,
"content": "value"
},
"style": {
"lineHeight": "100%",
"lineWidth": 1,
"fill": "#1F2329",
"stroke": "#ffffff",
"fontSize": 16,
"fontWeight": "bold",
"pickMode": "imprecise"
},
"interactive": true
},
"seriesLabel": {
"visible": true,
"position": "end",
"label": {
"style": {
"lineHeight": "100%",
"lineWidth": 1,
"stroke": "#ffffff",
"fontSize": 16,
"fontWeight": "bold"
},
"space": 10
}
},
"xField": "_editor_dimension_field",
"yField": "_editor_value_field",
"dataId": "0",
"id": "series-0",
"EDITOR_SERIES_DATA_KEY": "a",
"seriesField": "_editor_type_field"
},
{
"type": "bar",
"stack": true,
"direction": "vertical",
"bar": {
"style": {
"stroke": "",
"lineWidth": 1
},
"state": {
"hover": {
"stroke": "#000",
"lineWidth": 1
}
}
},
"barBackground": {
"style": {
"stroke": "",
"lineWidth": 1
}
},
"label": {
"visible": true,
"position": "inside",
"style": {
"lineHeight": "100%",
"fontSize": 16,
"fontWeight": "bold",
"pickMode": "imprecise"
},
"overlap": {
"strategy": []
},
"smartInvert": true,
"formatConfig": {},
"interactive": true
},
"totalLabel": {
"visible": true,
"position": "top",
"overlap": false,
"clampForce": false,
"formatConfig": {
"fixed": 0,
"content": "value"
},
"style": {
"lineHeight": "100%",
"lineWidth": 1,
"fill": "#1F2329",
"stroke": "#ffffff",
"fontSize": 16,
"fontWeight": "bold",
"pickMode": "imprecise"
},
"interactive": true
},
"seriesLabel": {
"visible": true,
"position": "end",
"label": {
"style": {
"lineHeight": "100%",
"lineWidth": 1,
"stroke": "#ffffff",
"fontSize": 16,
"fontWeight": "bold"
},
"space": 10
}
},
"xField": "_editor_dimension_field",
"yField": "_editor_value_field",
"dataId": "1",
"id": "series-1",
"EDITOR_SERIES_DATA_KEY": "b",
"seriesField": "_editor_type_field"
}
],
"axes": [
{
"orient": "left",
"id": "axis-left",
"type": "linear",
"label": {
"autoLimit": false,
"style": {
"fill": "#1F2329",
"fontSize": 16,
"lineWidth": 1
},
"formatConfig": {},
"_originStyle": {
"fill": "#1F2329",
"fontSize": 16,
"lineWidth": 1
}
},
"domainLine": {
"visible": true,
"style": {
"stroke": "#000000"
}
},
"tick": {
"visible": true,
"style": {
"stroke": "#000000"
}
},
"grid": {
"visible": false,
"style": {
"stroke": "#bbbfc4"
}
},
"autoIndent": false,
"maxWidth": null,
"maxHeight": null
},
{
"orient": "bottom",
"id": "axis-bottom",
"type": "band",
"label": {
"autoLimit": false,
"style": {
"fill": "#1F2329",
"fontSize": 16,
"lineWidth": 1
},
"formatConfig": {},
"_originStyle": {
"fill": "#1F2329",
"fontSize": 16,
"lineWidth": 1
}
},
"domainLine": {
"visible": true,
"style": {
"stroke": "#000000"
},
"onZero": true
},
"tick": {
"visible": true,
"style": {
"stroke": "#000000"
}
},
"grid": {
"visible": false,
"style": {
"stroke": "#bbbfc4"
}
},
"autoIndent": false,
"maxWidth": null,
"maxHeight": null,
"trimPadding": false,
"paddingInner": [
0.2,
0
],
"paddingOuter": [
0.2,
0
]
}
],
"data": [
{
"id": "0",
"sourceKey": "a",
"values": [
{
"_editor_dimension_field": "x1",
"_editor_value_field": 20,
"_editor_type_field": "a"
},
{
"_editor_dimension_field": "x2",
"_editor_value_field": 23,
"_editor_type_field": "a"
},
{
"_editor_dimension_field": "x3",
"_editor_value_field": 26,
"_editor_type_field": "a"
}
],
"specField": {
"_editor_dimension_field": {
"type": "dimension",
"order": 0
},
"_editor_type_field": {
"type": "series",
"order": 0
},
"_editor_value_field": {
"type": "value",
"order": 0
}
}
},
{
"id": "1",
"sourceKey": "b",
"values": [
{
"_editor_dimension_field": "x1",
"_editor_value_field": 20,
"_editor_type_field": "b"
},
{
"_editor_dimension_field": "x2",
"_editor_value_field": 24,
"_editor_type_field": "b"
},
{
"_editor_dimension_field": "x3",
"_editor_value_field": 29,
"_editor_type_field": "b"
}
],
"specField": {
"_editor_dimension_field": {
"type": "dimension",
"order": 0
},
"_editor_type_field": {
"type": "series",
"order": 0
},
"_editor_value_field": {
"type": "value",
"order": 0
}
}
}
],
"markArea": [
{
"id": "e564b390-0d7d-4efe-bee9-5278ae888277",
"name": "h-area",
"interactive": true,
"y": "70.78346707514214%",
"y1": "20.783467075142138%",
"area": {
"style": {
"fill": "#005DFF",
"fillOpacity": 0.1
}
},
"label": {
"position": "right",
"text": [
{
"text": "1",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fill": "#1F2329",
"fontFamily": "D-Din"
},
{
"text": "8",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fill": "#1F2329",
"fontFamily": "D-Din"
},
{
"text": " ",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fill": "#1F2329",
"fontFamily": "D-Din"
},
{
"text": "-",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fill": "#1F2329",
"fontFamily": "D-Din"
},
{
"text": " ",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fill": "#1F2329",
"fontFamily": "D-Din"
},
{
"text": "4",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fill": "#1F2329",
"fontFamily": "D-Din"
},
{
"text": "8",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fill": "#1F2329",
"fontFamily": "D-Din"
},
{
"fill": "#1F2329",
"text": "\n",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fontFamily": "D-Din",
"isComposing": false
},
{
"fill": "#1F2329",
"text": "标",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fontFamily": "D-Din",
"isComposing": false
},
{
"fill": "#1F2329",
"text": "注",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fontFamily": "D-Din",
"isComposing": false
},
{
"fill": "#1F2329",
"text": "标",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fontFamily": "D-Din",
"isComposing": false
},
{
"fill": "#1F2329",
"text": "签",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fontFamily": "D-Din",
"isComposing": false
},
{
"fill": "#1F2329",
"text": "标",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fontFamily": "D-Din",
"isComposing": false
},
{
"fill": "#1F2329",
"text": "注",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fontFamily": "D-Din",
"isComposing": false
},
{
"fill": "#1F2329",
"text": "标",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fontFamily": "D-Din",
"isComposing": false
},
{
"fill": "#1F2329",
"text": "签",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"fontFamily": "D-Din",
"isComposing": false
}
],
"labelBackground": {
"visible": true,
"style": {
"fill": "#fff",
"fillOpacity": 1,
"stroke": "#000",
"lineWidth": 1,
"cornerRadius": 4
},
"padding": {
"top": 2,
"bottom": 2,
"right": 4,
"left": 4
}
},
"style": {
"fill": "#1F2329",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"background": null,
"lineHeight": "100%",
"upgradeAttrs": {
"lineHeight": true,
"multiBreakLine": true
},
"textAlign": "left",
"textBaseline": "middle"
},
"dx": 6,
"pickable": true,
"childrenPickable": false,
"type": "rich",
"__position__": "right",
"dy": 0,
"containerTextAlign": "end"
},
"_originValue_": [
17.52991975491472,
47.529919754914715
],
"_editor_marker_label_": "18 - 48",
"zIndex": 500,
"_editor_marker_format_": false
},
{
"id": "fee69927-ccf2-4b9a-92d8-671bd3649b0c",
"name": "h-area",
"interactive": true,
"y": "100%",
"y1": "50%",
"area": {
"style": {
"fill": "#005DFF",
"fillOpacity": 0.1
}
},
"label": {
"position": "right",
"text": ["18 - 48", '标注标签标注标签'],
"labelBackground": {
"visible": true,
"style": {
"fill": "#fff",
"fillOpacity": 1,
"stroke": "#000",
"lineWidth": 1,
"cornerRadius": 4
}
},
"style": {
"fill": "#1F2329",
"fontSize": 16,
"fontWeight": "bold"
},
"dx": 6,
"pickable": true,
"childrenPickable": false
},
"_originValue_": [
0,
30
],
"_editor_marker_label_": "0 - 30",
"zIndex": 500
}
],
padding: [20, 160, 20, 20]
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;Current Behavior
Expected Behavior
fix it.
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response