VChart
VChart copied to clipboard
VisActor
[Bug] MarkPoint line type is 'type-arc', the arc line can not pick
Version
2.x
Link to Minimal Reproduction
NA
Steps to Reproduce
const spec = {
"direction": "vertical",
"type": "common",
"color": [
"#0A345E",
"#18ADED",
"#A6A7AD",
"#1A82EB",
"#74CEF4",
"#E1E2E4",
"#138ABE",
"#76B4F3",
"#898A91",
"#0E688E"
],
"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,
"alwayCalculateTotal": true
},
"seriesLabel": {
"visible": true,
"position": "end",
"label": {
"style": {
"lineHeight": "100%",
"lineWidth": 1,
"stroke": "#ffffff",
"fontSize": 16,
"fontWeight": "bold"
},
"space": 10,
"formatConfig": {
"content": "series"
}
}
},
"xField": "_editor_dimension_field",
"yField": "_editor_value_field",
"dataId": "0",
"id": "series-0",
"EDITOR_SERIES_DATA_KEY": "系列 1",
"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,
"alwayCalculateTotal": true
},
"seriesLabel": {
"visible": true,
"position": "end",
"label": {
"style": {
"lineHeight": "100%",
"lineWidth": 1,
"stroke": "#ffffff",
"fontSize": 16,
"fontWeight": "bold"
},
"space": 10,
"formatConfig": {
"content": "series"
}
}
},
"xField": "_editor_dimension_field",
"yField": "_editor_value_field",
"dataId": "1",
"id": "series-1",
"EDITOR_SERIES_DATA_KEY": "系列 2",
"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,
"alwayCalculateTotal": true
},
"seriesLabel": {
"visible": true,
"position": "end",
"label": {
"style": {
"lineHeight": "100%",
"lineWidth": 1,
"stroke": "#ffffff",
"fontSize": 16,
"fontWeight": "bold"
},
"space": 10,
"formatConfig": {
"content": "series"
}
}
},
"xField": "_editor_dimension_field",
"yField": "_editor_value_field",
"dataId": "2",
"id": "series-2",
"EDITOR_SERIES_DATA_KEY": "系列 3",
"seriesField": "_editor_type_field"
}
],
"legends": {
"id": "legend-discrete",
"visible": false,
"autoPage": false,
"position": "start",
"interactive": false,
"item": {
"label": {
"style": {
"fill": "#1F2329",
"fontSize": 16,
"lineWidth": 1
}
}
},
"_originalVisible": false
},
"region": [
{
"id": "region-0",
"stackInverse": true
}
],
"tooltip": {
"visible": true,
"mark": {
"content": [
{}
],
"title": {}
},
"dimension": {
"content": [
{}
],
"title": {}
},
"enterable": true,
"showDelay": 0,
"style": {
"maxContentHeight": "95%"
}
},
"axes": [
{
"orient": "left",
"id": "axis-left",
"type": "linear",
"label": {
"autoLimit": false,
"autoHide": true,
"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,
"sampling": true,
"maxWidth": null,
"maxHeight": null
},
{
"orient": "bottom",
"id": "axis-bottom",
"type": "band",
"label": {
"autoLimit": false,
"autoHide": true,
"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,
"sampling": true,
"maxWidth": null,
"maxHeight": null,
"trimPadding": false,
"paddingInner": [
0.2,
0
],
"paddingOuter": [
0.2,
0
]
}
],
"data": [
{
"id": "0",
"sourceKey": "系列 1",
"values": [
{
"_editor_value_field": 10,
"_editor_type_field": "系列 1",
"_editor_dimension_field": "类别 A"
},
{
"_editor_value_field": 24,
"_editor_type_field": "系列 1",
"_editor_dimension_field": "类别 B"
},
{
"_editor_value_field": 40,
"_editor_type_field": "系列 1",
"_editor_dimension_field": "类别 C"
}
],
"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": "系列 2",
"values": [
{
"_editor_value_field": 15,
"_editor_type_field": "系列 2",
"_editor_dimension_field": "类别 A"
},
{
"_editor_value_field": 25,
"_editor_type_field": "系列 2",
"_editor_dimension_field": "类别 B"
},
{
"_editor_value_field": 28,
"_editor_type_field": "系列 2",
"_editor_dimension_field": "类别 C"
}
],
"specField": {
"_editor_dimension_field": {
"type": "dimension",
"order": 0
},
"_editor_type_field": {
"type": "series",
"order": 0
},
"_editor_value_field": {
"type": "value",
"order": 0
}
}
},
{
"id": "2",
"sourceKey": "系列 3",
"values": [
{
"_editor_value_field": 20,
"_editor_type_field": "系列 3",
"_editor_dimension_field": "类别 A"
},
{
"_editor_value_field": 30,
"_editor_type_field": "系列 3",
"_editor_dimension_field": "类别 B"
},
{
"_editor_value_field": 35,
"_editor_type_field": "系列 3",
"_editor_dimension_field": "类别 C"
}
],
"specField": {
"_editor_dimension_field": {
"type": "dimension",
"order": 0
},
"_editor_type_field": {
"type": "series",
"order": 0
},
"_editor_value_field": {
"type": "value",
"order": 0
}
}
}
],
"labelLayout": "region",
"markPoint": [
{
"id": "04e42835-85cc-4554-9a27-ee105fcae4cd",
"interactive": true,
"itemContent": {
"autoRotate": false,
"confine": false,
"offsetX": -225.81140128011418,
"offsetY": -148.3270265145627,
"position": "middle",
"refX": 0,
"refY": 0,
"text": {
"containerTextAlign": "center",
"dx": -4,
"labelBackground": {
"style": {
"lineDash": [
12,
6
],
"lineWidth": 1,
"stroke": "#000000"
},
"visible": false
},
"padding": 4,
"style": {
"background": null,
"fill": "#000",
"fontFamily": "LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,\"Helvetica Neue\",Tahoma,\"PingFang SC\",\"Microsoft Yahei\",Arial,\"Hiragino Sans GB\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
"fontSize": 16,
"upgradeAttrs": {
"lineHeight": true,
"multiBreakLine": true
}
},
"text": [
{
"text": "请",
"textAlign": "center"
},
{
"text": "输",
"textAlign": "center"
},
{
"text": "入",
"textAlign": "center"
},
{
"text": "标",
"textAlign": "center"
},
{
"text": "注",
"textAlign": "center"
},
{
"text": "文",
"textAlign": "center"
},
{
"text": "本",
"textAlign": "center"
}
],
"type": "rich",
"visible": true
},
"type": "text"
},
"itemLine": {
"arcRatio": 0.02,
"decorativeLine": {
"visible": false
},
"endSymbol": {
"originSymbolType": "arrow",
"refX": 0,
"size": 10,
"style": {
"color": "#000000",
"fill": false,
"lineWidth": 1,
"stroke": "#000000"
},
"symbolType": "<svg><path d=\"M -1 1 L 0 0 L 1 1\"/></svg>",
"visible": false
},
"line": {
"style": {
"cornerRadius": 4,
"lineDash": [
12,
6
],
"lineWidth": 1,
"pickStrokeBuffer": 5,
"stroke": "#000000"
}
},
"startSymbol": {
"originSymbolType": "arrow",
"refX": 0,
"size": 8,
"style": {
"color": "#000000",
"fill": false,
"lineWidth": 1,
"stroke": "#000000"
},
"symbolType": "<svg><path d=\"M -1 1 L 0 0 L 1 1\"/></svg>",
"visible": false
},
"type": "type-arc",
"visible": true
},
"name": "mark-point",
"position": {
"x": "27.776905360134002%",
"y": "41.107779489436616%"
},
"regionRelative": true,
"targetSymbol": {
"offset": 0,
"style": {
"fill": "#000000",
"lineWidth": 0,
"size": 8,
"stroke": "#000000"
},
"visible": true
},
"zIndex": 520
}
],
"markLine": [],
"totalLabel": {
"alwayCalculateTotal": true
},
"customMark": [],
"padding": 0,
"animation": false
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
vchart.on('click', e=> {
console.log(e)
})
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Current Behavior
Expected Behavior
Environment
Any additional comments?
No response
