Closed skie1997 closed 3 months ago
1.11.6-alpha.1
vscreen
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(0, 0, 0, 1)", "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: 'scaleIn' } }, "animationNormal": { "pie": [ { "channel": { x: { from: (...p) => { return p[1].graphicItem.attribute.x }, to: (...p) => { const angle = (p[1].graphicItem.attribute.startAngle + p[1].graphicItem.attribute.endAngle) / 2 return p[1].graphicItem.attribute.x + 10 * Math.cos(angle) } }, y: { from: (...p) => { return p[1].graphicItem.attribute.y }, to: (...p) => { const angle = (p[1].graphicItem.attribute.startAngle + p[1].graphicItem.attribute.endAngle) / 2 return p[1].graphicItem.attribute.y + 10 * Math.sin(angle) } } }, "oneByOne": 1000, "duration": 500, "loop": true, "easing": "quintIn", "delayAfter": 5500, "controlOptions": { "immediatelyApply": false } }, { "channel": { x: { from: (...p) => { const angle = (p[1].graphicItem.attribute.startAngle + p[1].graphicItem.attribute.endAngle) / 2 return p[1].graphicItem.attribute.x + 10 * Math.cos(angle) }, to: (...p) => { return p[1].graphicItem.attribute.x } }, y: { from: (...p) => { const angle = (p[1].graphicItem.attribute.startAngle + p[1].graphicItem.attribute.endAngle) / 2 return p[1].graphicItem.attribute.y + 10 * Math.sin(angle) }, to: (...p) => { return p[1].graphicItem.attribute.y } } }, "oneByOne": 1000, "duration": 500, "easing": "quintIn", "delay": 500, "delayAfter": 5000, "loop": true, "controlOptions": { "immediatelyApply": false } } ], "rose": [ { "channel": { "x": {}, "y": {} }, "oneByOne": true, "duration": 500, "loop": true, "easing": "quintIn", "delayAfter": 5500, "controlOptions": { "immediatelyApply": false } }, { "channel": { "x": {}, "y": {} }, "oneByOne": true, "duration": 500, "easing": "quintIn", "delay": 500, "delayAfter": 5000, "loop": true, "controlOptions": { "immediatelyApply": false } } ] }, "animationEnter": false, "animationUpdate": false, "animationExit": { "pie": {}, "rose": {} }, "hash": "656cc9269e2ea5b09ada369e49c4b01f", "width": 400, "height": 225 } const vchart = new VChart({ type: 'pie', data: [{ values: [] }], background: 'black' }, { dom: CONTAINER_ID }); vchart.renderSync(); vchart.updateSpec(spec) // Just for the convenience of console debugging, DO NOT COPY! window['vchart'] = vchart;
在分支fix/updateSpec-dose-not-run-update-animation复现:
原因: updateSpec时走到reuse逻辑
- OS: - Browser: - Framework:
No response
Version
1.11.6-alpha.1
Link to Minimal Reproduction
vscreen
Steps to Reproduce
Current Behavior
在分支fix/updateSpec-dose-not-run-update-animation复现:
原因: updateSpec时走到reuse逻辑
Expected Behavior
Environment
Any additional comments?
No response