search

VisActor / VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
https://www.visactor.io/vchart
MIT License
1k stars 72 forks source link

[Bug] 双向条形图第一个系列loop动画没有正常执行 #2887

Closed skie1997 closed 4 months ago

skie1997 commented 4 months ago

Version

1.11.5

Link to Minimal Reproduction

vscreen

Steps to Reproduce

import { isMobile } from 'react-device-detect';
import { default as VChart } from '../../../../../../src/index';
import { DataSet, DataView, csvParser } from '@visactor/vdataset';
import { StreamLight } from '@visactor/vrender-core';
import { createButton } from '../../../../../util/dom';

const run = () => {
  // import { StreamLight } from '@visactor/vrender-core';
  // 如果你需要使用 `StreamLight` 动画，请从 @visactor/vrender-core 中导出并使用。

  const spec = {
    "type": "common",
    "region": [
      {
        "clip": true,
        "id": "mainRegion"
      },
      {
        "id": "subRegion"
      }
    ],
    "series": [
      {
        "id": "mainSeries",
        "type": "bar",
        "yField": "ur7vPwY7lxha",
        "xField": "10011",
        "seriesField": "30001",
        "direction": "horizontal",
        "regionId": "mainRegion",
        "stack": false,
        "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
        },
        "hover": {
          "enable": true
        },
        "select": {
          "enable": true
        },
        "bar": {
          "state": {
            "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
                }
              ]
            }
          }
        },
        "animation": true,
        "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": true,
            "options": (...args) => {
              console.log('main', args);
              return {
                // "orient": "negative",
                "overall": args[3].vchart.getComponents()[1]._scale.range()[0]
              }
            },
          }
        },
        "animationEnter": {
          "type": "growWidthIn",
          "oneByOne": false,
          "duration": 1000,
          "delayAfter": 4000,
          // "loop": true
        },
        "animationUpdate": {
          "duration": 1000,
          "easing": "linear"
        },
        "dataId": "mainSeriesData",
        "animationExit": {}
      },
      {
        "id": "subSeries",
        "type": "bar",
        "yField": "ur7vPwY7lxha",
        "xField": "10012",
        "seriesField": "30001",
        "direction": "horizontal",
        "regionId": "subRegion",
        "stack": false,
        "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
        },
        "hover": {
          "enable": true
        },
        "select": {
          "enable": true
        },
        "bar": {
          "state": {
            "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
                }
              ]
            }
          }
        },
        "animation": true,
        "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": true,
            "options": (...args) => {
              console.log('sub', args);
              return {
                // "orient": "negative",
                "overall": args[3].vchart.getComponents()[2]._scale.range()[0]
              }
            },
          }
        },
        "animationEnter": {
          "type": "growWidthIn",
          "oneByOne": false,
          "duration": 1000,
          "delayAfter": 4000,
          // "loop": true
        },
        "animationUpdate": {
          "duration": 1000,
          "easing": "linear"
        },
        "dataId": "subSeriesData",
        "animationExit": {}
      }
    ],
    "padding": {
      "left": 6,
      "right": 6,
      "top": 6,
      "bottom": 6
    },
    "labelLayout": "region",
    "layout": {
      "type": "grid",
      "row": 4,
      "col": 4,
      "elements": [
        {
          "modelId": "legend-discrete",
          "col": 0,
          "colSpan": 4,
          "row": 0
        },
        {
          "modelId": "player",
          "col": 0,
          "row": 1,
          "colSpan": 4
        },
        {
          "modelId": "mainRegion",
          "col": 0,
          "row": 2
        },
        {
          "modelId": "dimensionAxis",
          "col": 1,
          "row": 2
        },
        {
          "modelId": "subRegion",
          "col": 3,
          "row": 2
        },
        {
          "modelId": "measureAxisLeft",
          "col": 0,
          "row": 3
        },
        {
          "modelId": "measureAxisRight",
          "col": 3,
          "row": 3
        },
        {
          "modelId": "dimensionAxis2",
          "col": 2,
          "row": 2
        }
      ]
    },
    "data": [
      {
        "id": "mainSeriesData",
        "fields": {
          "10001": {
            "alias": "指标名称"
          },
          "10011": {
            "alias": "指标值(主轴)"
          },
          "10012": {
            "alias": "指标值(次轴)"
          },
          "30001": {
            "alias": "图例项",
            "sortIndex": 0
          },
          "ur7vPwY7lxha": {
            "alias": "Province",
            "sortIndex": 0
          },
          "0b2h60Cd1f86": {
            "alias": "Sales"
          },
          "ubskhJmGe20y": {
            "alias": "Profit"
          }
        },
        "values": [
          {
            "10001": "Sales",
            "10003": "0b2h60Cd1f86",
            "10011": 20,
            "30001": "Sales",
            "ur7vPwY7lxha": "河北",
            "0b2h60Cd1f86": 20
          },
          {
            "10001": "Sales",
            "10003": "0b2h60Cd1f86",
            "10011": 50,
            "30001": "Sales",
            "ur7vPwY7lxha": "山西",
            "0b2h60Cd1f86": 50
          },
          {
            "10001": "Sales",
            "10003": "0b2h60Cd1f86",
            "10011": 40,
            "30001": "Sales",
            "ur7vPwY7lxha": "内蒙古",
            "0b2h60Cd1f86": 40
          },
          {
            "10001": "Sales",
            "10003": "0b2h60Cd1f86",
            "10011": 50,
            "30001": "Sales",
            "ur7vPwY7lxha": "辽宁",
            "0b2h60Cd1f86": 50
          },
          {
            "10001": "Sales",
            "10003": "0b2h60Cd1f86",
            "10011": 35,
            "30001": "Sales",
            "ur7vPwY7lxha": "吉林",
            "0b2h60Cd1f86": 35
          }
        ]
      },
      {
        "id": "Wg6q8hSqo40l",
        "values": [
          {
            "Wg6q8hSqo40l": "2022"
          }
        ]
      },
      {
        "id": "subSeriesData",
        "fields": {
          "10001": {
            "alias": "指标名称"
          },
          "10011": {
            "alias": "指标值(主轴)"
          },
          "10012": {
            "alias": "指标值(次轴)"
          },
          "30001": {
            "alias": "图例项",
            "sortIndex": 0
          },
          "ur7vPwY7lxha": {
            "alias": "Province",
            "sortIndex": 0
          },
          "0b2h60Cd1f86": {
            "alias": "Sales"
          },
          "ubskhJmGe20y": {
            "alias": "Profit"
          }
        },
        "values": [
          {
            "10001": "Profit",
            "10003": "ubskhJmGe20y",
            "10012": 60,
            "30001": "Profit",
            "ubskhJmGe20y": 60,
            "ur7vPwY7lxha": "河北"
          },
          {
            "10001": "Profit",
            "10003": "ubskhJmGe20y",
            "10012": 30,
            "30001": "Profit",
            "ubskhJmGe20y": 30,
            "ur7vPwY7lxha": "山西"
          },
          {
            "10001": "Profit",
            "10003": "ubskhJmGe20y",
            "10012": 50,
            "30001": "Profit",
            "ubskhJmGe20y": 50,
            "ur7vPwY7lxha": "内蒙古"
          },
          {
            "10001": "Profit",
            "10003": "ubskhJmGe20y",
            "10012": 10,
            "30001": "Profit",
            "ubskhJmGe20y": 10,
            "ur7vPwY7lxha": "辽宁"
          },
          {
            "10001": "Profit",
            "10003": "ubskhJmGe20y",
            "10012": 20,
            "30001": "Profit",
            "ubskhJmGe20y": 20,
            "ur7vPwY7lxha": "吉林"
          }
        ]
      },
      {
        "id": "Wg6q8hSqo40l",
        "values": [
          {
            "Wg6q8hSqo40l": "2022"
          }
        ]
      }
    ],
    "axes": [
      {
        "id": "dimensionAxis",
        "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
        },
        "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": 16,
          "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,
          "containerAlign": "center",
          "autoHideSeparation": 4
        },
        "hover": true,
        "background": {
          "visible": true,
          "state": {
            "hover": {
              "fillOpacity": 0.08,
              "fill": "#141414"
            },
            "hover_reverse": {
              "fillOpacity": 0.08,
              "fill": "#141414"
            }
          }
        },
        "paddingInner": 0.35,
        "paddingOuter": 0.2,
        "maxWidth": 190,
        "inverse": true,
        "offsetX": 8,
        "regionId": "mainRegion",
        "seriesId": "mainSeries",
        "ticks": true,
        "bandPadding": 0.22
      },
      {
        "id": "measureAxisLeft",
        "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,
        "regionId": "mainRegion",
        "seriesId": "mainSeries",
        "inverse": true,
        "bandPadding": 0.22,
        "ticks": true
      },
      {
        "id": "measureAxisRight",
        "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
        },
        "background": {
          "visible": true,
          "state": {
            "hover": {
              "fillOpacity": 0.08,
              "fill": "#141414"
            },
            "hover_reverse": {
              "fillOpacity": 0.08,
              "fill": "#141414"
            }
          }
        },
        "innerOffset": {
          "top": 0
        },
        "zero": true,
        "nice": true,
        "regionId": "subRegion",
        "seriesId": "subSeries",
        "bandPadding": 0.22,
        "ticks": true
      },
      {
        "id": "dimensionAxis2",
        "type": "band",
        "tick": {
          "style": {
            "strokeOpacity": 0.2
          }
        },
        "grid": {
          "visible": false,
          "style": {
            "zIndex": 150,
            "stroke": "#FFFFFF",
            "lineWidth": 1,
            "lineDash": []
          }
        },
        "orient": "left",
        "visible": false,
        "domainLine": {
          "visible": false
        },
        "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": 16,
          "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,
          "containerAlign": "center",
          "autoHideSeparation": 4
        },
        "hover": true,
        "background": {
          "visible": true,
          "state": {
            "hover": {
              "fillOpacity": 0.08,
              "fill": "#141414"
            },
            "hover_reverse": {
              "fillOpacity": 0.08,
              "fill": "#141414"
            }
          }
        },
        "paddingInner": 0.35,
        "paddingOuter": 0.2,
        "maxWidth": 190,
        "inverse": true,
        "offsetX": 8,
        "regionId": "subRegion",
        "seriesId": "subSeries",
        "ticks": true,
        "bandPadding": 0.22
      }
    ],
    "seriesField": "30001",
    "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": [
              "rgb(0,110,255)",
              "rgba(0,229,229,0.2)"
            ]
          }
        },
        {
          "offset": 1,
          "color": {
            "field": "30001",
            "type": "ordinal",
            "range": [
              "rgba(0,110,255,0.2)",
              "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
        }
      }
    ],
    "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
      }
    },
    "background": "rgba(255, 255, 255, 0)",
    "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
    },
    "label": {
      "fontWeight": "normal",
      "style": {
        "fontFamily": "D-DIN"
      }
    },
    "axesPadding": true,
    "plotLayout": {
      "clip": false
    },
    "select": {
      "enable": true
    },
    "scales": [
      {
        "id": "gradientFillStop0",
        "type": "ordinal",
        "range": [
          "rgb(0,110,255)",
          "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": [
          "rgba(0,110,255,0.2)",
          "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, 1)",
          "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, 0.2)",
          "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"
            ]
          }
        ]
      }
    ],
    "barBackground": {
      "fieldLevel": 1,
      "visible": true,
      "interactive": false,
      "style": {
        "cornerRadius": 0,
        "fill": "rgba(255,255,255,1)",
        "fillOpacity": 0.25
      }
    },
    "customMark": [
      {
        "type": "text",
        "dataId": "Wg6q8hSqo40l",
        "zIndex": 999,
        "style": {
          "fontFamily": "D-DIN",
          "fontSize": 100,
          "fontWeight": "normal",
          "fill": "rgba(255,255,255,0.32)",
          "textAlign": "right",
          "textBaseline": "bottom",
          "dispatchDx": 0,
          "dispatchDy": 0
        }
      }
    ],
    "player": {
      "id": "player",
      "specs": [
        {
          "data": [
            {
              "id": "mainSeriesData",
              "fields": {
                "10001": {
                  "alias": "指标名称"
                },
                "10011": {
                  "alias": "指标值(主轴)"
                },
                "10012": {
                  "alias": "指标值(次轴)"
                },
                "30001": {
                  "alias": "图例项",
                  "sortIndex": 0
                },
                "ur7vPwY7lxha": {
                  "alias": "Province",
                  "sortIndex": 0
                },
                "0b2h60Cd1f86": {
                  "alias": "Sales"
                },
                "ubskhJmGe20y": {
                  "alias": "Profit"
                }
              },
              "values": [
                {
                  "10001": "Sales",
                  "10003": "0b2h60Cd1f86",
                  "10011": 20,
                  "30001": "Sales",
                  "ur7vPwY7lxha": "河北",
                  "0b2h60Cd1f86": 20
                },
                {
                  "10001": "Sales",
                  "10003": "0b2h60Cd1f86",
                  "10011": 50,
                  "30001": "Sales",
                  "ur7vPwY7lxha": "山西",
                  "0b2h60Cd1f86": 50
                },
                {
                  "10001": "Sales",
                  "10003": "0b2h60Cd1f86",
                  "10011": 40,
                  "30001": "Sales",
                  "ur7vPwY7lxha": "内蒙古",
                  "0b2h60Cd1f86": 40
                },
                {
                  "10001": "Sales",
                  "10003": "0b2h60Cd1f86",
                  "10011": 50,
                  "30001": "Sales",
                  "ur7vPwY7lxha": "辽宁",
                  "0b2h60Cd1f86": 50
                },
                {
                  "10001": "Sales",
                  "10003": "0b2h60Cd1f86",
                  "10011": 35,
                  "30001": "Sales",
                  "ur7vPwY7lxha": "吉林",
                  "0b2h60Cd1f86": 35
                }
              ]
            },
            {
              "id": "Wg6q8hSqo40l",
              "values": [
                {
                  "Wg6q8hSqo40l": "2022"
                }
              ]
            },
            {
              "id": "subSeriesData",
              "fields": {
                "10001": {
                  "alias": "指标名称"
                },
                "10011": {
                  "alias": "指标值(主轴)"
                },
                "10012": {
                  "alias": "指标值(次轴)"
                },
                "30001": {
                  "alias": "图例项",
                  "sortIndex": 0
                },
                "ur7vPwY7lxha": {
                  "alias": "Province",
                  "sortIndex": 0
                },
                "0b2h60Cd1f86": {
                  "alias": "Sales"
                },
                "ubskhJmGe20y": {
                  "alias": "Profit"
                }
              },
              "values": [
                {
                  "10001": "Profit",
                  "10003": "ubskhJmGe20y",
                  "10012": 60,
                  "30001": "Profit",
                  "ubskhJmGe20y": 60,
                  "ur7vPwY7lxha": "河北"
                },
                {
                  "10001": "Profit",
                  "10003": "ubskhJmGe20y",
                  "10012": 30,
                  "30001": "Profit",
                  "ubskhJmGe20y": 30,
                  "ur7vPwY7lxha": "山西"
                },
                {
                  "10001": "Profit",
                  "10003": "ubskhJmGe20y",
                  "10012": 50,
                  "30001": "Profit",
                  "ubskhJmGe20y": 50,
                  "ur7vPwY7lxha": "内蒙古"
                },
                {
                  "10001": "Profit",
                  "10003": "ubskhJmGe20y",
                  "10012": 10,
                  "30001": "Profit",
                  "ubskhJmGe20y": 10,
                  "ur7vPwY7lxha": "辽宁"
                },
                {
                  "10001": "Profit",
                  "10003": "ubskhJmGe20y",
                  "10012": 20,
                  "30001": "Profit",
                  "ubskhJmGe20y": 20,
                  "ur7vPwY7lxha": "吉林"
                }
              ]
            },
            {
              "id": "Wg6q8hSqo40l",
              "values": [
                {
                  "Wg6q8hSqo40l": "2022"
                }
              ]
            }
          ]
        },
        {
          "data": [
            {
              "id": "mainSeriesData",
              "fields": {
                "10001": {
                  "alias": "指标名称"
                },
                "10011": {
                  "alias": "指标值(主轴)"
                },
                "10012": {
                  "alias": "指标值(次轴)"
                },
                "30001": {
                  "alias": "图例项",
                  "sortIndex": 0
                },
                "ur7vPwY7lxha": {
                  "alias": "Province",
                  "sortIndex": 0
                },
                "0b2h60Cd1f86": {
                  "alias": "Sales"
                },
                "ubskhJmGe20y": {
                  "alias": "Profit"
                }
              },
              "values": [
                {
                  "10001": "Sales",
                  "10003": "0b2h60Cd1f86",
                  "10011": 24,
                  "30001": "Sales",
                  "ur7vPwY7lxha": "河北",
                  "0b2h60Cd1f86": 24
                },
                {
                  "10001": "Sales",
                  "10003": "0b2h60Cd1f86",
                  "10011": 0,
                  "30001": "Sales",
                  "ur7vPwY7lxha": "山西",
                  "0b2h60Cd1f86": 0
                },
                {
                  "10001": "Sales",
                  "10003": "0b2h60Cd1f86",
                  "10011": 40,
                  "30001": "Sales",
                  "ur7vPwY7lxha": "内蒙古",
                  "0b2h60Cd1f86": 40
                },
                {
                  "10001": "Sales",
                  "10003": "0b2h60Cd1f86",
                  "10011": 15,
                  "30001": "Sales",
                  "ur7vPwY7lxha": "辽宁",
                  "0b2h60Cd1f86": 15
                },
                {
                  "10001": "Sales",
                  "10003": "0b2h60Cd1f86",
                  "10011": 35,
                  "30001": "Sales",
                  "ur7vPwY7lxha": "吉林",
                  "0b2h60Cd1f86": 35
                }
              ]
            },
            {
              "id": "Wg6q8hSqo40l",
              "values": [
                {
                  "Wg6q8hSqo40l": "2023"
                }
              ]
            },
            {
              "id": "subSeriesData",
              "fields": {
                "10001": {
                  "alias": "指标名称"
                },
                "10011": {
                  "alias": "指标值(主轴)"
                },
                "10012": {
                  "alias": "指标值(次轴)"
                },
                "30001": {
                  "alias": "图例项",
                  "sortIndex": 0
                },
                "ur7vPwY7lxha": {
                  "alias": "Province",
                  "sortIndex": 0
                },
                "0b2h60Cd1f86": {
                  "alias": "Sales"
                },
                "ubskhJmGe20y": {
                  "alias": "Profit"
                }
              },
              "values": [
                {
                  "10001": "Profit",
                  "10003": "ubskhJmGe20y",
                  "10012": 60,
                  "30001": "Profit",
                  "ubskhJmGe20y": 60,
                  "ur7vPwY7lxha": "河北"
                },
                {
                  "10001": "Profit",
                  "10003": "ubskhJmGe20y",
                  "10012": 20,
                  "30001": "Profit",
                  "ubskhJmGe20y": 20,
                  "ur7vPwY7lxha": "山西"
                },
                {
                  "10001": "Profit",
                  "10003": "ubskhJmGe20y",
                  "10012": 50,
                  "30001": "Profit",
                  "ubskhJmGe20y": 50,
                  "ur7vPwY7lxha": "内蒙古"
                },
                {
                  "10001": "Profit",
                  "10003": "ubskhJmGe20y",
                  "10012": 20,
                  "30001": "Profit",
                  "ubskhJmGe20y": 20,
                  "ur7vPwY7lxha": "辽宁"
                },
                {
                  "10001": "Profit",
                  "10003": "ubskhJmGe20y",
                  "10012": 20,
                  "30001": "Profit",
                  "ubskhJmGe20y": 20,
                  "ur7vPwY7lxha": "吉林"
                }
              ]
            },
            {
              "id": "Wg6q8hSqo40l",
              "values": [
                {
                  "Wg6q8hSqo40l": "2023"
                }
              ]
            }
          ]
        }
      ],
      "type": "discrete",
      "auto": true,
      "loop": true,
      "interval": 3000,
      "width": 56,
      "position": "start",
      "orient": "top",
      "slider": {
        "visible": false
      },
      "controller": {
        "backward": {
          "style": {
            "size": 12,
            "fill": "rgba(255,255,255,1)",
            "dx": 0,
            "dy": 0
          }
        },
        "forward": {
          "style": {
            "size": 12,
            "fill": "rgba(255,255,255,1)",
            "dx": 0,
            "dy": 0
          }
        },
        "start": {
          "style": {
            "size": 12,
            "fill": "rgba(255,255,255,1)",
            "dx": 0,
            "dy": 0
          },
          "order": 1,
          "position": "end"
        },
        "pause": {
          "style": {
            "size": 12,
            "fill": "rgba(255,255,255,1)",
            "dx": 0,
            "dy": 0
          },
          "order": 1,
          "position": "end"
        }
      }
    },
    "hash": "893dd8ffefbdb25a53be2d502d81cc48",
    "width": 400,
    "height": 225,
    "animation": false
  }

  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)
  cs.updateSpec(spec)
  createButton('update', () => {
    cs.updateSpec({
      ...spec,
      barWidth: Math.random() * 100 + '%',
    })
  })

  window['vchart'] = cs;
  console.log(cs);
};
run();

Current Behavior

只有右侧loop动画被正常执行，左侧没有正常执行 ps: 双向条形图在大屏中没有升级，所以沿用老配置，appear + loop模拟normal效果，现在表现和之前不一致 20240701172021_rec_

Expected Behavior

左右两侧loop动画都正常执行

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

xile611 commented 4 months ago

通过配置避免了问题

skie1997 commented 4 months ago

通过配置避免了问题 绕过方式 image