Closed skie1997 closed 2 days ago
1.11.4
vscreen
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) });
https://github.com/VisActor/VChart/assets/40675330/b83f6a66-6785-48f8-b7be-a851f7c0a00b
update animation works
- OS: - Browser: - Framework:
No response
Version
1.11.4
Link to Minimal Reproduction
vscreen
Steps to Reproduce
Current Behavior
https://github.com/VisActor/VChart/assets/40675330/b83f6a66-6785-48f8-b7be-a851f7c0a00b
Expected Behavior
update animation works
Environment
Any additional comments?
No response