Closed skie1997 closed 2 days ago
1.11.4
null
const spec = { "type": "pie", "categoryField": "vNsVXsBuZbaF", "valueField": "UleCx2ZKY06F", "seriesField": "vNsVXsBuZbaF", "padding": { "left": 6, "right": 6, "top": 6, "bottom": 6 }, "data": [ { "id": "data", "values": [ { "vNsVXsBuZbaF": "河北", "UleCx2ZKY06F": 20 }, { "vNsVXsBuZbaF": "山西", "UleCx2ZKY06F": 50 }, { "vNsVXsBuZbaF": "内蒙古", "UleCx2ZKY06F": 40 }, { "vNsVXsBuZbaF": "辽宁", "UleCx2ZKY06F": 50 }, { "vNsVXsBuZbaF": "吉林", "UleCx2ZKY06F": 35 } ], "fields": { "vNsVXsBuZbaF": { "alias": "Province", "sortIndex": 0 }, "UleCx2ZKY06F": { "alias": "Sales" } } } ], "outerRadius": 0.75, "color": { "field": "vNsVXsBuZbaF", "type": "ordinal", "range": [ "#006EFF", "#00E5E5", "#2E55EA", "#B8E7FE", "#00D689" ], "specified": {}, "domain": [ "河北", "山西", "内蒙古", "辽宁", "吉林" ] }, "label": { "visible": false, "offset": 3, "overlap": { "hideOnHit": true, "avoidBaseMark": false, "strategy": [ { "type": "position", "position": [ "top", "bottom" ] } ] }, "style": { "fontSize": 19, "fontFamily": "D-DIN", "fontWeight": "normal", "zIndex": 400, "lineHeight": "130%", "fill": "rgba(255,255,255,1)", "strokeOpacity": 0, "angle": 0 }, "position": "outside", "smartInvert": false, "interactive": false, "fontWeight": "normal" }, "legends": [ { "type": "discrete", "visible": true, "id": "legend-discrete", "orient": "bottom", "position": "start", "layoutType": "normal", "maxRow": 1, "title": { "textStyle": { "fontSize": 12, "fill": "rgba(255,255,255,1)" } }, "layoutLevel": 30, "item": { "focus": false, "focusIconStyle": { "size": 14 }, "maxWidth": 400, "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,1)", "fontFamily": "D-DIN", "fontWeight": "normal" }, "state": { "unSelected": { "fillOpacity": 0.2 } } }, "shape": { "style": { "lineWidth": 0, "symbolType": "circle", "size": 12, "fillOpacity": 1, "width": 12, "height": 7.416 } } }, "pager": { "layout": "horizontal", "padding": 0, "textStyle": {}, "space": 0, "handler": { "preShape": "triangleLeft", "nextShape": "triangleRight", "style": {}, "state": { "disable": {} } } }, "alignSelf": "start", "padding": { "top": 16, "bottom": 0, "left": 0, "right": 0 } } ], "hover": { "enable": true }, "select": { "enable": true }, "pie": { "state": { "hover": { "cursor": "pointer", "fillOpacity": 0.8, "stroke": "#58595B", "lineWidth": 1, "zIndex": 500, "outerRadius": 0.8 }, "selected": { "cursor": "pointer", "fillOpacity": 1, "stroke": "#58595B", "lineWidth": 1, "outerRadius": 0.8 }, "selected_reverse": { "fillOpacity": 0.3, "lineWidth": 0.3 } } }, "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 } }, "rose": {}, "region": [ { "clip": true } ], "background": "rgba(255, 255, 255, 0)", "animation": false, "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 } }, "morph": { "enable": false }, "axesPadding": true, "plotLayout": { "clip": false }, "animationAppear": { "pie": { "type": "growRadiusIn", "easing": "quintIn", "duration": 500 }, "rose": { "type": "growRadiusIn", "easing": "quintIn", "duration": 5000 } }, "animationNormal": false, "animationEnter": { "pie": { "type": "growRadiusIn", "easing": "quintIn", "duration": 5000, options: {} }, "rose": { "type": "growRadiusIn", "easing": "quintIn", "duration": 5000 } }, "animationUpdate": false, "animationExit": { "pie": { options: {} }, "rose": {} }, "hash": "15a5a3e36fc29ef358a5baacdc22288a", "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({ type: 'pie', data: [{ values: [] }], background: 'black', animation: true }, { dom: document.getElementById('chart') as HTMLElement, mode: isMobile ? 'mobile-browser' : 'desktop-browser' }); console.time('renderTime'); cs.renderAsync().then(() => { setTimeout(() => { cs.updateSpec(spec) }, 1000); setTimeout(() => { cs.updateSpec({ "type": "pie", "categoryField": "vNsVXsBuZbaF", "valueField": "UleCx2ZKY06F", "seriesField": "vNsVXsBuZbaF", "padding": { "left": 6, "right": 6, "top": 6, "bottom": 6 }, "data": [ { "id": "data", "values": [ { "vNsVXsBuZbaF": "河北", "UleCx2ZKY06F": 10 }, { "vNsVXsBuZbaF": "山西", "UleCx2ZKY06F": 20 }, { "vNsVXsBuZbaF": "内蒙古", "UleCx2ZKY06F": 30 } ], "fields": { "vNsVXsBuZbaF": { "alias": "Province", "sortIndex": 0 }, "UleCx2ZKY06F": { "alias": "Sales" } } } ], "outerRadius": 0.75, "color": { "field": "vNsVXsBuZbaF", "type": "ordinal", "range": [ "#006EFF", "#00E5E5", "#2E55EA", "#B8E7FE", "#00D689" ], "specified": {}, "domain": [ "河北", "山西", "内蒙古", "辽宁", "吉林" ] }, "label": { "visible": false, "offset": 3, "overlap": { "hideOnHit": true, "avoidBaseMark": false, "strategy": [ { "type": "position", "position": [ "top", "bottom" ] } ] }, "style": { "fontSize": 19, "fontFamily": "D-DIN", "fontWeight": "normal", "zIndex": 400, "lineHeight": "130%", "fill": "rgba(255,255,255,1)", "strokeOpacity": 0, "angle": 0 }, "position": "outside", "smartInvert": false, "interactive": false, "fontWeight": "normal" }, "legends": [ { "type": "discrete", "visible": true, "id": "legend-discrete", "orient": "bottom", "position": "start", "layoutType": "normal", "maxRow": 1, "title": { "textStyle": { "fontSize": 12, "fill": "rgba(255,255,255,1)" } }, "layoutLevel": 30, "item": { "focus": false, "focusIconStyle": { "size": 14 }, "maxWidth": 400, "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,1)", "fontFamily": "D-DIN", "fontWeight": "normal" }, "state": { "unSelected": { "fillOpacity": 0.2 } } }, "shape": { "style": { "lineWidth": 0, "symbolType": "circle", "size": 12, "fillOpacity": 1, "width": 12, "height": 7.416 } } }, "pager": { "layout": "horizontal", "padding": 0, "textStyle": {}, "space": 0, "handler": { "preShape": "triangleLeft", "nextShape": "triangleRight", "style": {}, "state": { "disable": {} } } }, "alignSelf": "start", "padding": { "top": 16, "bottom": 0, "left": 0, "right": 0 } } ], "hover": { "enable": true }, "select": { "enable": true }, "pie": { "state": { "hover": { "cursor": "pointer", "fillOpacity": 0.8, "stroke": "#58595B", "lineWidth": 1, "zIndex": 500, "outerRadius": 0.8 }, "selected": { "cursor": "pointer", "fillOpacity": 1, "stroke": "#58595B", "lineWidth": 1, "outerRadius": 0.8 }, "selected_reverse": { "fillOpacity": 0.3, "lineWidth": 0.3 } } }, "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 } }, "rose": {}, "region": [ { "clip": true } ], "background": "rgba(255, 255, 255, 0)", "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 } }, "morph": { "enable": false }, "axesPadding": true, "plotLayout": { "clip": false }, "animationAppear": false, "animationNormal": false, "animationEnter": { "pie": { "type": "growRadiusIn", "easing": "quintIn", "duration": 5000, options: {} }, "rose": { "type": "growRadiusIn", "easing": "quintIn", "duration": 5000 } }, "animationUpdate": false, "animationExit": { "pie": { options: {} }, "rose": {} }, "hash": "15a5a3e36fc29ef358a5baacdc22288a", "width": 400, "height": 225 }) }, 2000); });
update animation works
- OS: - Browser: - Framework:
No response
Version
1.11.4
Link to Minimal Reproduction
null
Steps to Reproduce
Current Behavior
Expected Behavior
update animation works
Environment
Any additional comments?
No response