Closed skie1997 closed 4 months ago
1.10.4
vscreen
const spec = { "type": "bar", "xField": [ "10002" ], "yField": [ "OCxMNY4j86cy", "10001" ], "direction": "horizontal", "sortDataByAxis": true, "seriesField": "30001", "padding": { "left": 6, "right": 6, "top": 6, "bottom": 6 }, "labelLayout": "region", "data": [ { "id": "data", "fields": { "10001": { "alias": "指标名称" }, "10002": { "alias": "指标值" }, "30001": { "alias": "图例项", "sortIndex": 0, "lockStatisticsByDomain": true }, "OCxMNY4j86cy": { "alias": "Product", "sortIndex": 0, "lockStatisticsByDomain": true }, "vGTOlXqnCrc3": { "alias": "Year" }, "XU0wVG43cGL7": { "alias": "Profit" } }, "values": [ { "10001": "Profit", "10002": 44, "10003": "XU0wVG43cGL7", "30001": "2022", "OCxMNY4j86cy": "Labels", "XU0wVG43cGL7": 44, "vGTOlXqnCrc3": "2022" }, { "10001": "Profit", "10002": 20, "10003": "XU0wVG43cGL7", "30001": "2022", "OCxMNY4j86cy": "Tables", "XU0wVG43cGL7": 20, "vGTOlXqnCrc3": "2022" }, { "10001": "Profit", "10002": 65, "10003": "XU0wVG43cGL7", "30001": "2022", "OCxMNY4j86cy": "Storage", "XU0wVG43cGL7": 65, "vGTOlXqnCrc3": "2022" }, { "10001": "Profit", "10002": 40, "10003": "XU0wVG43cGL7", "30001": "2022", "OCxMNY4j86cy": "Furn", "XU0wVG43cGL7": 40, "vGTOlXqnCrc3": "2022" }, { "10001": "Profit", "10002": 35, "10003": "XU0wVG43cGL7", "30001": "2022", "OCxMNY4j86cy": "Art", "XU0wVG43cGL7": 35, "vGTOlXqnCrc3": "2022" } ] }, { "id": "C4JRVSaFRhg3", "values": [ { "C4JRVSaFRhg3": "2022" } ] } ], "stackInverse": true, "axes": [ { "type": "band", "tick": { "style": { "strokeOpacity": 0.2 } }, "grid": { "visible": false, "style": { "zIndex": 150, "stroke": "#FFFFFF", "lineWidth": 1, "lineDash": [] } }, "orient": "left", "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": 8, "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.13, "paddingOuter": 0.13, "ticks": true, "maxWidth": 180 }, { "type": "linear", "tick": { "size": 4, "visible": true }, "niceType": "rough", "zIndex": 200, "grid": { "visible": true }, "orient": "bottom", "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": 4, "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.13, "paddingOuter": 0.13, "ticks": true }, { "type": "linear", "tick": { "size": 4, "visible": true }, "niceType": "rough", "zIndex": 200, "grid": { "visible": false }, "orient": "top", "visible": true, "domainLine": { "visible": false }, "title": { "visible": false }, "autoIndent": false, "sampling": false, "label": { "visible": true, "space": 4, "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.13, "paddingOuter": 0.13, "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": [ 1, 1 ] }, "y1": { "field": "30001", "type": "ordinal", "range": [ 1, 1 ] }, "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": true, "focusIconStyle": { "size": 14 }, "maxWidth": 400, "spaceRow": 0, "spaceCol": 0, "padding": { "left": 10, "right": -10, "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": 12, "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(0, 0, 0, 1)", "animation": false, "crosshair": { "yField": { "visible": true, "line": { "type": "rect", "style": { "fillOpacity": 1, "fill": "rgba(80,156,255,0.1)" } } }, "gridZIndex": 100, "xField": { "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": [ 1, 1, 1, 1, 1, 1, 1, 1 ], "domain": [ { "dataId": "data", "fields": [ "30001" ] } ] }, { "id": "gradientY1", "type": "ordinal", "range": [ 1, 1, 1, 1, 1, 1, 1, 1 ], "domain": [ { "dataId": "data", "fields": [ "30001" ] } ] } ], "barWidth": "60%", "barBackground": { "fieldLevel": 1, "visible": false, "interactive": false, "style": { "cornerRadius": 0, "fill": "rgba(255,255,255,1)", "fillOpacity": 0.25 } }, "animationAppear": { "bar": { "type": "growWidthIn", "oneByOne": false, "duration": 1000, "delayAfter": 4000, "loop": false } }, "animationEnter": { "bar": [ { "type": "update", "options": { "excludeChannels": [ "y" ] }, "easing": "linear", "duration": 3000 }, { "channel": [ "y" ], "easing": "circInOut", "duration": 600 } ] }, "animationUpdate": { "bar": [ { "type": "update", "options": { "excludeChannels": [ "y" ] }, "easing": "linear", "duration": 3000 }, { "channel": [ "y" ], "easing": "circInOut", "duration": 600 } ], "axis": { "duration": 600, "easing": "circInOut" } }, "animationExit": { "bar": [ { "type": "fadeOut", "duration": 600 } ] }, "animationDisappear": { "bar": { "type": "fadeOut", "duration": 600 } }, "customMark": [ { "type": "text", "dataId": "C4JRVSaFRhg3", "style": { "fontFamily": "D-DIN", "fontSize": 100, "fontWeight": "normal", "fill": "rgba(255,255,255,0.32)", "textAlign": "right", "textBaseline": "bottom", "dispatchDx": 0, "dispatchDy": 0 } } ], "player": { "specs": [ { "data": [ { "id": "data", "fields": { "10001": { "alias": "指标名称" }, "10002": { "alias": "指标值" }, "30001": { "alias": "图例项", "sortIndex": 0, "lockStatisticsByDomain": true }, "OCxMNY4j86cy": { "alias": "Product", "sortIndex": 0, "lockStatisticsByDomain": true }, "vGTOlXqnCrc3": { "alias": "Year" }, "XU0wVG43cGL7": { "alias": "Profit" } }, "values": [ { "10001": "Profit", "10002": 44, "10003": "XU0wVG43cGL7", "30001": "2022", "OCxMNY4j86cy": "Labels", "XU0wVG43cGL7": 44, "vGTOlXqnCrc3": "2022" }, { "10001": "Profit", "10002": 20, "10003": "XU0wVG43cGL7", "30001": "2022", "OCxMNY4j86cy": "Tables", "XU0wVG43cGL7": 20, "vGTOlXqnCrc3": "2022" }, { "10001": "Profit", "10002": 65, "10003": "XU0wVG43cGL7", "30001": "2022", "OCxMNY4j86cy": "Storage", "XU0wVG43cGL7": 65, "vGTOlXqnCrc3": "2022" }, { "10001": "Profit", "10002": 40, "10003": "XU0wVG43cGL7", "30001": "2022", "OCxMNY4j86cy": "Furn", "XU0wVG43cGL7": 40, "vGTOlXqnCrc3": "2022" }, { "10001": "Profit", "10002": 35, "10003": "XU0wVG43cGL7", "30001": "2022", "OCxMNY4j86cy": "Art", "XU0wVG43cGL7": 35, "vGTOlXqnCrc3": "2022" } ] }, { "id": "C4JRVSaFRhg3", "values": [ { "C4JRVSaFRhg3": "2022" } ] } ] }, { "data": [ { "id": "data", "fields": { "10001": { "alias": "指标名称" }, "10002": { "alias": "指标值" }, "30001": { "alias": "图例项", "sortIndex": 0, "lockStatisticsByDomain": true }, "OCxMNY4j86cy": { "alias": "Product", "sortIndex": 0, "lockStatisticsByDomain": true }, "vGTOlXqnCrc3": { "alias": "Year" }, "XU0wVG43cGL7": { "alias": "Profit" } }, "values": [ { "10001": "Profit", "10002": 20, "10003": "XU0wVG43cGL7", "30001": "2023", "OCxMNY4j86cy": "Labels", "XU0wVG43cGL7": 20, "vGTOlXqnCrc3": "2023" }, { "10001": "Profit", "10002": 15, "10003": "XU0wVG43cGL7", "30001": "2023", "OCxMNY4j86cy": "Tables", "XU0wVG43cGL7": 15, "vGTOlXqnCrc3": "2023" }, { "10001": "Profit", "10002": 50, "10003": "XU0wVG43cGL7", "30001": "2023", "OCxMNY4j86cy": "Storage", "XU0wVG43cGL7": 50, "vGTOlXqnCrc3": "2023" }, { "10001": "Profit", "10002": 15, "10003": "XU0wVG43cGL7", "30001": "2023", "OCxMNY4j86cy": "Furn", "XU0wVG43cGL7": 15, "vGTOlXqnCrc3": "2023" }, { "10001": "Profit", "10002": 57, "10003": "XU0wVG43cGL7", "30001": "2023", "OCxMNY4j86cy": "Art", "XU0wVG43cGL7": 57, "vGTOlXqnCrc3": "2023" } ] }, { "id": "C4JRVSaFRhg3", "values": [ { "C4JRVSaFRhg3": "2023" } ] } ] } ], "type": "continuous", "auto": true, "loop": true, "interval": 3000, "dx": 0, "dy": 0, "position": "end", "orient": "top", "slider": { "visible": false }, "controller": { "backward": { "style": { "size": 12, "fill": "rgba(255,255,255,1)" } }, "forward": { "style": { "size": 12, "fill": "rgba(255,255,255,1)" } }, "start": { "style": { "size": 12, "fill": "rgba(255,255,255,1)" }, "order": 1, "position": "end" }, "pause": { "style": { "size": 12, "fill": "rgba(255,255,255,1)" }, "order": 1, "position": "end" } } }, "hash": "10e7c3b69753b4c6f62d6aefc3f2dbb0" } const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); // Just for the convenience of console debugging, DO NOT COPY! window['vchart'] = vchart;
player can be clicked to stop animation
- OS: - Browser: - Framework:
No response
it had been fixed in version 1.10.5+
Version
1.10.4
Link to Minimal Reproduction
vscreen
Steps to Reproduce
Current Behavior
Expected Behavior
player can be clicked to stop animation
Environment
Any additional comments?
No response