Progress

antd Progress进度圆环图 https://ant.design/components/progress-cn

  1. import React, { memo } from 'react'
  2. import PropTypes from 'prop-types'
  3. import { Progress } from 'antd'
  6. CircleRing.propTypes = {
  7.   value: PropTypes.number,
  8.   color: PropTypes.string,
  9. }
  11. /**
  12.  * @param { value, color } props 
  13.  * @description 圆环图参数
  14.  */
  15. function CircleRing(props) {
  16.   const { value, color } = props
  18.   return (
  19.     <Progress
  20.       strokeLinecap="square" 
  21.       type="circle"
  22.       width={80}
  23.       strokeWidth={16}
  24.       showInfo={false}
  25.       percent={value}
  26.       strokeColor={color}
  27.     />
  28.   )
  29. }
  31. export default memo(CircleRing)

progress-se.jpg

Progress-circle.jpg

react-circle

在线demo https://zzarcon.github.io/react-circle
github 文档 https://github.com/zzarcon/react-circle

  1. yarn add react-circle
  3. npm install react-circle

使用

  1. import Circle from 'react-circle'
  3. <Circle
  4.   animate={true}
  5.   animationDuration="1s"
  6.   responsive={false} 
  7.   size="100"
  8.   lineWidth="40"
  9.   progress="36"
  10.   progressColor="rgb(76, 154, 255)"
  11.   bgColor="#ecedf0"
  12.   textColor="#6b778c"
  13.   percentSpacing={10}
  14.   roundedStroke={false}
  15.   showPercentage={true}
  16.   showPercentageSymbol={true}
  17. />

react-circle参数说明

  1. // All avaliable props for customization(illustrated by default values):
  2. // Details are ordered as: `<Type>: <Description>`
  3. <Circle
  4.   animate={true} // Boolean: Animated/Static progress
  5.   animationDuration="1s" // String: Length of animation
  6.   responsive={false} // Boolean: Make SVG adapt to parent size
  7.   size="100" // String: Defines the size of the circle.
  8.   lineWidth="25" // String: Defines the thickness of the circle's stroke.
  9.   progress="0" // String: Update to change the progress and percentage.
  10.   progressColor="rgb(76, 154, 255)" // String: Color of "progress" portion of circle.
  11.   bgColor="#ecedf0" // String: Color of "empty" portion of circle.
  12.   textColor="#6b778c" // String: Color of percentage text color.
  13.   textStyle={{
  14.     font: 'bold 4rem Helvetica, Arial, sans-serif' // CSSProperties: Custom styling for percentage.
  15.   }}
  16.   percentSpacing={10} // Number: Adjust spacing of "%" symbol and number.
  17.   roundedStroke={false} // Boolean: Rounded/Flat line ends
  18.   showPercentage={true} // Boolean: Show/hide percentage.
  19.   showPercentageSymbol={true} // Boolean: Show/hide only the "%" symbol.
  20. />

svg边缘被剪切bug

设置 svg的 overflow: visible
svg.jpg

  1. svg {
  2.     overflow: visible;
  3.   }
  5. /* 默认的样式 */
  6. svg:not(:root) {
  7.     overflow: hidden;
  8. }

SVG溢出

SVG视图溢出：隐藏/裁剪
让viewBox外的任何东西都不可见