[Bug] stackCornerRadius make rect cliped when updateSpec #4208
Description
Version
2.0.4
Link to Minimal Reproduction
no
Steps to Reproduce
const spec = {
"type": "bar",
"direction": "horizontal",
"yField": "__Dim_Y__",
"xField": "__MeaValue__",
"seriesField": "__Dim_ColorId__",
"padding": 0,
"region": [
{
"clip": true
}
],
"animation": false,
"color": {
"type": "ordinal",
"domain": [
"sum(amount)-xA_20250923143643_f772"
],
"range": [
"#8D72F6",
"#5766EC",
"#66A3FE",
"#51D5E6",
"#4EC0B3",
"#F9DF90",
"#F9AD71",
"#ED8888",
"#E9A0C3",
"#D77DD3"
]
},
"background": "transparent",
"percent": true,
"data": {
"id": "barPercent",
"values": [
{
"xA_20250923143118_c073": "公司",
"__OriginalData__": {
"xA_20250923143118_c073": "公司",
"xA_20250923143643_f772": "11581"
},
"xA_20250923143643_f772": "11581",
"__MeaId__": "xA_20250923143643_f772",
"__MeaName__": "sum(amount)",
"__MeaValue__": "11581",
"__Dim_Y__": "公司",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-xA_20250923143643_f772"
},
{
"xA_20250923143118_c073": "小型企业",
"__OriginalData__": {
"xA_20250923143118_c073": "小型企业",
"xA_20250923143643_f772": "6780"
},
"xA_20250923143643_f772": "6780",
"__MeaId__": "xA_20250923143643_f772",
"__MeaName__": "sum(amount)",
"__MeaValue__": "6780",
"__Dim_Y__": "小型企业",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-xA_20250923143643_f772"
},
{
"xA_20250923143118_c073": "消费者",
"__OriginalData__": {
"xA_20250923143118_c073": "消费者",
"xA_20250923143643_f772": "19173"
},
"xA_20250923143643_f772": "19173",
"__MeaId__": "xA_20250923143643_f772",
"__MeaName__": "sum(amount)",
"__MeaValue__": "19173",
"__Dim_Y__": "消费者",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-xA_20250923143643_f772"
}
],
"fields": {
"__Dim_Angle__": {
"sortIndex": 0
},
"__Dim_Y__": {
"sortIndex": 0
},
"__Dim_ColorId__": {
"sortIndex": 0
}
}
},
stackCornerRadius: 10,
"axes": [
{
"domainLine": {
"visible": false,
"style": {
"lineWidth": 1,
"stroke": "#3641594d",
"strokeOpacity": 1
}
},
"grid": {
"visible": true,
"style": {
"lineWidth": 0.5,
"stroke": "#36415926",
"strokeOpacity": 1,
"lineDash": []
}
},
"subGrid": {
"visible": false,
"style": {
"lineWidth": 1,
"stroke": "#f1f2f5",
"strokeOpacity": 1,
"lineDash": [
4,
4
]
}
},
"tick": {
"visible": false,
"inside": false,
"tickSize": 4,
"alignWithLabel": true,
"style": {
"lineWidth": 1,
"stroke": "#3641594d",
"strokeOpacity": 1
}
},
"subTick": {
"visible": false,
"tickSize": 2,
"style": {
"lineWidth": 1,
"stroke": "#d9dde4",
"strokeOpacity": 1
}
},
"label": {
"visible": true,
"inside": false,
"space": 8,
"style": {
"fontSize": 12,
"fill": "#797B85",
"fontWeight": 400,
"fillOpacity": 1,
"angle": 0
}
},
"title": {
"space": 8,
"padding": 0,
"style": {
"fontSize": 12,
"lineHeight": "130%",
"fill": "#646A73",
"fontWeight": 400,
"fillOpacity": 1
},
"visible": false,
"text": ""
},
"maxHeight": "30%",
"unit": {
"visible": false,
"style": {
"fontSize": 12,
"fill": "#89909d",
"fontWeight": "normal",
"fillOpacity": 1
}
},
"visible": true,
"type": "linear",
"base": 10,
"orient": "bottom",
"nice": true,
"zero": true,
"inverse": false,
"innerOffset": {
"right": 7
}
},
{
"domainLine": {
"visible": true,
"style": {
"lineWidth": 1,
"stroke": "#3641594d",
"strokeOpacity": 1
}
},
"grid": {
"visible": false,
"style": {
"lineWidth": 0.5,
"stroke": "#36415926",
"strokeOpacity": 1,
"lineDash": []
}
},
"subGrid": {
"visible": false,
"style": {
"lineWidth": 1,
"stroke": "#f1f2f5",
"strokeOpacity": 1,
"lineDash": [
4,
4
]
}
},
"tick": {
"visible": false,
"inside": false,
"tickSize": 4,
"alignWithLabel": true,
"style": {
"lineWidth": 1,
"stroke": "#3641594d",
"strokeOpacity": 1
}
},
"subTick": {
"visible": false,
"tickSize": 2,
"style": {
"lineWidth": 1,
"stroke": "#d9dde4",
"strokeOpacity": 1
}
},
"label": {
"visible": true,
"inside": false,
"space": 8,
"style": {
"fontSize": 12,
"fill": "#797B85",
"fontWeight": 400,
"fillOpacity": 1,
"maxLineWidth": 80,
"angle": 0
},
"autoLimit": false,
"flush": true,
"containerAlign": "right",
"minGap": 1,
"autoHide": false,
"autoHideMethod": "greedy",
"autoHideSeparation": 1,
"autoRotate": false,
"autoRotateAngle": [
0,
-45,
-90
],
"lastVisible": true
},
"title": {
"space": 12,
"padding": 0,
"style": {
"fontSize": 12,
"lineHeight": "130%",
"fill": "#646A73",
"fontWeight": 400,
"fillOpacity": 1
},
"autoRotate": true,
"visible": false,
"text": "customer_type"
},
"maxWidth": 140,
"unit": {
"visible": false,
"style": {
"fontSize": 12,
"fill": "#89909d",
"fontWeight": "normal",
"fillOpacity": 1
}
},
"visible": true,
"type": "band",
"orient": "left",
"sampling": true,
"hover": true,
"paddingInner": [
0.15,
0.1
],
"paddingOuter": [
0.075,
0.1
]
}
],
"label": {
"visible": false,
"layout": {},
"style": {
"fill": "#212121"
},
"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
}
]
},
"style": {
"offset": {
"x": 10,
"y": 10
},
"panel": {
"padding": {
"top": 10,
"left": 10,
"right": 10,
"bottom": 10
},
"backgroundColor": "#ffffff",
"border": {
"color": "#ffffff",
"width": 0,
"radius": 3
},
"shadow": {
"x": 0,
"y": 4,
"blur": 12,
"spread": 0,
"color": "rgba(33,37,44,0.1)"
}
},
"spaceRow": 6,
"titleLabel": {
"fontSize": 14,
"lineHeight": "150%",
"fontColor": "#21252c",
"fontWeight": "bold",
"textBaseline": "middle",
"spacing": 0
},
"shape": {
"size": 8,
"spacing": 6
},
"keyLabel": {
"fontSize": 14,
"lineHeight": "150%",
"fontColor": "#606773",
"textBaseline": "middle",
"spacing": 26
},
"valueLabel": {
"fontSize": 14,
"lineHeight": "150%",
"fontColor": "#21252c",
"fontWeight": "bold",
"textBaseline": "middle",
"spacing": 0
}
},
"offset": {
"x": 10,
"y": 10
},
"transitionDuration": 150,
"trigger": "hover",
"activeType": [
"mark",
"dimension",
"group"
],
"renderMode": "html",
"className": "vchart-tooltip-element",
"enterable": false,
"confine": false,
"parentElement": {}
},
"legends": {
"orient": "right",
"position": "start",
"padding": 0,
"title": {
"visible": false,
"padding": 0,
"textStyle": {
"fontSize": 12,
"lineHeight": "130%",
"fill": "#21252c",
"fontWeight": "normal"
},
"space": 12
},
"pager": {
"textStyle": {
"fill": "rgb(51, 51, 51)"
},
"handler": {
"style": {
"fill": "rgb(47, 69, 84)"
},
"state": {
"disable": {
"fill": "rgb(170, 170, 170)"
}
}
}
},
"item": {
"visible": true,
"spaceCol": 10,
"spaceRow": 6,
"padding": 2,
"background": {
"state": {
"selectedHover": {
"fill": "#646A73",
"fillOpacity": 0.05
},
"unSelectedHover": {
"fill": "#f1f2f5"
}
}
},
"shape": {
"space": 6,
"style": {
"lineWidth": 0,
"fillOpacity": 1,
"opacity": 1,
"symbolType": "rectRound",
"size": 8
},
"state": {
"unSelected": {
"fillOpacity": 0.2,
"opacity": 1
}
}
},
"label": {
"space": 6,
"style": {
"fill": "#646A73",
"fontSize": 12,
"lineHeight": "130%",
"opacity": 1,
"fontWeight": 400
},
"state": {
"unSelected": {
"fill": "#bcc1cb",
"opacity": 1
}
}
},
"focus": true,
"maxWidth": 235.2,
"focusIconStyle": {
"size": 14,
"fill": "#646A73",
"fontWeight": 400
}
},
"allowAllCanceled": false,
"type": "discrete",
"visible": true,
"maxCol": 1,
"maxRow": 1,
"autoPage": true
},
"crosshair": [
{
"xField": {
"visible": false,
"line": {
"type": "line",
"visible": true,
"style": {
"stroke": "#606773",
"fill": "transparent",
"opacity": 0.7,
"lineDash": [
2,
3
]
}
},
"label": {
"visible": false,
"style": {
"fontWeight": "normal",
"fill": "#ffffff",
"fontSize": 12
},
"labelBackground": {
"padding": {
"bottom": 0,
"top": 0,
"left": 2,
"right": 2
},
"style": {
"fill": "#21252c",
"cornerRadius": 1
}
}
}
},
"yField": {
"visible": true,
"line": {
"type": "rect",
"visible": true,
"style": {
"fill": "#3641594d",
"opacity": 0.2,
"lineWidth": 0,
"stroke": "#606773",
"lineDash": [
2,
3
]
}
},
"label": {
"visible": true,
"style": {
"fontWeight": "normal",
"fill": "#ffffff",
"fontSize": 12
},
"labelBackground": {
"padding": {
"bottom": 0,
"top": 0,
"left": 2,
"right": 2
},
"style": {
"fill": "#364159",
"cornerRadius": 1
},
"visible": true
}
}
},
"trigger": "hover"
}
],
"bar": {
"style": {
"lineWidth": 1
},
"state": {
"hover": {
"fillOpacity": 0.6
}
}
},
"markPoint": [],
"markLine": [],
"markArea": [],
"series": [
{
"label": {
"style": {
"fontSize": 14,
"fontWeight": "normal",
"fillOpacity": 1,
"lineJoin": "bevel",
"lineWidth": 2,
"stroke": "#ffffff",
"fill": "#212121"
},
"visible": false,
"position": "outside",
"offset": 5,
"layout": {},
"smartInvert": false,
"overlap": {
"hideOnHit": true,
"clampForce": true
}
},
"bar": {
"style": {
"lineWidth": 1
},
"state": {
"hover": {
"fillOpacity": 0.6
}
}
},
"barBackground": {
"visible": false,
"style": {
"fill": "rgba(33,37,44,0.06)",
"stroke": "transparent"
}
},
"direction": "horizontal",
"animation": false,
"animationThreshold": 2000,
"seriesField": "__Dim_ColorId__",
"type": "bar",
"xField": "__MeaValue__",
"yField": "__Dim_Y__",
"percent": true
}
]
};
const spec2 = {
"type": "common",
"padding": 0,
"labelLayout": "region",
"region": [
{
"clip": true
}
],
"series": [
{
"label": {
"style": {
"fontSize": 14,
"fontWeight": "normal",
"fillOpacity": 1,
"lineJoin": "bevel",
"lineWidth": 2,
"stroke": "#ffffff",
"fill": "#212121"
},
"visible": false,
"position": "outside",
"offset": 5,
"layout": {},
"smartInvert": false,
"overlap": {
"hideOnHit": true,
"clampForce": true
},
"zIndex": 1002
},
"bar": {
"style": {
"lineWidth": 1
},
"state": {
"hover": {
"fillOpacity": 0.6
}
}
},
"barBackground": {
"visible": false,
"style": {
"fill": "rgba(33,37,44,0.06)",
"stroke": "transparent"
}
},
"id": "dualAxis-primary-series",
"type": "bar",
"direction": "vertical",
"xField": "__Dim_X__",
"seriesField": "__Dim_ColorId__",
"yField": "__MeaPrimaryValue__",
"animation": true,
"zIndex": 1000,
"data": {
"id": "dualAxis-primary-dataset",
"values": [
{
"xA_20250923143118_c073": "公司",
"__OriginalData__": {
"xA_20250923143118_c073": "公司",
"xA_20250923143643_f772": "11581"
},
"xA_20250923143643_f772": "11581",
"__MeaId__": "xA_20250923143643_f772",
"__MeaName__": "sum(amount)",
"__MeaPrimaryValue__": "11581",
"__Dim_X__": "公司",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-xA_20250923143643_f772"
},
{
"xA_20250923143118_c073": "小型企业",
"__OriginalData__": {
"xA_20250923143118_c073": "小型企业",
"xA_20250923143643_f772": "6780"
},
"xA_20250923143643_f772": "6780",
"__MeaId__": "xA_20250923143643_f772",
"__MeaName__": "sum(amount)",
"__MeaPrimaryValue__": "6780",
"__Dim_X__": "小型企业",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-xA_20250923143643_f772"
},
{
"xA_20250923143118_c073": "消费者",
"__OriginalData__": {
"xA_20250923143118_c073": "消费者",
"xA_20250923143643_f772": "19173"
},
"xA_20250923143643_f772": "19173",
"__MeaId__": "xA_20250923143643_f772",
"__MeaName__": "sum(amount)",
"__MeaPrimaryValue__": "19173",
"__Dim_X__": "消费者",
"__Dim_Color__": "sum(amount)",
"__Dim_Detail__": "sum(amount)",
"__Dim_ColorId__": "sum(amount)-xA_20250923143643_f772"
}
],
"fields": {
"__Dim_X__": {
"sortIndex": 0
},
"__Dim_ColorId__": {
"sortIndex": 0
}
}
},
"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
}
]
}
},
"point": {
"style": {},
"state": {
"dimension_hover": {
"scaleX": 1.4,
"scaleY": 1.4,
"outerBorder": {
"lineWidth": 4,
"strokeOpacity": 0.25,
"distance": 2
}
}
}
},
"line": {
"style": {}
},
"area": {
"visible": true,
"style": {}
},
"animationThreshold": 2000
},
{
"label": {
"style": {
"fontSize": 14,
"fontWeight": "normal",
"fillOpacity": 1,
"lineJoin": "bevel",
"lineWidth": 2,
"stroke": "#ffffff",
"fill": "#212121"
},
"visible": false,
"position": "top",
"offset": 5,
"layout": {},
"smartInvert": false,
"overlap": {
"hideOnHit": true,
"clampForce": true
},
"zIndex": 1002
},
"point": {
"style": {
"size": 8,
"stroke": "#ffffff",
"lineWidth": 1,
"fillOpacity": 1,
"symbolType": "circle"
},
"state": {
"dimension_hover": {
"scaleX": 1.4,
"scaleY": 1.4,
"outerBorder": {
"lineWidth": 4,
"strokeOpacity": 0.25,
"distance": 2
}
}
}
},
"line": {
"style": {
"lineWidth": 2,
"lineCap": "round",
"lineJoin": "round"
}
},
"id": "dualAxis-secondary-series",
"type": "line",
"direction": "vertical",
"xField": "__Dim_X__",
"yField": "__MeaSecondaryValue__",
"seriesField": "__Dim_ColorId__",
"animation": true,
"zIndex": 1001,
"data": {
"id": "dualAxis-secondary-dataset",
"values": [],
"fields": {
"__Dim_X__": {
"sortIndex": 0
},
"__Dim_ColorId__": {
"sortIndex": 0
}
}
},
"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
}
]
}
},
"bar": {
"style": {
"lineWidth": 1
},
"state": {
"hover": {
"fillOpacity": 0.6
}
}
},
"area": {
"visible": true,
"style": {}
},
"animationThreshold": 2000
}
],
"axes": [
{
"domainLine": {
"visible": true,
"style": {
"lineWidth": 1,
"stroke": "#3641594d",
"strokeOpacity": 1
}
},
"grid": {
"visible": false,
"style": {
"lineWidth": 0.5,
"stroke": "#36415926",
"strokeOpacity": 1,
"lineDash": []
}
},
"subGrid": {
"visible": false,
"style": {
"lineWidth": 1,
"stroke": "#f1f2f5",
"strokeOpacity": 1,
"lineDash": [
4,
4
]
}
},
"tick": {
"visible": false,
"inside": false,
"tickSize": 4,
"alignWithLabel": true,
"style": {
"lineWidth": 1,
"stroke": "#3641594d",
"strokeOpacity": 1
}
},
"subTick": {
"visible": false,
"tickSize": 2,
"style": {
"lineWidth": 1,
"stroke": "#d9dde4",
"strokeOpacity": 1
}
},
"label": {
"visible": true,
"inside": false,
"space": 8,
"style": {
"fontSize": 12,
"fill": "#797B85",
"fontWeight": 400,
"fillOpacity": 1,
"maxLineWidth": 80,
"angle": 0
},
"flush": true,
"minGap": 4,
"autoHide": true,
"autoHideMethod": "greedy",
"autoHideSeparation": 4,
"autoLimit": true,
"autoRotate": false,
"autoRotateAngle": [
0,
-45,
-90
],
"lastVisible": true
},
"title": {
"space": 8,
"padding": 0,
"style": {
"fontSize": 12,
"lineHeight": "130%",
"fill": "#646A73",
"fontWeight": 400,
"fillOpacity": 1
},
"visible": false,
"text": "customer_type"
},
"maxHeight": 140,
"unit": {
"visible": false,
"style": {
"fontSize": 12,
"fill": "#89909d",
"fontWeight": "normal",
"fillOpacity": 1
}
},
"visible": true,
"type": "band",
"orient": "bottom",
"sampling": false,
"hover": true,
"paddingInner": [
0.15,
0.1
],
"paddingOuter": [
0.075,
0.1
]
},
{
"domainLine": {
"visible": false,
"style": {
"lineWidth": 1,
"stroke": "#3641594d",
"strokeOpacity": 1
}
},
"grid": {
"visible": true,
"style": {
"lineWidth": 0.5,
"stroke": "#36415926",
"strokeOpacity": 1,
"lineDash": []
}
},
"subGrid": {
"visible": false,
"style": {
"lineWidth": 1,
"stroke": "#f1f2f5",
"strokeOpacity": 1,
"lineDash": [
4,
4
]
}
},
"tick": {
"visible": false,
"inside": false,
"tickSize": 4,
"alignWithLabel": true,
"style": {
"lineWidth": 1,
"stroke": "#3641594d",
"strokeOpacity": 1
}
},
"subTick": {
"visible": false,
"tickSize": 2,
"style": {
"lineWidth": 1,
"stroke": "#d9dde4",
"strokeOpacity": 1
}
},
"label": {
"visible": true,
"inside": false,
"space": 12,
"style": {
"fontSize": 12,
"fill": "#797B85",
"fontWeight": 400,
"fillOpacity": 1,
"angle": 0
},
"autoLimit": true
},
"title": {
"space": 12,
"padding": 0,
"style": {
"fontSize": 12,
"lineHeight": "130%",
"fill": "#646A73",
"fontWeight": 400,
"fillOpacity": 1
},
"autoRotate": true,
"visible": false,
"text": "sum(amount)"
},
"maxWidth": "30%",
"unit": {
"visible": false,
"style": {
"fontSize": 12,
"fill": "#89909d",
"fontWeight": "normal",
"fillOpacity": 1
}
},
"visible": true,
"id": "dualAxis-primary-axis",
"seriesId": "dualAxis-primary-series",
"type": "linear",
"base": 10,
"orient": "left",
"nice": true,
"zero": true,
"inverse": false,
"innerOffset": {
"top": 7
}
},
{
"domainLine": {
"visible": false,
"style": {
"lineWidth": 1,
"stroke": "#3641594d",
"strokeOpacity": 1
}
},
"grid": {
"visible": false,
"style": {
"lineWidth": 1,
"stroke": "#f1f2f5",
"strokeOpacity": 1,
"lineDash": []
}
},
"subGrid": {
"visible": false,
"style": {
"lineWidth": 1,
"stroke": "#f1f2f5",
"strokeOpacity": 1,
"lineDash": [
4,
4
]
}
},
"tick": {
"visible": false,
"inside": false,
"tickSize": 4,
"alignWithLabel": true,
"style": {
"lineWidth": 1,
"stroke": "#3641594d",
"strokeOpacity": 1
}
},
"subTick": {
"visible": false,
"tickSize": 2,
"style": {
"lineWidth": 1,
"stroke": "#d9dde4",
"strokeOpacity": 1
}
},
"label": {
"visible": true,
"inside": false,
"space": 12,
"style": {
"fontSize": 12,
"fill": "#797B85",
"fontWeight": 400,
"fillOpacity": 1,
"angle": 0
},
"autoLimit": true
},
"title": {
"space": 12,
"padding": 0,
"style": {
"fontSize": 12,
"lineHeight": "130%",
"fill": "#646A73",
"fontWeight": 400,
"fillOpacity": 1
},
"autoRotate": true,
"visible": false,
"text": "sum(amount)"
},
"maxWidth": "30%",
"unit": {
"visible": false,
"style": {
"fontSize": 12,
"fill": "#89909d",
"fontWeight": "normal",
"fillOpacity": 1
}
},
"visible": false,
"id": "dualAxis-secondary-axis",
"seriesId": "dualAxis-secondary-series",
"sync": {
"axisId": "dualAxis-primary-axis",
"zeroAlign": true
},
"type": "linear",
"base": 10,
"orient": "right",
"nice": true,
"zero": true,
"inverse": false,
"innerOffset": {
"top": 7
}
}
],
"color": {
"type": "ordinal",
"domain": [
"sum(amount)-xA_20250923143643_f772"
],
"range": [
"#8D72F6",
"#5766EC",
"#66A3FE",
"#51D5E6",
"#4EC0B3",
"#F9DF90",
"#F9AD71",
"#ED8888",
"#E9A0C3",
"#D77DD3"
]
},
"legends": {
"orient": "right",
"position": "start",
"padding": 0,
"title": {
"visible": false,
"padding": 0,
"textStyle": {
"fontSize": 12,
"lineHeight": "130%",
"fill": "#21252c",
"fontWeight": "normal"
},
"space": 12
},
"pager": {
"textStyle": {
"fill": "rgb(51, 51, 51)"
},
"handler": {
"style": {
"fill": "rgb(47, 69, 84)"
},
"state": {
"disable": {
"fill": "rgb(170, 170, 170)"
}
}
}
},
"item": {
"visible": true,
"spaceCol": 10,
"spaceRow": 6,
"padding": 2,
"background": {
"state": {
"selectedHover": {
"fill": "#646A73",
"fillOpacity": 0.05
},
"unSelectedHover": {
"fill": "#f1f2f5"
}
}
},
"shape": {
"space": 6,
"style": {
"lineWidth": 0,
"fillOpacity": 1,
"opacity": 1,
"symbolType": "rectRound",
"size": 8
},
"state": {
"unSelected": {
"fillOpacity": 0.2,
"opacity": 1
}
}
},
"label": {
"space": 6,
"style": {
"fill": "#646A73",
"fontSize": 12,
"lineHeight": "130%",
"opacity": 1,
"fontWeight": 400
},
"state": {
"unSelected": {
"fill": "#bcc1cb",
"opacity": 1
}
}
},
"focus": true,
"maxWidth": 235.2,
"focusIconStyle": {
"size": 14,
"fill": "#646A73",
"fontWeight": 400
}
},
"allowAllCanceled": false,
"type": "discrete",
"visible": true,
"maxCol": 1,
"maxRow": 1,
"autoPage": true
},
"background": "transparent",
"crosshair": {
"xField": {
"visible": true,
"line": {
"type": "rect",
"visible": true,
"style": {
"fill": "#3641594d",
"opacity": 0.2,
"lineWidth": 0,
"stroke": "#606773",
"lineDash": [
2,
3
]
}
},
"label": {
"visible": true,
"style": {
"fontWeight": "normal",
"fill": "#ffffff",
"fontSize": 12
},
"labelBackground": {
"padding": {
"bottom": 0,
"top": 0,
"left": 2,
"right": 2
},
"style": {
"fill": "#364159",
"cornerRadius": 1
},
"visible": true
}
}
},
"yField": {
"visible": false,
"line": {
"type": "line",
"visible": true,
"style": {
"stroke": "#606773",
"fill": "transparent",
"opacity": 0.7,
"lineDash": [
2,
3
]
}
},
"label": {
"visible": false,
"style": {
"fontWeight": "normal",
"fill": "#ffffff",
"fontSize": 12
},
"labelBackground": {
"padding": {
"bottom": 0,
"top": 0,
"left": 2,
"right": 2
},
"style": {
"fill": "#21252c",
"cornerRadius": 1
}
}
}
},
"trigger": "hover"
},
"markPoint": [],
"markLine": [],
"markArea": [],
"animation": false,
"data": [],
"tooltip": {
"style": {
"offset": {
"x": 10,
"y": 10
},
"panel": {
"padding": {
"top": 10,
"left": 10,
"right": 10,
"bottom": 10
},
"backgroundColor": "#ffffff",
"border": {
"color": "#ffffff",
"width": 0,
"radius": 3
},
"shadow": {
"x": 0,
"y": 4,
"blur": 12,
"spread": 0,
"color": "rgba(33,37,44,0.1)"
}
},
"spaceRow": 6,
"titleLabel": {
"fontSize": 14,
"lineHeight": "150%",
"fontColor": "#21252c",
"fontWeight": "bold",
"textBaseline": "middle",
"spacing": 0
},
"shape": {
"size": 8,
"spacing": 6
},
"keyLabel": {
"fontSize": 14,
"lineHeight": "150%",
"fontColor": "#606773",
"textBaseline": "middle",
"spacing": 26
},
"valueLabel": {
"fontSize": 14,
"lineHeight": "150%",
"fontColor": "#21252c",
"fontWeight": "bold",
"textBaseline": "middle",
"spacing": 0
}
},
"offset": {
"x": 10,
"y": 10
},
"transitionDuration": 150,
"trigger": "hover",
"visible": true,
"activeType": [
"mark",
"dimension",
"group"
],
"renderMode": "html",
"className": "vchart-tooltip-element",
"enterable": false,
"confine": false,
"parentElement": {}
}
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
vchart.updateSpecSync(spec2)
Current Behavior
Expected Behavior
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response