@zym-com/progress-twoway

Install

``bash
npm install @zym-com/progress-twoway
`

or

`bash
yarn add @zym-com/progress-twoway
`

Basic Usage

`jsx
import ProgressTwoway from "@zym-com/progress-twoway";
import "@zym-com/progress-twoway/dist/style.css";

function App() {
const options = {
"configuration": {
"barWidthHeight": {
"w": 70,
"h": "18px"
},
"barMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"barPadding": {
"t": 2,
"r": 2,
"b": 2,
"l": 2
},
"proBarAnimation": true,
"proBarAnimationTime": 2,
"bgColorSelect": "solidBgColor",
"solidBgColor": "rgba(9, 40, 67, 0.3)",
"anamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"proBarBgimage": "",
"imageSize": "cover",
"proBarBgTransparency": 1,
"borderStyle": "solid",
"borderWidth": 1,
"borderColor": "rgba(26,246,254,1)",
"borderRidiusLeft": 0,
"borderRidiusRight": 0,
"leftProBarShow": true,
"leftBarBoxWH": {
"w": 100,
"h": 100
},
"leftBarBoxMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"leftBarBoxPadding": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"leftBarHeight": "",
"leftBarColorSelect": "gradientBgColor",
"leftBarSolidBgColor": "rgba(9, 40, 67, 0.3)",
"leftBarAnamorphism": {
"startVal": "rgba(20,34,47,1)",
"endVal": "rgba(0,246,255,1)",
"direction": 90
},
"leftBarBgimage": "",
"leftBarImageSize": "cover",
"leftBarOpacity": 1,
"leftBarborderRidius": 0,
"leftBarborderRidiusLeft": 0,
"leftBarborderRidiusRight": 0,
"leftBarBoxBgColorSelect": "solidBgColor",
"leftBarBoxsolidBgColor": "rgba(9, 40, 67, 0.3)",
"leftBarBoxBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"leftBarBoxBgimage": "",
"leftBarBoximageSize": "cover",
"leftBarBoxBgTransparency": 1,
"leftBarBoxborderStyle": "solid",
"leftBarBoxborderWidth": 1,
"leftBarBoxborderColor": "rgba(26,246,254,1)",
"leftBarBoxborderRidiusLeft": 0,
"leftBarBoxborderRidiusRight": 0,
"leftproBarNodeWH": {
"w": "20px",
"h": "20px"
},
"leftproBarNodePosition": -10,
"leftproBarNodebgColorSelect": "solidBgColor",
"leftproBarNodesolidBgColor": "rgba(0,246,255,1)",
"leftproBarNodeanamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"leftproBarNodeproBarBgimage": "",
"leftproBarNodeimageSize": "cover",
"leftproBarNodeTransparency": 1,
"leftproBarNodeRidius": 50,
"rightProBarShow": true,
"rightBarBoxWH": {
"w": 100,
"h": 100
},
"rightBarBoxMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"rightBarBoxPadding": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"rightBarHeight": "",
"rightBarColorSelect": "gradientBgColor",
"rightBarSolidBgColor": "rgba(9, 40, 67, 0.3)",
"rightBarAnamorphism": {
"startVal": "rgba(13, 31, 44, 0.45)",
"endVal": "rgba(165, 141, 217, 0.9)",
"direction": 90
},
"rightBarBgimage": "",
"rightBarImageSize": "cover",
"rightBarOpacity": 1,
"rightBarborderRidiusLeft": 0,
"rightBarborderRidiusRight": 0,
"rightBarBoxBgColorSelect": "solidBgColor",
"rightBarBoxsolidBgColor": "rgba(9, 40, 67, 0.3)",
"rightBarBoxBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"rightBarBoxBgimage": "",
"rightBarBoximageSize": "cover",
"rightBarBoxBgTransparency": 1,
"rightBarBoxborderStyle": "solid",
"rightBarBoxborderWidth": 1,
"rightBarBoxborderColor": "rgba(26,246,254,1)",
"rightBarBoxborderRidiusLeft": 0,
"rightBarBoxborderRidiusRight": 0,
"rightproBarNodeWH": {
"w": "20px",
"h": "20px"
},
"rightproBarNodePosition": -10,
"rightproBarNodebgColorSelect": "solidBgColor",
"rightproBarNodesolidBgColor": "rgba(165,141,217,1)",
"rightproBarNodeanamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"rightproBarNodeproBarBgimage": "",
"rightproBarNodeimageSize": "cover",
"rightproBarNodeTransparency": 1,
"rightproBarNodeRidius": 50,
"leftShow": true,
"leftWidth": "auto",
"leftLabelAndBarType": "default",
"leftLabelAndBarLayout": "labelT",
"leftLabelPosition": {
"x": "5%",
"y": "50%"
},
"leftLabelTransform": {
"x": "0",
"y": "0"
},
"Leftlayout": "imgL",
"leftDefaultImg": true,
"LeftImage": "",
"LeftImgWidth": {
"w": 12,
"h": 20
},
"LeftLabelImgMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"LeftRidius": 0,
"LeftLabelTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"LeftLabelMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 5
},
"LeftLabelTranslate": {
"x": 0,
"y": 0
},
"LeftLabelValueTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"LeftLabelValueMaigin": {
"t": 0,
"r": 5,
"b": 0,
"l": 5
},
"LeftLabelValueTranslate": {
"x": 0,
"y": 0
},
"LeftLabelPerCent": true,
"LeftLabelPerCentFollow": true,
"LeftLabelPerCentTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"LeftLabelPerCentMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"rightShow": true,
"rightWidth": "auto",
"rightLabelAndBarType": "default",
"rightLabelAndBarLayout": "labelT",
"rightLabelPosition": {
"x": "5%",
"y": "50%"
},
"rightLabelTransform": {
"x": "0",
"y": "0"
},
"rightlayout": "imgR",
"rightDefaultImg": true,
"rightImage": "",
"rightImgWidth": {
"w": 12,
"h": 20
},
"rightLabelImgMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"rightRidius": 0,
"rightLabelTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"rightLabelMaigin": {
"t": 0,
"r": 5,
"b": 0,
"l": 0
},
"rightLabelTranslate": {
"x": 0,
"y": 0
},
"rightLabelValueTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"rightLabelValueMaigin": {
"t": 0,
"r": 5,
"b": 0,
"l": 5
},
"rightLabelValueTranslate": {
"x": 0,
"y": 0
},
"rightLabelPerCent": true,
"rightLabelPerCentFollow": true,
"rightLabelPerCentTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"rightLabelPerCentMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"proBarBgConfig": true,
"proBarBorderConfig": true,
"proBarBgBorderRidius": true,
"leftBarBgConfig": true,
"lefttBarBorderRidiusConfig": true,
"leftBarBoxBgConfig": false,
"leftBarBoxBorderConfig": false,
"leftBarBoxBorderRidius": true,
"leftBarNodeConfig": false,
"rightBarBgConfig": true,
"rightBarBorderRidiusConfig": true,
"rightBarBoxBgConfig": false,
"rightBarBoxBorderConfig": false,
"rightBarBgBorderRidius": true,
"rightBarNodeConfig": false,
"leftLabelImgConfig": true,
"leftLabelText": true,
"leftLabelValueText": true,
"rightLabelImgConfig": true,
"rightLabelText": true,
"rightLabelValueText": true
},
"base": {
"width": 528,
"height": 211
},
"dataSource": [
{
"leftLabel": "男",
"leftValue": 20,
"leftImage": "",
"rightLabel": "女",
"rightValue": 80,
"rightImage": ""
}
],
bindCallbackParams:(evenName: string, data: Record) => void;
}

return (
<>


);
}
``