Closed skie1997 closed 2 days ago
1.11.5
vscreen
const spec = { "type": "bar", "xField": [ "HqlYadRdHJ5c", "30001" ], "yField": [ "10002" ], "direction": "vertical", "sortDataByAxis": true, "seriesField": "30001", "padding": { "left": 6, "right": 6, "top": 6, "bottom": 6 }, "labelLayout": "region", "data": [ { "id": "data", "values": [ { "10001": "Sales", "10002": 30, "10003": "Tn97A7q0XVDq", "30001": "2023", "HqlYadRdHJ5c": "Labels", "Tn97A7q0XVDq": 30, "7ti8XuX4kcY1": "2023", "dataKey": 0.9415136092903305 }, { "10001": "Sales", "10002": 24, "10003": "Tn97A7q0XVDq", "30001": "2022", "HqlYadRdHJ5c": "Labels", "Tn97A7q0XVDq": 24, "7ti8XuX4kcY1": "2022", "dataKey": 0.1236898785279168 }, { "10001": "Sales", "10002": 20, "10003": "Tn97A7q0XVDq", "30001": "2023", "HqlYadRdHJ5c": "Tables", "Tn97A7q0XVDq": 20, "7ti8XuX4kcY1": "2023", "dataKey": 0.8316483769080338 }, { "10001": "Sales", "10002": 10, "10003": "Tn97A7q0XVDq", "30001": "2022", "HqlYadRdHJ5c": "Tables", "Tn97A7q0XVDq": 10, "7ti8XuX4kcY1": "2022", "dataKey": 0.9829195965652409 }, { "10001": "Sales", "10002": 40, "10003": "Tn97A7q0XVDq", "30001": "2023", "HqlYadRdHJ5c": "Storage", "Tn97A7q0XVDq": 40, "7ti8XuX4kcY1": "2023", "dataKey": 0.8370107379745695 }, { "10001": "Sales", "10002": 20, "10003": "Tn97A7q0XVDq", "30001": "2022", "HqlYadRdHJ5c": "Storage", "Tn97A7q0XVDq": 20, "7ti8XuX4kcY1": "2022", "dataKey": 0.39610711136194077 }, { "10001": "Sales", "10002": 10, "10003": "Tn97A7q0XVDq", "30001": "2023", "HqlYadRdHJ5c": "Furn", "Tn97A7q0XVDq": 10, "7ti8XuX4kcY1": "2023", "dataKey": 0.1871370807229895 }, { "10001": "Sales", "10002": 10, "10003": "Tn97A7q0XVDq", "30001": "2022", "HqlYadRdHJ5c": "Furn", "Tn97A7q0XVDq": 10, "7ti8XuX4kcY1": "2022", "dataKey": 0.8472336020406157 }, { "10001": "Sales", "10002": 50, "10003": "Tn97A7q0XVDq", "30001": "2023", "HqlYadRdHJ5c": "Art", "Tn97A7q0XVDq": 50, "7ti8XuX4kcY1": "2023", "dataKey": 0.33549542861697224 }, { "10001": "Sales", "10002": 30, "10003": "Tn97A7q0XVDq", "30001": "2022", "HqlYadRdHJ5c": "Art", "Tn97A7q0XVDq": 30, "7ti8XuX4kcY1": "2022", "dataKey": 0.906910824204276 } ], "fields": { "10001": { "alias": "指标名称" }, "10002": { "alias": "指标值" }, "30001": { "alias": "图例项", "domain": [ "2023", "2022" ], "sortIndex": 0, "lockStatisticsByDomain": true }, "HqlYadRdHJ5c": { "alias": "Product", "domain": [ "Labels", "Labels", "Tables", "Tables", "Storage", "Storage", "Furn", "Furn", "Art", "Art" ], "sortIndex": 0, "lockStatisticsByDomain": true }, "7ti8XuX4kcY1": { "alias": "Year" }, "Tn97A7q0XVDq": { "alias": "Sales" } } } ], "stackInverse": true, "axes": [ { "type": "band", "tick": { "style": { "strokeOpacity": 0.2 }, "visible": false }, "grid": { "visible": false, "style": { "zIndex": 150, "stroke": "#FFFFFF", "lineWidth": 1, "lineDash": [] } }, "orient": "bottom", "visible": true, "domainLine": { "visible": false, "style": { "lineWidth": 1, "stroke": "#d5d7e2" } }, "title": { "visible": false, "space": 5, "text": "", "style": { "fontSize": 12, "fill": "rgba(255,255,255,0.5)", "fontFamily": "D-DIN", "fontWeight": "normal" } }, "maxHeight": null, "autoIndent": false, "sampling": false, "zIndex": 200, "label": { "visible": true, "space": 4, "style": { "fontSize": 12, "fill": "rgba(255,255,255,0.65)", "angle": 0, "fontFamily": "D-DIN", "fontWeight": "normal", "direction": "horizontal", "maxLineWidth": 174 }, "autoHide": true, "autoHideMethod": "greedy", "flush": true, "lastVisible": true, "autoHideSeparation": 4 }, "hover": true, "background": { "visible": true, "state": { "hover": { "fillOpacity": 0.08, "fill": "#141414" }, "hover_reverse": { "fillOpacity": 0.08, "fill": "#141414" } } }, "paddingInner": 0.18, "paddingOuter": 0.18, "ticks": true }, { "type": "linear", "tick": { "size": 4, "visible": true, "tickMode": "d3" }, "niceType": "rough", "zIndex": 200, "grid": { "visible": true }, "orient": "left", "visible": true, "domainLine": { "visible": false, "style": { "lineWidth": 1, "stroke": "#d5d7e2" } }, "title": { "visible": false, "text": "", "space": 8, "style": { "fontSize": 12, "fill": "rgba(255,255,255,0.5)", "fontFamily": "D-DIN", "fontWeight": "normal" } }, "autoIndent": false, "sampling": false, "label": { "visible": true, "space": 6, "flush": true, "padding": 0, "style": { "fontSize": 12, "maxLineWidth": 174, "fill": "rgba(255,255,255,0.65)", "angle": 0, "fontFamily": "D-DIN", "fontWeight": "normal", "dy": -1, "direction": "horizontal" }, "autoHide": true, "autoHideMethod": "greedy", "autoHideSeparation": 4, "rotateAngle": [ null ], "labelOverlap": "custom", "tighten": false }, "background": { "visible": true, "state": { "hover": { "fillOpacity": 0.08, "fill": "#141414" }, "hover_reverse": { "fillOpacity": 0.08, "fill": "#141414" } } }, "innerOffset": { "top": 0 }, "zero": true, "nice": true, "paddingInner": 0.18, "paddingOuter": 0.18, "maxWidth": 180, "ticks": true }, { "type": "linear", "tick": { "size": 4, "visible": true, "tickMode": "d3" }, "niceType": "rough", "zIndex": 200, "grid": { "visible": false }, "orient": "right", "visible": true, "domainLine": { "visible": false }, "title": { "visible": false }, "autoIndent": false, "sampling": false, "label": { "visible": true, "space": 6, "flush": true, "padding": 0, "style": { "visible": false, "fontSize": 12, "maxLineWidth": 174, "fill": "rgba(255,255,255,0.65)", "angle": 0, "fontFamily": "D-DIN", "fontWeight": "normal", "dy": -1, "direction": "horizontal" }, "autoHide": true, "autoHideMethod": "greedy", "autoHideSeparation": 4, "rotateAngle": [ null ], "labelOverlap": "custom", "tighten": false }, "background": { "visible": true, "state": { "hover": { "fillOpacity": 0.08, "fill": "#141414" }, "hover_reverse": { "fillOpacity": 0.08, "fill": "#141414" } } }, "innerOffset": { "top": 0 }, "zero": true, "nice": true, "paddingInner": 0.18, "paddingOuter": 0.18, "maxWidth": 180, "ticks": true } ], "color": { "field": "30001", "type": "ordinal", "range": [ "rgb(0,110,255)", "rgb(0,229,229)" ], "specified": {} }, "colorGradient": { "type": "linear", "x0": { "field": "30001", "type": "ordinal", "range": [ 0, 0 ] }, "y0": { "field": "30001", "type": "ordinal", "range": [ 1, 1 ] }, "x1": { "field": "30001", "type": "ordinal", "range": [ 0.00001, 0.00001 ] }, "y1": { "field": "30001", "type": "ordinal", "range": [ 0, 0 ] }, "stops": [ { "offset": 0, "color": { "field": "30001", "type": "ordinal", "range": [ "rgba(0,110,255,0.2)", "rgba(0,229,229,0.2)" ] } }, { "offset": 1, "color": { "field": "30001", "type": "ordinal", "range": [ "rgb(0,110,255)", "rgb(0,229,229)" ] } } ] }, "legends": [ { "type": "discrete", "visible": true, "id": "legend-discrete", "orient": "top", "position": "end", "layoutType": "normal", "maxRow": 1, "title": { "textStyle": { "fontSize": 12, "fill": "rgba(255,255,255,0.45)" } }, "layoutLevel": 70, "item": { "focus": false, "focusIconStyle": { "size": 14 }, "maxWidth": 400, "spaceRow": 0, "spaceCol": 0, "padding": { "left": 10, "right": 0, "top": 0, "bottom": 5 }, "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": "square", "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": "end", "padding": { "left": 10, "right": 0, "top": 0, "bottom": 12 } } ], "label": { "visible": false, "offset": 3, "overlap": { "hideOnHit": true, "avoidBaseMark": false, "strategy": [ { "type": "position", "position": [] } ], "clampForce": true }, "style": { "fontSize": 10, "fontFamily": "D-DIN", "fontWeight": "normal", "zIndex": 400, "lineHeight": "100%", "fill": "rgba(255,255,255,1)", "strokeOpacity": 0 }, "position": "outside", "smartInvert": false, "fontWeight": "normal" }, "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 } }, "hover": { "enable": true }, "select": { "enable": true }, "bar": { "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 } }, "style": { "cornerRadius": 0, "fill": { "gradient": "linear", "x0": 0, "y0": 1, "stops": [ { "offset": 0 }, { "offset": 1 } ] }, "lineWidth": 2, "stroke": { "gradient": "linear", "x0": 0, "y0": 1, "stops": [ { "offset": 0 }, { "offset": 1 } ] } } }, "region": [ { "clip": true } ], "background": "rgba(255, 255, 255, 0)", "animation": true, "crosshair": { "xField": { "visible": true, "line": { "type": "rect", "style": { "fillOpacity": 1, "fill": "rgba(80,156,255,0.1)" } } }, "gridZIndex": 100, "yField": { "line": { "style": { "fillOpacity": 1, "fill": "rgba(80,156,255,0.1)" } }, "visible": false } }, "morph": { "enable": false }, "fillOpacity": { "fillOpacity": 1 }, "axesPadding": true, "plotLayout": { "clip": false }, "scales": [ { "id": "gradientFillStop0", "type": "ordinal", "range": [ "rgba(0,110,255,0.2)", "rgba(0,229,229,0.2)", "rgba(46,85,234,0.2)", "rgba(184,231,254,0.2)", "rgba(0,214,137,0.2)", "rgba(183,249,245,0.2)", "rgba(251,204,113,0.2)", "rgba(244,110,80,0.2)" ], "domain": [ { "dataId": "data", "fields": [ "30001" ] } ] }, { "id": "gradientFillStop1", "type": "ordinal", "range": [ "rgb(0,110,255)", "rgb(0,229,229)", "rgb(46,85,234)", "rgb(184,231,254)", "rgb(0,214,137)", "rgb(183,249,245)", "rgb(251,204,113)", "rgb(244,110,80)" ], "domain": [ { "dataId": "data", "fields": [ "30001" ] } ] }, { "id": "gradientStrokeStop0", "type": "ordinal", "range": [ "rgba(51, 139, 255, 0.2)", "rgba(25, 255, 255, 0.2)", "rgba(92, 123, 239, 0.2)", "rgba(234, 248, 255, 0.2)", "rgba(10, 255, 167, 0.2)", "rgba(230, 253, 252, 0.2)", "rgba(252, 222, 163, 0.2)", "rgba(247, 150, 128, 0.2)" ], "domain": [ { "dataId": "data", "fields": [ "30001" ] } ] }, { "id": "gradientStrokeStop1", "type": "ordinal", "range": [ "rgba(51, 139, 255, 1)", "rgba(25, 255, 255, 1)", "rgba(92, 123, 239, 1)", "rgba(234, 248, 255, 1)", "rgba(10, 255, 167, 1)", "rgba(230, 253, 252, 1)", "rgba(252, 222, 163, 1)", "rgba(247, 150, 128, 1)" ], "domain": [ { "dataId": "data", "fields": [ "30001" ] } ] }, { "id": "gradientX1", "type": "ordinal", "range": [ 0.00001, 0.00001, 0.00001, 0.00001, 0.00001, 0.00001, 0.00001, 0.00001 ], "domain": [ { "dataId": "data", "fields": [ "30001" ] } ] }, { "id": "gradientY1", "type": "ordinal", "range": [ 0, 0, 0, 0, 0, 0, 0, 0 ], "domain": [ { "dataId": "data", "fields": [ "30001" ] } ] } ], "barWidth": "40%", "barBackground": { "fieldLevel": 0, "visible": false, "interactive": false, "style": { "cornerRadius": 0, "fill": "rgba(255,255,255,1)", "fillOpacity": 0.25 } }, "dataKey": "dataKey", "animationAppear": { "type": "growHeightIn", "oneByOne": false, "options": { "orient": "negative" }, "easing": "quintIn", "duration": 1000 }, "animationNormal": { "bar": [ { "type": "moveIn", "options": { "direction": "x", "orient": "negative", point: (datum, element, opt, ctx) => { const channel = 'x' const size = 'width' const channelAttr = element.getGraphicAttribute(channel) return { [channel]: channelAttr + opt[size] } }, excludeChannels: ['x'] }, "easing": "quintIn", "duration": 500, "delayAfter": 5500, "loop": true, // "controlOptions": { // "immediatelyApply": true // }, }, // { // "loop": true, // "delay": 500, // "delayAfter": 5000, // "duration": 500, // "easing": "quintIn", // custom: StreamLight, // "customParameters": { // "isHorizontal": false, // "attribute": { // "fill": "#CFCFCF", // "opacity": 0.8, // "blur": 5, // "shadowColor": "white", // "height": 20 // } // } // } ] }, "animationEnter": false, "animationUpdate": false, "animationExit": {}, "hash": "080b3b4e5e4289b2df01e521210ea61b", "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' }, { dom: document.getElementById('chart') as HTMLElement, mode: isMobile ? 'mobile-browser' : 'desktop-browser' }); console.time('renderTime'); cs.renderAsync().then(() => { // setTimeout(() => { // cs.updateSpec(spec) // }, 1000); }); 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