Closed
Description
Version
1.11.4
Link to Minimal Reproduction
vscreen
Steps to Reproduce
const spec = {
"type": "radar",
"outerRadius": 0.8,
"padding": {
"left": 6,
"right": 6,
"top": 6,
"bottom": 6
},
"categoryField": "BHCimAqm0QGN",
"valueField": "10002",
"seriesField": "30001",
"data": [
{
"id": "data",
"values": [
{
"10001": "Sales",
"10002": 20,
"10003": "IAU9APHHM28b",
"30001": "Sales",
"BHCimAqm0QGN": "河北",
"IAU9APHHM28b": 20
},
{
"10001": "Sales",
"10002": 50,
"10003": "IAU9APHHM28b",
"30001": "Sales",
"BHCimAqm0QGN": "山西",
"IAU9APHHM28b": 50
},
{
"10001": "Sales",
"10002": 40,
"10003": "IAU9APHHM28b",
"30001": "Sales",
"BHCimAqm0QGN": "内蒙古",
"IAU9APHHM28b": 40
},
{
"10001": "Sales",
"10002": 50,
"10003": "IAU9APHHM28b",
"30001": "Sales",
"BHCimAqm0QGN": "辽宁",
"IAU9APHHM28b": 50
},
{
"10001": "Sales",
"10002": 35,
"10003": "IAU9APHHM28b",
"30001": "Sales",
"BHCimAqm0QGN": "吉林",
"IAU9APHHM28b": 35
}
],
"fields": {
"10001": {
"alias": "指标名称"
},
"10002": {
"alias": "指标值"
},
"30001": {
"alias": "图例项",
"domain": [
"Sales"
],
"sortIndex": 0,
"lockStatisticsByDomain": true
},
"BHCimAqm0QGN": {
"alias": "Province",
"domain": [
"河北",
"山西",
"内蒙古",
"辽宁",
"吉林"
],
"sortIndex": 0,
"lockStatisticsByDomain": true
},
"IAU9APHHM28b": {
"alias": "Sales"
}
}
}
],
"axes": [
{
"orient": "radius",
"tick": {
"forceTickCount": 3
},
"grid": {
"smooth": false,
"style": {
"stroke": "rgba(255,255,255,0.15)",
"lineWidth": 1
}
},
"label": {
"visible": false,
"style": {
"fontFamily": "D-DIN"
}
}
},
{
"orient": "angle",
"sampling": false,
"tick": {
"visible": true
},
"domainLine": {
"style": {
"visible": false
}
},
"grid": {},
"label": {
"style": {
"fontFamily": "D-DIN",
"fill": "rgba(255,255,255,0.65)",
"fontSize": 12
},
"visible": true
}
}
],
"sortDataByAxis": true,
"color": {
"field": "30001",
"type": "ordinal",
"range": [
"#006EFF"
],
"specified": {},
"domain": [
"Sales"
]
},
"label": {
"visible": false,
"offset": 3,
"overlap": {
"hideOnHit": true,
"avoidBaseMark": false,
"strategy": [
{
"type": "position",
"position": [
"top",
"bottom"
]
}
]
},
"style": {
"fontSize": 12,
"zIndex": 400,
"lineHeight": "130%",
"fill": "#363839",
"stroke": "rgba(255, 255, 255, 0.8)",
"strokeOpacity": 1,
"lineWidth": 2
}
},
"legends": [
{
"type": "discrete",
"visible": true,
"id": "legend-discrete",
"orient": "right",
"position": "middle",
"layoutType": "normal",
"maxCol": 1,
"title": {
"textStyle": {
"fontSize": 12,
"fill": "rgba(255,255,255,0.45)"
}
},
"layoutLevel": 60,
"item": {
"focus": false,
"focusIconStyle": {
"size": 14
},
"maxWidth": 0,
"spaceRow": 0,
"spaceCol": 0,
"padding": {
"left": 10,
"right": 0,
"top": 0,
"bottom": 12
},
"background": {
"visible": false,
"style": {
"fillOpacity": 0.001
}
},
"label": {
"style": {
"fontSize": 12,
"fill": "rgba(255,255,255,0.45)",
"fontFamily": "D-DIN",
"fontWeight": "normal"
},
"state": {
"unSelected": {
"fillOpacity": 0.2
}
}
},
"shape": {
"style": {
"lineWidth": 0,
"symbolType": "circle",
"fillOpacity": 1,
"size": 12,
"width": 12,
"height": 7.416
}
}
},
"pager": {
"layout": "horizontal",
"padding": {
"left": -18
},
"textStyle": {},
"space": 0,
"handler": {
"preShape": "triangleLeft",
"nextShape": "triangleRight",
"style": {},
"state": {
"disable": {}
}
}
},
"alignSelf": "end",
"padding": {
"top": 0,
"bottom": 0,
"left": 16,
"right": 0
}
}
],
"tooltip": {
"visible": true,
"renderMode": "canvas",
"mark": {
"visible": true
},
"style": {
"panel": {
"padding": {
"top": 5,
"bottom": 10,
"left": 10,
"right": 10
},
"backgroundColor": "rgba(8, 28, 48, 0.95)",
"border": {
"color": "#CFCFCF",
"width": 0,
"radius": 2
},
"shadow": {
"x": 0,
"y": 4,
"blur": 12,
"spread": 0,
"color": "rgba(0, 0, 0, 0.2)"
}
},
"titleLabel": {
"fontSize": 14,
"fontColor": "#FFF",
"fontWeight": "bold",
"fontFamily": "D-DIN",
"align": "left",
"lineHeight": 18
},
"keyLabel": {
"fontSize": 12,
"fontColor": "rgba(255,255,255,0.65)",
"fontWeight": "normal",
"fontFamily": "SourceHanSansCN-Normal",
"align": "left",
"lineHeight": 18
},
"valueLabel": {
"fontSize": 12,
"fontColor": "#FFF",
"fontWeight": "normal",
"fontFamily": "D-DIN",
"align": "right",
"lineHeight": 18
},
"shape": {
"size": 10,
"spacing": 10
},
"spaceRow": 10
},
"dimension": {
"visible": true
}
},
"point": {
"style": {
"shape": {
"type": "ordinal",
"field": "30001",
"range": [
"circle"
],
"domain": [
"Sales"
]
},
"size": {
"type": "ordinal",
"field": "30001",
"range": [
5.317361552716548
],
"domain": [
"Sales"
]
},
"fill": {
"field": "30001",
"type": "ordinal",
"range": [
"#006EFF"
],
"specified": {},
"domain": [
"Sales"
]
},
"stroke": {
"field": "30001",
"type": "ordinal",
"range": [
"#006EFF"
],
"specified": {},
"domain": [
"Sales"
]
},
"strokeOpacity": {
"type": "ordinal",
"field": "30001",
"range": [
1
],
"domain": [
"Sales"
]
},
"fillOpacity": {
"type": "ordinal",
"field": "30001",
"range": [
1
],
"domain": [
"Sales"
]
}
},
"state": {
"hover": {
"lineWidth": 2,
"fillOpacity": 1,
"strokeOpacity": 1,
"scaleX": 1,
"scaleY": 1
}
}
},
"line": {
"style": {
"curveType": {
"type": "ordinal",
"field": "30001",
"range": [
"linear"
],
"domain": [
"Sales"
]
},
"lineWidth": {
"type": "ordinal",
"field": "30001",
"range": [
2
],
"domain": [
"Sales"
]
},
"lineDash": {
"type": "ordinal",
"field": "30001",
"range": [
[
0,
0
]
],
"domain": [
"Sales"
]
}
}
},
"seriesMark": "line",
"markOverlap": false,
"area": {
"visible": true,
"style": {
"fillOpacity": 0.35,
"curveType": {
"type": "ordinal",
"field": "30001",
"range": [
"linear"
],
"domain": [
"Sales"
]
}
},
"state": {
"hover": {
"fillOpacity": 0.8
}
}
},
"region": [
{
"clip": true
}
],
"background": "rgba(255, 255, 255, 0)",
"invalidType": "zero",
"animation": true,
"crosshair": {
"xField": {
"line": {
"style": {
"fillOpacity": 1,
"fill": "rgba(80,156,255,0.1)"
}
},
"visible": false
},
"yField": {
"line": {
"style": {
"fillOpacity": 1,
"fill": "rgba(80,156,255,0.1)"
}
},
"visible": false
},
"categoryField": {
"visible": true,
"line": {
"style": {
"stroke": "rgba(255,255,255,0.15)",
"lineWidth": 2
}
}
},
"valueField": {
"visible": false
}
},
"morph": {
"enable": false
},
"axesPadding": true,
"plotLayout": {
"clip": false
},
"select": {
"enable": true
},
"animationAppear": false,
"animationNormal": false,
"animationEnter": {
"duration": 5000,
"easing": "quintIn"
},
"animationUpdate": {
"duration": 5000,
"easing": "quintIn",
// type: ''
},
"animationExit": {},
"hash": "09f9371568d873f922c3ece6ee930109",
"width": 400,
"height": 225
}
spec.animation = true
spec.background = 'black'
const streamLight = new StreamLight(0, 1, 500, 'linear')
console.log('StreamLight', streamLight.getEndProps())
const cs = new VChart(spec, {
dom: document.getElementById('chart') as HTMLElement,
mode: isMobile ? 'mobile-browser' : 'desktop-browser'
});
console.time('renderTime');
cs.renderAsync().then(() => {
setTimeout(() => {
cs.updateSpec({
"type": "radar",
"outerRadius": 0.8,
"padding": {
"left": 6,
"right": 6,
"top": 6,
"bottom": 6
},
"categoryField": "BHCimAqm0QGN",
"valueField": "10002",
"seriesField": "30001",
"data": [
{
"id": "data",
"values": [
{
"10001": "Sales",
"10002": 30,
"10003": "IAU9APHHM28b",
"30001": "Sales",
"BHCimAqm0QGN": "河北",
"IAU9APHHM28b": 30
},
{
"10001": "Sales",
"10002": 20,
"10003": "IAU9APHHM28b",
"30001": "Sales",
"BHCimAqm0QGN": "山西",
"IAU9APHHM28b": 20
},
{
"10001": "Sales",
"10002": 10,
"10003": "IAU9APHHM28b",
"30001": "Sales",
"BHCimAqm0QGN": "内蒙古",
"IAU9APHHM28b": 10
},
{
"10001": "Sales",
"10002": 30,
"10003": "IAU9APHHM28b",
"30001": "Sales",
"BHCimAqm0QGN": "辽宁",
"IAU9APHHM28b": 30
},
{
"10001": "Sales",
"10002": 40,
"10003": "IAU9APHHM28b",
"30001": "Sales",
"BHCimAqm0QGN": "吉林",
"IAU9APHHM28b": 40
}
],
"fields": {
"10001": {
"alias": "指标名称"
},
"10002": {
"alias": "指标值"
},
"30001": {
"alias": "图例项",
"domain": [
"Sales"
],
"sortIndex": 0,
"lockStatisticsByDomain": true
},
"BHCimAqm0QGN": {
"alias": "Province",
"domain": [
"河北",
"山西",
"内蒙古",
"辽宁",
"吉林"
],
"sortIndex": 0,
"lockStatisticsByDomain": true
},
"IAU9APHHM28b": {
"alias": "Sales"
}
}
}
],
"axes": [
{
"orient": "radius",
"tick": {
"forceTickCount": 3
},
"grid": {
"smooth": false,
"style": {
"stroke": "rgba(255,255,255,0.15)",
"lineWidth": 1
}
},
"label": {
"visible": false,
"style": {
"fontFamily": "D-DIN"
}
}
},
{
"orient": "angle",
"sampling": false,
"tick": {
"visible": true
},
"domainLine": {
"style": {
"visible": false
}
},
"grid": {},
"label": {
"style": {
"fontFamily": "D-DIN",
"fill": "rgba(255,255,255,0.65)",
"fontSize": 12
},
"visible": true
}
}
],
"sortDataByAxis": true,
"color": {
"field": "30001",
"type": "ordinal",
"range": [
"#006EFF"
],
"specified": {},
"domain": [
"Sales"
]
},
"label": {
"visible": false,
"offset": 3,
"overlap": {
"hideOnHit": true,
"avoidBaseMark": false,
"strategy": [
{
"type": "position",
"position": [
"top",
"bottom"
]
}
]
},
"style": {
"fontSize": 12,
"zIndex": 400,
"lineHeight": "130%",
"fill": "#363839",
"stroke": "rgba(255, 255, 255, 0.8)",
"strokeOpacity": 1,
"lineWidth": 2
}
},
"legends": [
{
"type": "discrete",
"visible": true,
"id": "legend-discrete",
"orient": "right",
"position": "middle",
"layoutType": "normal",
"maxCol": 1,
"title": {
"textStyle": {
"fontSize": 12,
"fill": "rgba(255,255,255,0.45)"
}
},
"layoutLevel": 60,
"item": {
"focus": false,
"focusIconStyle": {
"size": 14
},
"maxWidth": 0,
"spaceRow": 0,
"spaceCol": 0,
"padding": {
"left": 10,
"right": 0,
"top": 0,
"bottom": 12
},
"background": {
"visible": false,
"style": {
"fillOpacity": 0.001
}
},
"label": {
"style": {
"fontSize": 12,
"fill": "rgba(255,255,255,0.45)",
"fontFamily": "D-DIN",
"fontWeight": "normal"
},
"state": {
"unSelected": {
"fillOpacity": 0.2
}
}
},
"shape": {
"style": {
"lineWidth": 0,
"symbolType": "circle",
"fillOpacity": 1,
"size": 12,
"width": 12,
"height": 7.416
}
}
},
"pager": {
"layout": "horizontal",
"padding": {
"left": -18
},
"textStyle": {},
"space": 0,
"handler": {
"preShape": "triangleLeft",
"nextShape": "triangleRight",
"style": {},
"state": {
"disable": {}
}
}
},
"alignSelf": "end",
"padding": {
"top": 0,
"bottom": 0,
"left": 16,
"right": 0
}
}
],
"tooltip": {
"visible": true,
"renderMode": "canvas",
"mark": {
"visible": true
},
"style": {
"panel": {
"padding": {
"top": 5,
"bottom": 10,
"left": 10,
"right": 10
},
"backgroundColor": "rgba(8, 28, 48, 0.95)",
"border": {
"color": "#CFCFCF",
"width": 0,
"radius": 2
},
"shadow": {
"x": 0,
"y": 4,
"blur": 12,
"spread": 0,
"color": "rgba(0, 0, 0, 0.2)"
}
},
"titleLabel": {
"fontSize": 14,
"fontColor": "#FFF",
"fontWeight": "bold",
"fontFamily": "D-DIN",
"align": "left",
"lineHeight": 18
},
"keyLabel": {
"fontSize": 12,
"fontColor": "rgba(255,255,255,0.65)",
"fontWeight": "normal",
"fontFamily": "SourceHanSansCN-Normal",
"align": "left",
"lineHeight": 18
},
"valueLabel": {
"fontSize": 12,
"fontColor": "#FFF",
"fontWeight": "normal",
"fontFamily": "D-DIN",
"align": "right",
"lineHeight": 18
},
"shape": {
"size": 10,
"spacing": 10
},
"spaceRow": 10
},
"dimension": {
"visible": true
}
},
"point": {
"style": {
"shape": {
"type": "ordinal",
"field": "30001",
"range": [
"circle"
],
"domain": [
"Sales"
]
},
"size": {
"type": "ordinal",
"field": "30001",
"range": [
5.317361552716548
],
"domain": [
"Sales"
]
},
"fill": {
"field": "30001",
"type": "ordinal",
"range": [
"#006EFF"
],
"specified": {},
"domain": [
"Sales"
]
},
"stroke": {
"field": "30001",
"type": "ordinal",
"range": [
"#006EFF"
],
"specified": {},
"domain": [
"Sales"
]
},
"strokeOpacity": {
"type": "ordinal",
"field": "30001",
"range": [
1
],
"domain": [
"Sales"
]
},
"fillOpacity": {
"type": "ordinal",
"field": "30001",
"range": [
1
],
"domain": [
"Sales"
]
}
},
"state": {
"hover": {
"lineWidth": 2,
"fillOpacity": 1,
"strokeOpacity": 1,
"scaleX": 1,
"scaleY": 1
}
}
},
"line": {
"style": {
"curveType": {
"type": "ordinal",
"field": "30001",
"range": [
"linear"
],
"domain": [
"Sales"
]
},
"lineWidth": {
"type": "ordinal",
"field": "30001",
"range": [
2
],
"domain": [
"Sales"
]
},
"lineDash": {
"type": "ordinal",
"field": "30001",
"range": [
[
0,
0
]
],
"domain": [
"Sales"
]
}
}
},
"seriesMark": "line",
"markOverlap": false,
"area": {
"visible": true,
"style": {
"fillOpacity": 0.35,
"curveType": {
"type": "ordinal",
"field": "30001",
"range": [
"linear"
],
"domain": [
"Sales"
]
}
},
"state": {
"hover": {
"fillOpacity": 0.8
}
}
},
"region": [
{
"clip": true
}
],
"background": "rgba(255, 255, 255, 0)",
"invalidType": "zero",
"animation": true,
"crosshair": {
"xField": {
"line": {
"style": {
"fillOpacity": 1,
"fill": "rgba(80,156,255,0.1)"
}
},
"visible": false
},
"yField": {
"line": {
"style": {
"fillOpacity": 1,
"fill": "rgba(80,156,255,0.1)"
}
},
"visible": false
},
"categoryField": {
"visible": true,
"line": {
"style": {
"stroke": "rgba(255,255,255,0.15)",
"lineWidth": 2
}
}
},
"valueField": {
"visible": false
}
},
"morph": {
"enable": false
},
"axesPadding": true,
"plotLayout": {
"clip": false
},
"select": {
"enable": true
},
"animationAppear": false,
"animationNormal": false,
"animationEnter": {
"duration": 5000,
"easing": "quintIn"
},
"animationUpdate": {
"duration": 5000,
"easing": "quintIn"
},
"animationExit": {},
"hash": "09f9371568d873f922c3ece6ee930109",
"width": 400,
"height": 225
})
}, 2000)
});Current Behavior
20240618164018_rec_.mp4
Expected Behavior
update animation works
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response