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
914 stars 62 forks source link

[Bug] bar highlight animation not render as expected #2881

Closed skie1997 closed 2 months ago

skie1997 commented 2 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';

const run = () => {
  const markLineAttr = {
    // animation: false,
    animationEnter: {
      type: 'clipIn',
      duration: 1000
    },
    animationUpdate: {
      type: 'clipIn',
      duration: 1000,
      delay: 100
    },
    endSymbol: {
      refX: -4,
      style: {
        size: 8
      }
    },
    line: {
      style: {
        lineDash: [0]
      }
    },
    area: {
      style: {
        fill: 'red',
        fillOpacity: 1
      },
      state: {
        hover: {
          fill: 'blue'
        }
      }
    }
  };
  const data = {
    id: '0',
    values: [
      {
        type: 'retirement',
        origin: 'France',
        age: 60
      },
      {
        type: 'retirement',
        origin: 'Luxembourg',
        age: 58
      },
      {
        type: 'retirement',
        origin: 'Belgium',
        age: 60
      },
      {
        type: 'retirement',
        origin: 'Spain',
        age: 62
      },
      {
        type: 'retirement',
        origin: 'Greece',
        age: 61
      },
      {
        type: 'retirement',
        origin: 'Italy',
        age: 62
      },
      {
        type: 'retirement',
        origin: 'Austria',
        age: 62
      },
      {
        type: 'retirement',
        origin: 'Slovakia',
        age: 59
      },
      {
        type: 'retirement',
        origin: 'Turkey',
        age: 61
      },
      {
        type: 'retirement',
        origin: 'UK',
        age: 62
      },
      {
        type: 'retirement',
        origin: 'Australia',
        age: 63
      },
      {
        type: 'retirement',
        origin: 'Ireland',
        age: 63
      },
      {
        type: 'retirement',
        origin: 'Finland',
        age: 63
      },
      {
        type: 'retirement',
        origin: 'Netherlands',
        age: 64
      },
      {
        type: 'retirement',
        origin: 'Germany',
        age: 63
      },
      {
        type: 'retirement',
        origin: 'Canada',
        age: 65
      },
      {
        type: 'retirement',
        origin: 'Slovenia',
        age: 62
      },
      {
        type: 'retirement',
        origin: 'Switzerland',
        age: 65
      },
      {
        type: 'retirement',
        origin: 'Denmark',
        age: 64
      },
      {
        type: 'retirement',
        origin: 'Poland',
        age: 61
      },
      {
        type: 'retirement',
        origin: 'Norway',
        age: 65
      },
      {
        type: 'retirement',
        origin: 'Israel',
        age: 66
      },
      {
        type: 'healthy expectancy',
        origin: 'France',
        age: 78
      },
      {
        type: 'healthy expectancy',
        origin: 'Luxembourg',
        age: 77
      },
      {
        type: 'healthy expectancy',
        origin: 'Belgium',
        age: 77
      },
      {
        type: 'healthy expectancy',
        origin: 'Spain',
        age: 78
      },
      {
        type: 'healthy expectancy',
        origin: 'Greece',
        age: 77
      },
      {
        type: 'healthy expectancy',
        origin: 'Italy',
        age: 78
      },
      {
        type: 'healthy expectancy',
        origin: 'Austria',
        age: 78
      },
      {
        type: 'healthy expectancy',
        origin: 'Slovakia',
        age: 75
      },
      {
        type: 'healthy expectancy',
        origin: 'Turkey',
        age: 76
      },
      {
        type: 'healthy expectancy',
        origin: 'UK',
        age: 77
      },
      {
        type: 'healthy expectancy',
        origin: 'Australia',
        age: 77
      },
      {
        type: 'healthy expectancy',
        origin: 'Ireland',
        age: 77
      },
      {
        type: 'healthy expectancy',
        origin: 'Finland',
        age: 77
      },
      {
        type: 'healthy expectancy',
        origin: 'Netherlands',
        age: 77
      },
      {
        type: 'healthy expectancy',
        origin: 'Germany',
        age: 76
      },
      {
        type: 'healthy expectancy',
        origin: 'Canada',
        age: 77
      },
      {
        type: 'healthy expectancy',
        origin: 'Slovenia',
        age: 76
      },
      {
        type: 'healthy expectancy',
        origin: 'Switzerland',
        age: 77
      },
      {
        type: 'healthy expectancy',
        origin: 'Denmark',
        age: 76
      },
      {
        type: 'healthy expectancy',
        origin: 'Poland',
        age: 75
      },
      {
        type: 'healthy expectancy',
        origin: 'Norway',
        age: 77
      },
      {
        type: 'healthy expectancy',
        origin: 'Israel',
        age: 78
      },
      {
        type: 'regular expectancy',
        origin: 'France',
        age: 83
      },
      {
        type: 'regular expectancy',
        origin: 'Luxembourg',
        age: 83
      },
      {
        type: 'regular expectancy',
        origin: 'Belgium',
        age: 83
      },
      {
        type: 'regular expectancy',
        origin: 'Spain',
        age: 84
      },
      {
        type: 'regular expectancy',
        origin: 'Greece',
        age: 82
      },
      {
        type: 'regular expectancy',
        origin: 'Italy',
        age: 84
      },
      {
        type: 'regular expectancy',
        origin: 'Austria',
        age: 84
      },
      {
        type: 'regular expectancy',
        origin: 'Slovakia',
        age: 80
      },
      {
        type: 'regular expectancy',
        origin: 'Turkey',
        age: 81
      },
      {
        type: 'regular expectancy',
        origin: 'UK',
        age: 82
      },
      {
        type: 'regular expectancy',
        origin: 'Australia',
        age: 85
      },
      {
        type: 'regular expectancy',
        origin: 'Ireland',
        age: 84
      },
      {
        type: 'regular expectancy',
        origin: 'Finland',
        age: 84
      },
      {
        type: 'regular expectancy',
        origin: 'Netherlands',
        age: 84
      },
      {
        type: 'regular expectancy',
        origin: 'Germany',
        age: 82
      },
      {
        type: 'regular expectancy',
        origin: 'Canada',
        age: 85
      },
      {
        type: 'regular expectancy',
        origin: 'Slovenia',
        age: 82
      },
      {
        type: 'regular expectancy',
        origin: 'Switzerland',
        age: 85
      },
      {
        type: 'regular expectancy',
        origin: 'Denmark',
        age: 82
      },
      {
        type: 'regular expectancy',
        origin: 'Poland',
        age: 80
      },
      {
        type: 'regular expectancy',
        origin: 'Norway',
        age: 84
      },
      {
        type: 'regular expectancy',
        origin: 'Israel',
        age: 84
      }
    ]
  };

  const channel = 'x'
  const size = 'width'
  // 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": 40
  //         },
  //         {
  //           "LTjXll9vYHaK": "山西",
  //           "kdPnyP4TFbo1": 100
  //         },
  //         {
  //           "LTjXll9vYHaK": "内蒙古",
  //           "kdPnyP4TFbo1": 60
  //         },
  //         {
  //           "LTjXll9vYHaK": "辽宁",
  //           "kdPnyP4TFbo1": 90
  //         },
  //         {
  //           "LTjXll9vYHaK": "吉林",
  //           "kdPnyP4TFbo1": 70
  //         }
  //       ],
  //       "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": false,
  //   "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": false,
  //   "animationNormal": false,
  //   "animationEnter": false,
  //   "animationUpdate": false,
  //   "animationExit": false,
  //   "hash": "bef9d6f46f03ab7cc982218dbf9510ea",
  //   "innerRadius": 0.55,
  //   "extensionMark": [
  //     {
  //       "name": "arc_inner_shadow",
  //       "type": "arc",
  //       "dataId": "data",
  //       "style": {
  //         "interactive": false,
  //         "fillOpacity": 0.3,
  //         "visible": true
  //       }
  //     },
  //     {
  //       "name": "arc_inner",
  //       "type": "symbol",
  //       "style": {
  //         "interactive": false,
  //         "fillOpacity": 0,
  //         "lineWidth": 1,
  //         "strokeOpacity": 0.5,
  //         "stroke": {
  //           "gradient": "conical",
  //           "startAngle": 0,
  //           "endAngle": 6.283185307179586,
  //           "stops": [
  //             {
  //               "offset": 0,
  //               "color": "#FFF",
  //               "opacity": 0
  //             },
  //             {
  //               "offset": 1,
  //               "color": "#FFF",
  //               "opacity": 1
  //             }
  //           ]
  //         },
  //         "visible": true
  //       }
  //     },
  //     {
  //       "name": "arc_outter",
  //       "type": "symbol",
  //       "style": {
  //         "interactive": false,
  //         "fillOpacity": 0,
  //         "lineWidth": 1,
  //         "strokeOpacity": 0.5,
  //         "stroke": {
  //           "gradient": "conical",
  //           "startAngle": 0,
  //           "endAngle": 6.283185307179586,
  //           "stops": [
  //             {
  //               "offset": 0,
  //               "color": "#FFF",
  //               "opacity": 0
  //             },
  //             {
  //               "offset": 1,
  //               "color": "#FFF",
  //               "opacity": 1
  //             }
  //           ]
  //         },
  //         "visible": true
  //       }
  //     }
  //   ],
  //   "width": 400,
  //   "height": 225
  // }

  const color = 'red'

  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"
          },
          {
            "10001": "Sales",
            "10002": 24,
            "10003": "Tn97A7q0XVDq",
            "30001": "2022",
            "HqlYadRdHJ5c": "Labels",
            "Tn97A7q0XVDq": 24,
            "7ti8XuX4kcY1": "2022"
          },
          {
            "10001": "Sales",
            "10002": 20,
            "10003": "Tn97A7q0XVDq",
            "30001": "2023",
            "HqlYadRdHJ5c": "Tables",
            "Tn97A7q0XVDq": 20,
            "7ti8XuX4kcY1": "2023"
          },
          {
            "10001": "Sales",
            "10002": 10,
            "10003": "Tn97A7q0XVDq",
            "30001": "2022",
            "HqlYadRdHJ5c": "Tables",
            "Tn97A7q0XVDq": 10,
            "7ti8XuX4kcY1": "2022"
          },
          {
            "10001": "Sales",
            "10002": 40,
            "10003": "Tn97A7q0XVDq",
            "30001": "2023",
            "HqlYadRdHJ5c": "Storage",
            "Tn97A7q0XVDq": 40,
            "7ti8XuX4kcY1": "2023"
          },
          {
            "10001": "Sales",
            "10002": 20,
            "10003": "Tn97A7q0XVDq",
            "30001": "2022",
            "HqlYadRdHJ5c": "Storage",
            "Tn97A7q0XVDq": 20,
            "7ti8XuX4kcY1": "2022"
          },
          {
            "10001": "Sales",
            "10002": 10,
            "10003": "Tn97A7q0XVDq",
            "30001": "2023",
            "HqlYadRdHJ5c": "Furn",
            "Tn97A7q0XVDq": 10,
            "7ti8XuX4kcY1": "2023"
          },
          {
            "10001": "Sales",
            "10002": 10,
            "10003": "Tn97A7q0XVDq",
            "30001": "2022",
            "HqlYadRdHJ5c": "Furn",
            "Tn97A7q0XVDq": 10,
            "7ti8XuX4kcY1": "2022"
          },
          {
            "10001": "Sales",
            "10002": 50,
            "10003": "Tn97A7q0XVDq",
            "30001": "2023",
            "HqlYadRdHJ5c": "Art",
            "Tn97A7q0XVDq": 50,
            "7ti8XuX4kcY1": "2023"
          },
          {
            "10001": "Sales",
            "10002": 30,
            "10003": "Tn97A7q0XVDq",
            "30001": "2022",
            "HqlYadRdHJ5c": "Art",
            "Tn97A7q0XVDq": 30,
            "7ti8XuX4kcY1": "2022"
          }
        ],
        "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
      }
    },
    "animationAppear": {
      "bar": {
        "type": "growHeightIn",
        "oneByOne": false,
        "controlOptions": {
          "immediatelyApply": true
        },
        "easing": "quintIn",
        "duration": 1000,
        options: (...args) => {
          // console.log('scale', chartInstance.getChart().getComponentsByType('cartesianAxis-linear')[0]._scale.range()[0])
          return {
            orient: 'negative',
            overall: args[3].vchart.getChart().getComponentsByType('cartesianAxis-linear')[0]._scale.range()[0]  // 解决堆叠图分开grow的问题
          }
        },
      }
    },
    "animationNormal": {
      "bar": [
        {
          "channel": {
            "fill": {
              from: (...p) => {
                return p[1].graphicItem.attribute.fill
              },
              to: (...p) => {
                return p[1].graphicItem.attribute.fill
              }
            }
          },
          "delay": 5000,
          "duration": 125,
          "delayAfter": 375,
          "loop": true,
          "easing": "quintIn"
        },
        {
          "channel": {
            "fill": {
              from: (...p) => {
                return p[1].graphicItem.attribute.fill
              },
              to: (...p) => {
                return color
              }
            }
          },
          "oneByOne": 500,
          "easing": "quintIn",
          "controlOptions": {
            "immediatelyApply": false
          },
          "delay": 5125,
          "duration": 125,
          "delayAfter": 250,
          "loop": true
        },
        {
          "channel": {
            "fill": {
              from: (...p) => {
                return color
              },
              to: (...p) => {
                return p[1].graphicItem.attribute.fill
              }
            }
          },
          "delay": 5250,
          "duration": 125,
          "delayAfter": 125,
          "loop": true,
          "easing": "quintIn"
        },
        {
          "channel": {
            "fill": {
              from: (...p) => {
                return p[1].graphicItem.attribute.fill
              },
              to: (...p) => {
                return p[1].graphicItem.attribute.fill
              }
            }
          },
          "oneByOne": 500,
          "controlOptions": {
            "immediatelyApply": false
          },
          "delay": 5375,
          "duration": 125,
          "delayAfter": 0,
          "loop": true,
          "easing": "quintIn"
        },
        {
          "loop": true,
          "delay": 500,
          "delayAfter": 5000,
          "duration": 500,
          "easing": "quintIn",
          "customParameters": {
            "isHorizontal": false,
            "attribute": {
              "fill": "#CFCFCF",
              "opacity": 0.8,
              "blur": 5,
              "shadowColor": "white",
              "height": 20
            }
          }
        }
      ]
    },
    "animationEnter": {
      "bar": {
        "type": "growHeightIn",
        "oneByOne": false,
        "controlOptions": {
          "immediatelyApply": true
        },
        "easing": "quintIn",
        "duration": 1000
      }
    },
    "animationUpdate": {
      "bar": {
        "type": "growHeightIn",
        "oneByOne": false,
        "controlOptions": {
          "immediatelyApply": true
        },
        "easing": "quintIn",
        "duration": 1000
      }
    },
    "animationExit": {},
    "hash": "78f1d1ab5f150daa581ab6b4fbdc9a20",
    "width": 400,
    "height": 225
  }

  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()
  cs.updateSpec(spec)
  cs.updateSpec(spec)
  // setTimeout(() => {
  //   cs.updateSpec({
  //     "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": 40
  //           },
  //           {
  //             "LTjXll9vYHaK": "山西",
  //             "kdPnyP4TFbo1": 100
  //           },
  //           {
  //             "LTjXll9vYHaK": "内蒙古",
  //             "kdPnyP4TFbo1": 60
  //           },
  //           {
  //             "LTjXll9vYHaK": "辽宁",
  //             "kdPnyP4TFbo1": 90
  //           },
  //           {
  //             "LTjXll9vYHaK": "吉林",
  //             "kdPnyP4TFbo1": 70
  //           }
  //         ],
  //         "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": "growAngleIn",
  //         "easing": "linear",
  //         "duration": 1000
  //       },
  //       "rose": {
  //         "type": "growAngleIn",
  //         "easing": "linear",
  //         "duration": 1000
  //       },
  //       "preset": "growAngle"
  //     },
  //     "animationNormal": {
  //       "pie": [
  //         {
  //           "channel": {
  //             "outerRadius": {
  //               from: (...p) => {
  //                 console.log('p', p[1].graphicItem.attribute)
  //                 return p[1].graphicItem.attribute.outerRadius
  //               },
  //               to: (...p) => {
  //                 return p[1].graphicItem.attribute.outerRadius + 10
  //               }
  //             }
  //           },
  //           "oneByOne": 1000,
  //           "duration": 500,
  //           "loop": true,
  //           "easing": "linear",
  //           "delayAfter": 8500,
  //           "controlOptions": {
  //             "immediatelyApply": false
  //           }
  //         },
  //         {
  //           "channel": {
  //             "outerRadius": {
  //               from: (...p) => {
  //                 console.log('p', p[1].graphicItem.attribute)
  //                 return p[1].graphicItem.attribute.outerRadius + 10
  //               },
  //               to: (...p) => {
  //                 return p[1].graphicItem.attribute.outerRadius
  //               }
  //             }
  //           },
  //           "oneByOne": 1000,
  //           "duration": 500,
  //           "easing": "linear",
  //           "delay": 500,
  //           "delayAfter": 8000,
  //           "loop": true,
  //           "controlOptions": {
  //             "immediatelyApply": false
  //           }
  //         }
  //       ],
  //       "rose": [
  //         {
  //           "channel": {
  //             "outerRadius": {
  //               from: (...p) => {
  //                 console.log('p', p[1].graphicItem.attribute)
  //                 return p[1].graphicItem.attribute.outerRadius
  //               },
  //               to: (...p) => {
  //                 return p[1].graphicItem.attribute.outerRadius + 10
  //               }
  //             }
  //           },
  //           "oneByOne": 1000,
  //           "duration": 500,
  //           "loop": true,
  //           "easing": "linear",
  //           "delayAfter": 8500,
  //           "controlOptions": {
  //             "immediatelyApply": false
  //           }
  //         },
  //         {
  //           "channel": {
  //             "outerRadius": {
  //               from: (...p) => {
  //                 console.log('p', p[1].graphicItem.attribute)
  //                 return p[1].graphicItem.attribute.outerRadius + 10
  //               },
  //               to: (...p) => {
  //                 return p[1].graphicItem.attribute.outerRadius
  //               }
  //             }
  //           },
  //           "oneByOne": 1000,
  //           "duration": 500,
  //           "easing": "linear",
  //           "delay": 500,
  //           "delayAfter": 8000,
  //           "loop": true,
  //           "controlOptions": {
  //             "immediatelyApply": false
  //           }
  //         }
  //       ]
  //     },
  //     "animationEnter": {
  //       "pie": {
  //         "easing": "linear",
  //         "duration": 1000
  //       },
  //       "rose": {
  //         "easing": "linear",
  //         "duration": 1000
  //       }
  //     },
  //     "animationUpdate": {
  //       "pie": {
  //         "easing": "linear",
  //         "duration": 1000
  //       },
  //       "rose": {
  //         "easing": "linear",
  //         "duration": 1000
  //       }
  //     },
  //     "animationExit": false,
  //     "hash": "39a905ff24885b389c8ec04df07a2edc",
  //     "innerRadius": 0.55,
  //     "extensionMark": [
  //       {
  //         "name": "arc_inner_shadow",
  //         "type": "arc",
  //         "dataId": "data",
  //         "style": {
  //           "interactive": false,
  //           "fillOpacity": 0.3,
  //           "visible": true
  //         }
  //       },
  //       {
  //         "name": "arc_inner",
  //         "type": "symbol",
  //         "style": {
  //           "interactive": false,
  //           "fillOpacity": 0,
  //           "lineWidth": 1,
  //           "strokeOpacity": 0.5,
  //           "stroke": {
  //             "gradient": "conical",
  //             "startAngle": 0,
  //             "endAngle": 6.283185307179586,
  //             "stops": [
  //               {
  //                 "offset": 0,
  //                 "color": "#FFF",
  //                 "opacity": 0
  //               },
  //               {
  //                 "offset": 1,
  //                 "color": "#FFF",
  //                 "opacity": 1
  //               }
  //             ]
  //           },
  //           "visible": true
  //         }
  //       },
  //       {
  //         "name": "arc_outter",
  //         "type": "symbol",
  //         "style": {
  //           "interactive": false,
  //           "fillOpacity": 0,
  //           "lineWidth": 1,
  //           "strokeOpacity": 0.5,
  //           "stroke": {
  //             "gradient": "conical",
  //             "startAngle": 0,
  //             "endAngle": 6.283185307179586,
  //             "stops": [
  //               {
  //                 "offset": 0,
  //                 "color": "#FFF",
  //                 "opacity": 0
  //               },
  //               {
  //                 "offset": 1,
  //                 "color": "#FFF",
  //                 "opacity": 1
  //               }
  //             ]
  //           },
  //           "visible": true
  //         }
  //       }
  //     ],
  //     "width": 400,
  //     "height": 225
  //   })
  // }, 3000);

  // setTimeout(() => {
  //   cs.updateSpec({
  //     ...spec,
  //     data: [{
  //       values: [
  //         {
  //           "10001": "Sales",
  //           "10002": 30,
  //           "10003": "Tn97A7q0XVDq",
  //           "30001": "2023",
  //           "HqlYadRdHJ5c": "Labels",
  //           "Tn97A7q0XVDq": 30,
  //           "7ti8XuX4kcY1": "2023",
  //           "dataKey": 0.1943839876822584
  //         },
  //         {
  //           "10001": "Sales",
  //           "10002": 24,
  //           "10003": "Tn97A7q0XVDq",
  //           "30001": "2022",
  //           "HqlYadRdHJ5c": "Labels",
  //           "Tn97A7q0XVDq": 24,
  //           "7ti8XuX4kcY1": "2022",
  //           "dataKey": 0.4744741268239743
  //         }
  //       ]
  //     }]
  //   })
  // }, 2000);

  // setTimeout(() => {
  //   cs.updateSpec({
  //     ...spec,
  //     data: [{
  //       values: [
  //         {
  //           "10001": "Sales",
  //           "10002": 20,
  //           "10003": "Tn97A7q0XVDq",
  //           "30001": "2023",
  //           "HqlYadRdHJ5c": "Tables",
  //           "Tn97A7q0XVDq": 20,
  //           "7ti8XuX4kcY1": "2023",
  //           "dataKey": 0.9235764317484279
  //         },
  //         {
  //           "10001": "Sales",
  //           "10002": 10,
  //           "10003": "Tn97A7q0XVDq",
  //           "30001": "2022",
  //           "HqlYadRdHJ5c": "Tables",
  //           "Tn97A7q0XVDq": 10,
  //           "7ti8XuX4kcY1": "2022",
  //           "dataKey": 0.764191906308026
  //         },
  //       ]
  //     }]
  //   })
  // }, 4000);
  window['vchart'] = cs;
  console.log(cs);
};
run();

