Install

npm install @zym-com/countup

or

yarn add @zym-com/countup

Basic Usage

import Countup from "@zym-com/countup";
import "@zym-com/countup/dist/style.css";

function App() {
const options = {
    "configuration": {
        "duration": 2,
        "delay": 1,
        "LayoutArrange": "column",
        "Alignment": "flex-start",
        "timedRenderingTime": 10,
        "zeroRounding": false,
        "baseNumberdecimal": 0,
        "baseStyleBoxWselect": "shishiyin",
        "baseStyleBoxWidthValue": 300,
        "baseNumberWH": {
            "w": 20,
            "h": 50
        },
        "colorSelect": "solidColor",
        "solidColor": "rgba(255,255,255,1)",
        "anamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "textStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 30,
            "fontWeight": "bold",
            "fontStyle": "normal"
        },
        "baseNumberMargin": {
            "t": 0,
            "r": 5,
            "b": 0,
            "l": 5
        },
        "bgColorSelect": "solidBgColor",
        "solidBgColor": "rgba(255,255,255,0)",
        "image": "",
        "imageSize": "cover",
        "borderRadiusName": 0,
        "borderStyle": "solid",
        "borderWidthName": 2,
        "borderColor": "rgba(0,0,0,1)",
        "splitDigit": 3,
        "separatorStr": "，",
        "separatorWH": {
            "w": 5,
            "h": 0
        },
        "separatorTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 20,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "bold",
            "fontStyle": "normal"
        },
        "separatorMargin": {
            "t": 0,
            "r": 0,
            "b": 0,
            "l": 0
        },
        "dividebgColorSelect": "solidBgColor",
        "dividesolidBgColor": "rgba(255,255,255,1)",
        "divideanamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "divideimage": "",
        "divideimageSize": "cover",
        "divideborderRadiusName": 0,
        "shadow": {
            "shadowOffsetX": 0,
            "shadowOffsetY": 0,
            "shadowBlur": 10,
            "shadowColor": "rgba(19,128,255,1)"
        },
        "titleShow": true,
        "titleTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 20,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "bold",
            "letterSpacing": 0,
            "lineHeight": 30,
            "fontStyle": "normal"
        },
        "titleMargin": {
            "t": 0,
            "r": 0,
            "b": 0,
            "l": 0
        },
        "titleshadow": {
            "shadowOffsetX": 0,
            "shadowOffsetY": 0,
            "shadowBlur": 10,
            "shadowColor": "rgba(255,120,120,1)"
        },
        "prefixType": "text",
        "prefixMargin": {
            "t": 0,
            "r": 0,
            "b": 0,
            "l": 0
        },
        "prefiximage": "",
        "prefixWH": {
            "w": 25,
            "h": 25
        },
        "prefixborderRadius": 0,
        "prefixText": "¥",
        "prefixTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 20,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "bold",
            "letterSpacing": 0,
            "lineHeight": 30,
            "fontStyle": "normal"
        },
        "suffixType": "text",
        "suffixMargin": {
            "t": 0,
            "r": 0,
            "b": 0,
            "l": 0
        },
        "suffiximage": "",
        "suffixWH": {
            "w": 25,
            "h": 25
        },
        "suffixborderRadius": 0,
        "suffixText": "/ 单位",
        "suffixTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 15,
            "color": "rgba(15,146,255,1)",
            "fontWeight": "bold",
            "letterSpacing": 0,
            "lineHeight": 30,
            "fontStyle": "normal"
        },
        "timedRendering": false,
        "backgroundStyleChild": false,
        "borderStyleChild": false,
        "separatorStyle": true,
        "textShadowChild": true,
        "dividebgStyleChild": false,
        "titleShadowChild": false,
        "prefixStyle": false,
        "suffixStyle": true
    },
    "base": {
        "width": 320,
        "height": 100
    },
    "dataSource": [
        {
            "name": "标题",
            "value": "123456789"
        }
    ],
   bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}

 return (
    <>
      <Countup {...options} />
    </>
  );
}