VisActor / VChart

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

[Bug] pie not draw when animation is false #2851

Closed skie1997 closed 3 months ago

skie1997 commented 3 months ago

Version

1.11.6-alpha.1

Link to Minimal Reproduction

vscreen

Steps to Reproduce

  const spec = {
    "type": "pie",
    "categoryField": "vNsVXsBuZbaF",
    "valueField": "UleCx2ZKY06F",
    "seriesField": "vNsVXsBuZbaF",
    "padding": {
      "left": 6,
      "right": 6,
      "top": 6,
      "bottom": 6
    },
    "data": [
      {
        "id": "data",
        "values": [
          {
            "vNsVXsBuZbaF": "河北",
            "UleCx2ZKY06F": 20
          },
          {
            "vNsVXsBuZbaF": "山西",
            "UleCx2ZKY06F": 50
          },
          {
            "vNsVXsBuZbaF": "内蒙古",
            "UleCx2ZKY06F": 40
          },
          {
            "vNsVXsBuZbaF": "辽宁",
            "UleCx2ZKY06F": 50
          },
          {
            "vNsVXsBuZbaF": "吉林",
            "UleCx2ZKY06F": 35
          }
        ],
        "fields": {
          "vNsVXsBuZbaF": {
            "alias": "Province",
            "sortIndex": 0
          },
          "UleCx2ZKY06F": {
            "alias": "Sales"
          }
        }
      }
    ],
    "outerRadius": 0.75,
    "color": {
      "field": "vNsVXsBuZbaF",
      "type": "ordinal",
      "range": [
        "#006EFF",
        "#00E5E5",
        "#2E55EA",
        "#B8E7FE",
        "#00D689"
      ],
      "specified": {},
      "domain": [
        "河北",
        "山西",
        "内蒙古",
        "辽宁",
        "吉林"
      ]
    },
    "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"
    },
    "legends": [
      {
        "type": "discrete",
        "visible": true,
        "id": "legend-discrete",
        "orient": "bottom",
        "position": "start",
        "layoutType": "normal",
        "maxRow": 1,
        "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
    },
    "pie": {
      "state": {
        "hover": {
          "cursor": "pointer",
          "fillOpacity": 0.8,
          "stroke": "#58595B",
          "lineWidth": 1,
          "zIndex": 500,
          "outerRadius": 0.8
        },
        "selected": {
          "cursor": "pointer",
          "fillOpacity": 1,
          "stroke": "#58595B",
          "lineWidth": 1,
          "outerRadius": 0.8
        },
        "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
      }
    },
    "rose": {},
    "region": [
      {
        "clip": true
      }
    ],
    "background": "rgba(0, 0, 0, 1)",
    "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
      }
    },
    "morph": {
      "enable": false
    },
    "axesPadding": true,
    "plotLayout": {
      "clip": false
    },
    "animationAppear": {
      pie: {
        type: 'scaleIn'
      }
    },
    "animationNormal": {
      "pie": [
        {
          "channel": {
            x: {
              from: (...p) => {
                return p[1].graphicItem.attribute.x
              },
              to: (...p) => {
                const angle = (p[1].graphicItem.attribute.startAngle + p[1].graphicItem.attribute.endAngle) / 2
                return p[1].graphicItem.attribute.x + 10 * Math.cos(angle)
              }
            },
            y: {
              from: (...p) => {
                return p[1].graphicItem.attribute.y
              },
              to: (...p) => {
                const angle = (p[1].graphicItem.attribute.startAngle + p[1].graphicItem.attribute.endAngle) / 2
                return p[1].graphicItem.attribute.y + 10 * Math.sin(angle)
              }
            }
          },
          "oneByOne": 1000,
          "duration": 500,
          "loop": true,
          "easing": "quintIn",
          "delayAfter": 5500,
          "controlOptions": {
            "immediatelyApply": false
          }
        },
        {
          "channel": {
            x: {
              from: (...p) => {
                const angle = (p[1].graphicItem.attribute.startAngle + p[1].graphicItem.attribute.endAngle) / 2
                return p[1].graphicItem.attribute.x + 10 * Math.cos(angle)
              },
              to: (...p) => {
                return p[1].graphicItem.attribute.x
              }
            },
            y: {
              from: (...p) => {
                const angle = (p[1].graphicItem.attribute.startAngle + p[1].graphicItem.attribute.endAngle) / 2
                return p[1].graphicItem.attribute.y + 10 * Math.sin(angle)
              },
              to: (...p) => {
                return p[1].graphicItem.attribute.y
              }

            }
          },
          "oneByOne": 1000,
          "duration": 500,
          "easing": "quintIn",
          "delay": 500,
          "delayAfter": 5000,
          "loop": true,
          "controlOptions": {
            "immediatelyApply": false
          }
        }
      ],
      "rose": [
        {
          "channel": {
            "x": {},
            "y": {}
          },
          "oneByOne": true,
          "duration": 500,
          "loop": true,
          "easing": "quintIn",
          "delayAfter": 5500,
          "controlOptions": {
            "immediatelyApply": false
          }
        },
        {
          "channel": {
            "x": {},
            "y": {}
          },
          "oneByOne": true,
          "duration": 500,
          "easing": "quintIn",
          "delay": 500,
          "delayAfter": 5000,
          "loop": true,
          "controlOptions": {
            "immediatelyApply": false
          }
        }
      ]
    },
    "animationEnter": false,
    "animationUpdate": false,
    "animationExit": {
      "pie": {},
      "rose": {}
    },
    "hash": "656cc9269e2ea5b09ada369e49c4b01f",
    "width": 400,
    "height": 225
  }

const vchart = new VChart({
    type: 'pie',
    data: [{
      values: []
    }],
    background: 'black'
  }, { dom: CONTAINER_ID });
vchart.renderSync();
vchart.updateSpec(spec)

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Current Behavior

在分支fix/updateSpec-dose-not-run-update-animation复现:
image

原因: updateSpec时走到reuse逻辑 image

Expected Behavior

image

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response