react-dashboard-ts

运行

yarn

yarn start

参数说明

interface Iprops {
  bgColor?: string, // 十六进制色值 背景色
  color?: string, // 十六进制色值
  height: number, // 画布高
  label?: string, // 画布文字
  lineCap?: string, // 线条样式  round, butt, square
  lineSize?: number, // 线条大小
  nowValue?: number, // 当前角度(需换算，总角度360，(当前值/总值)*360)
  radius: number, // 半径
  width: number, // 画布宽
}

使用

<Dashboard width={300} height={300} radius={100} nowValue={a}>
  // 支持children
  <div className='sale'>
    <p>销售额</p>
    <p className='sale_percent'>{(a / 360) * 100}%</p>
  </div>
</Dashboard>

效果图