Closed skie1997 closed 2 days ago
1.11.5
vscreen
const spec = { "type": "rose", "categoryField": "LTjXll9vYHaK", "valueField": "kdPnyP4TFbo1", "seriesField": "LTjXll9vYHaK", "padding": { "left": 6, "right": 6, "top": 6, "bottom": 6 }, "axes": [ { "orient": "radius", "zero": true, "nice": false, "ticks": false, "niceType": "rough", "tick": {}, "innerOffset": { "top": 0 } } ], "data": [ { "id": "data", "values": [ { "LTjXll9vYHaK": "河北", "kdPnyP4TFbo1": 20 }, { "LTjXll9vYHaK": "山西", "kdPnyP4TFbo1": 50 }, { "LTjXll9vYHaK": "内蒙古", "kdPnyP4TFbo1": 40 }, { "LTjXll9vYHaK": "辽宁", "kdPnyP4TFbo1": 50 }, { "LTjXll9vYHaK": "吉林", "kdPnyP4TFbo1": 35 } ], "fields": { "LTjXll9vYHaK": { "alias": "Province", "sortIndex": 0 }, "kdPnyP4TFbo1": { "alias": "Sales" } } } ], "outerRadius": 0.8, "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" }, "color": { "field": "LTjXll9vYHaK", "type": "ordinal", "range": [ "#006EFF", "#00E5E5", "#2E55EA", "#B8E7FE", "#00D689" ], "specified": {}, "domain": [ "河北", "山西", "内蒙古", "辽宁", "吉林" ] }, "legends": [ { "type": "discrete", "visible": true, "id": "legend-discrete", "orient": "bottom", "position": "middle", "layoutType": "normal", "maxRow": 1000, "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 }, "rose": { "state": { "hover": { "cursor": "pointer", "fillOpacity": 0.8, "stroke": "#58595B", "lineWidth": 1, "zIndex": 500 }, "selected": { "cursor": "pointer", "fillOpacity": 1, "stroke": "#58595B", "lineWidth": 1 }, "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 } }, "pie": {}, "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 }, "categoryField": { "visible": false }, "valueField": { "visible": false } }, "morph": { "enable": false }, "axesPadding": true, "plotLayout": { "clip": false }, "animationAppear": { "pie": { "type": "growRadiusIn", "easing": "quintIn", "duration": 5000 }, "rose": { "type": "growRadiusIn", "easing": "quintIn", "duration": 5000 } }, "animationNormal": { "pie": [ { "channel": { outerRadius: { from: (...p) => { return p[1].graphicItem.attribute.outerRadius }, to: (...p) => { return p[1].graphicItem.attribute.outerRadius + 10 } } }, "oneByOne": 1000, "duration": 500, "loop": true, "easing": "quintIn", "delayAfter": 3500, "controlOptions": { "immediatelyApply": false } }, { "channel": { outerRadius: { from: (...p) => { return p[1].graphicItem.attribute.outerRadius + 10 }, to: (...p) => { return p[1].graphicItem.attribute.outerRadius } } }, "oneByOne": 1000, "duration": 500, "easing": "quintIn", "delay": 500, "delayAfter": 3000, "loop": true, "controlOptions": { "immediatelyApply": false } } ], "rose": [ { "channel": { "outerRadius": { from: (...p) => { return p[1].graphicItem.attribute.outerRadius }, to: (...p) => { return p[1].graphicItem.attribute.outerRadius + 10 } } }, "oneByOne": 1000, "duration": 500, "loop": true, "easing": "quintIn", "delayAfter": 3500, "controlOptions": { "immediatelyApply": false } }, { "channel": { "outerRadius": { from: (...p) => { return p[1].graphicItem.attribute.outerRadius + 10 }, to: (...p) => { return p[1].graphicItem.attribute.outerRadius } } }, "oneByOne": 1000, "duration": 500, "easing": "quintIn", "delay": 500, "delayAfter": 3000, "loop": true, "controlOptions": { "immediatelyApply": false } } ] }, "animationEnter": { "pie": { "easing": "quintIn", "duration": 1000 }, "rose": { "easing": "quintIn", "duration": 1000 } }, "animationUpdate": { "pie": { "easing": "quintIn", "duration": 1000 }, "rose": { "easing": "quintIn", "duration": 1000 } }, "animationExit": false, "hash": "3ced33bdcd6c7426fae582fab10f5f50", "width": 400, "height": 225 } const cs = new VChart({ type: 'pie', data: [{ values: [] }], background: 'black', // No: false }, { dom: document.getElementById('chart') as HTMLElement, mode: isMobile ? 'mobile-browser' : 'desktop-browser' }); console.time('renderTime'); cs.renderAsync() cs.updateSpec(spec) cs.updateSpec(spec)
- OS: - Browser: - Framework:
No response
Version
1.11.5
Link to Minimal Reproduction
vscreen
Steps to Reproduce
Current Behavior
Expected Behavior
Environment
Any additional comments?
No response