Current Behavior

image

Expected Behavior

image

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

skie1997 commented 2 months ago

通过如下配置自行计算timeSlices解决：

    "animationNormal": {
      "bar": [
        {
          "loop": false,
          "controlOptions": {
            "immediatelyApply": false
          },
          "timeSlices": [
            {
              "effects": {
                "channel": {
                  // fill: {
                  //   to: "linear-gradient(0deg, red 0%, blue 100%)",
                  // },
                  // stroke: {
                  //   to: "linear-gradient(0deg, black 0%, blue 100%)"
                  // }
                  "fill": {
                    to: color,
                    from: (...p) => {
                      return p[1].graphicItem.attribute.fill;
                    }
                  } // fillOpacity: {
                  //   to: 0.2
                  // }
                },
                "easing": "linear"
              },
              delay: (datum, element, context, global) => {
                const { count, index } = getGroupInfo(global.vchart, datum)
                console.log('loopDuration', loopDuration, count)
                // initial delay + one by one delay
                return index * loopDuration / count;
              },
              // delayAfter: 6000,
              "duration": (datum, element, context, global) => {
                const { count, index } = getGroupInfo(global.vchart, datum)
                // initial delay + one by one delay
                return loopDuration / count / 2;
              }
            },
            {
              "effects": {
                "channel": {
                  // fillOpacity: {
                  //   from: 0.2,
                  //   to: 1
                  // }
                  "fill": {
                    from: color,
                    to: (...p) => {
                      return p[1].graphicItem.attribute.fill;
                    }
                  }
                },
                "easing": "linear"
              },
              delayAfter: (datum, element, context, global) => {
                const { count, index } = getGroupInfo(global.vchart, datum)
                // rest one by one delay
                return interval + atmoDuration + (count - index - 1) * loopDuration / count;
              },
              "duration": (datum, element, context, global) => {
                const { count, index } = getGroupInfo(global.vchart, datum)
                // initial delay + one by one delay
                return loopDuration / count / 2
              }
            }
          ]
        },
        {
          "loop": false,
          "delay": loopDuration,
          "delayAfter": interval,
          "duration": atmoDuration,
          custom: StreamLight,
          "easing": "quintIn",
          "customParameters": {
            "isHorizontal": false,
            "attribute": {
              "fill": "#CFCFCF",
              "blur": 0,
              "shadowColor": "rgba(0,0,0,0)",
              "height": 20
            }
          }
        }
      ]
    },