@zym-com/merry-go-round
v0.0.2
Published
3D旋转木马
Downloads
3
Readme
Install
npm install @zym-com/merry-go-roundor
yarn add @zym-com/merry-go-roundBasic Usage
import MerryGoRound from "@zym-com/merry-go-round";
import "@zym-com/merry-go-round/dist/style.css";
function App() {
const options = {
"configuration": {
"domOriginType": "default",
"domOriginXY": {
"x": 275,
"y": 80
},
"domRadiusType": "default",
"domRadiusXY": {
"x": 220,
"y": 60
},
"farScale": 0.5,
"farOpacity": 0.5,
"speed": 4,
"autoPlay": 1,
"autoPlayDelay": 2000,
"bringToFront": true,
"childItemWH": {
"w": 100,
"h": 160
},
"mixBlendModetype": false,
"mixBlendMode": "normal",
"dataSeries": [
{
"fildType": "value",
"accurateMatching": true,
"fildValue": {
"field": "",
"value": ""
},
"numericField": "value",
"valueRange": {
"min": "0",
"max": "100"
},
"domContainerSize": {
"x": "100px",
"y": "160px"
},
"domPosition": {
"x": 0,
"y": 0
},
"bgColorSelect": "solidBgColor",
"solidBgColor": "rgba(24, 144, 255,0.15)",
"bgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(255,68,68,1)",
"direction": 180
},
"bgimage": "",
"bgimageSize": "cover",
"bgtransparency": 1,
"borderStyle": "solid",
"borderWidthName": 2,
"borderColor": "rgba(24, 144, 255,1)",
"bgborderRadiusName": 0,
"contentSeries": [
{
"domType": "image",
"contentMapping": "img",
"domSize": {
"x": 100,
"y": 100
},
"domItemPosition": {
"x": "50%",
"y": "50%"
},
"colorSelect": "solidColor",
"solidColor": "rgba(255,255,255,1)",
"anamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(255,68,68,1)",
"direction": 180
},
"textStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 18,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 18,
"fontStyle": "normal"
},
"levelalignment": "center",
"paragraphspacing": 0,
"transparency": 1,
"shadow": {
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "rgba(255,255,255,1)"
},
"objectFit": "contain",
"borderRadius": "5px",
"objectFitVideo": "contain",
"opacityVideo": 1,
"autoPlayVideo": true,
"controlsVideo": true,
"loopVideo": false,
"mutedVideo": false,
"htmlTemplate": "<div style='background:url([%img%]) no-repeat;' class='box'>\r <img src='[%img2%]' class='img'/>\r <div class='title'>[%title%]</div>\r <div class='num'>[%value%]</div>\r</div>",
"htmlCss": ".box {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column-reverse;\r\n position: relative\r\n}\r\n\r\n.title {\r\n font-size: 16px;\r\n font-family: Microsoft YaHei;\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n margin-top: 45px;\r\n margin-bottom: 15px\r\n}\r\n\r\n.num {\r\n font-size: 24px;\r\n font-family: DIN;\r\n font-weight: bold;\r\n color: #FFB00E;\r\n}\r\n\r\n.img {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 90px;\r\n height: 50px;\r\n transform: translate(-50%, -20%)\r\n}",
"textShadow": false
},
{
"domType": "image",
"contentMapping": "img2",
"domSize": {
"x": "90px",
"y": "50px"
},
"domItemPosition": {
"x": "50%",
"y": "55%"
},
"colorSelect": "solidColor",
"solidColor": "rgba(255,255,255,1)",
"anamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(255,68,68,1)",
"direction": 180
},
"textStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 18,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 18,
"fontStyle": "normal"
},
"levelalignment": "center",
"paragraphspacing": 0,
"transparency": 1,
"shadow": {
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "rgba(255,255,255,1)"
},
"objectFit": "contain",
"borderRadius": "5px",
"objectFitVideo": "contain",
"opacityVideo": 1,
"autoPlayVideo": true,
"controlsVideo": true,
"loopVideo": false,
"mutedVideo": false,
"htmlTemplate": "<div style='background:url([%img%]) no-repeat;' class='box'>\r <img src='[%img2%]' class='img'/>\r <div class='title'>[%title%]</div>\r <div class='num'>[%value%]</div>\r</div>",
"htmlCss": ".box {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column-reverse;\r\n position: relative\r\n}\r\n\r\n.title {\r\n font-size: 16px;\r\n font-family: Microsoft YaHei;\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n margin-top: 45px;\r\n margin-bottom: 15px\r\n}\r\n\r\n.num {\r\n font-size: 24px;\r\n font-family: DIN;\r\n font-weight: bold;\r\n color: #FFB00E;\r\n}\r\n\r\n.img {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 90px;\r\n height: 50px;\r\n transform: translate(-50%, -20%)\r\n}",
"textShadow": false
},
{
"domType": "text",
"contentMapping": "title",
"domSize": {
"x": "90px",
"y": "50px"
},
"domItemPosition": {
"x": "50%",
"y": "90%"
},
"colorSelect": "solidColor",
"solidColor": "rgba(255, 255, 255, 1)",
"anamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(255,68,68,1)",
"direction": 180
},
"textStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 18,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 18,
"fontStyle": "normal"
},
"levelalignment": "center",
"paragraphspacing": 0,
"transparency": 1,
"shadow": {
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "rgba(255,255,255,1)"
},
"objectFit": "contain",
"borderRadius": "5px",
"objectFitVideo": "contain",
"opacityVideo": 1,
"autoPlayVideo": true,
"controlsVideo": true,
"loopVideo": false,
"mutedVideo": false,
"htmlTemplate": "<div style='background:url([%img%]) no-repeat;' class='box'>\r <img src='[%img2%]' class='img'/>\r <div class='title'>[%title%]</div>\r <div class='num'>[%value%]</div>\r</div>",
"htmlCss": ".box {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column-reverse;\r\n position: relative\r\n}\r\n\r\n.title {\r\n font-size: 16px;\r\n font-family: Microsoft YaHei;\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n margin-top: 45px;\r\n margin-bottom: 15px\r\n}\r\n\r\n.num {\r\n font-size: 24px;\r\n font-family: DIN;\r\n font-weight: bold;\r\n color: #FFB00E;\r\n}\r\n\r\n.img {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 90px;\r\n height: 50px;\r\n transform: translate(-50%, -20%)\r\n}",
"textShadow": false
},
{
"domType": "text",
"contentMapping": "value",
"domSize": {
"x": "90px",
"y": "50px"
},
"domItemPosition": {
"x": "50%",
"y": "50%"
},
"colorSelect": "solidColor",
"solidColor": "rgba(255, 176, 14, 1)",
"anamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(255,68,68,1)",
"direction": 180
},
"textStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 24,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 18,
"fontStyle": "normal"
},
"levelalignment": "center",
"paragraphspacing": 0,
"transparency": 1,
"shadow": {
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "rgba(255,255,255,1)"
},
"objectFit": "contain",
"borderRadius": "5px",
"objectFitVideo": "contain",
"opacityVideo": 1,
"autoPlayVideo": true,
"controlsVideo": true,
"loopVideo": false,
"mutedVideo": false,
"htmlTemplate": "<div style='background:url([%img%]) no-repeat;' class='box'>\r <img src='[%img2%]' class='img'/>\r <div class='title'>[%title%]</div>\r <div class='num'>[%value%]</div>\r</div>",
"htmlCss": ".box {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column-reverse;\r\n position: relative\r\n}\r\n\r\n.title {\r\n font-size: 16px;\r\n font-family: Microsoft YaHei;\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n margin-top: 45px;\r\n margin-bottom: 15px\r\n}\r\n\r\n.num {\r\n font-size: 24px;\r\n font-family: DIN;\r\n font-weight: bold;\r\n color: #FFB00E;\r\n}\r\n\r\n.img {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 90px;\r\n height: 50px;\r\n transform: translate(-50%, -20%)\r\n}",
"textShadow": false
}
],
"backgroundStyleChild": false,
"borderStyleChild": false
}
]
},
"base": {
"width": 400,
"height": 300
},
"dataSource": [
{
"title": "丰乐",
"value": "60",
"img": "http://192.168.1.14:88/component-resources/2D/other/ranking1.png",
"img2": "http://192.168.1.14:88/component-resources/2D/other/dizuo.png"
},
{
"title": "新桥",
"value": "95",
"img": "http://192.168.1.14:88/component-resources/2D/other/ranking2.png",
"img2": "http://192.168.1.14:88/component-resources/2D/other/dizuo.png"
},
{
"title": "肥东",
"value": "87",
"img": "http://192.168.1.14:88/component-resources/2D/other/ranking3.png",
"img2": "http://192.168.1.14:88/component-resources/2D/other/dizuo.png"
},
{
"title": "龙门寺",
"value": "51",
"img": "http://192.168.1.14:88/component-resources/2D/other/ranking4.png",
"img2": "http://192.168.1.14:88/component-resources/2D/other/dizuo.png"
},
{
"title": "八公山",
"value": "21",
"img": "http://192.168.1.14:88/component-resources/2D/other/ranking5.png",
"img2": "http://192.168.1.14:88/component-resources/2D/other/dizuo.png"
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<MerryGoRound {...options} />
</>
);
}