react仪表盘

CQKM a409836b9c '' hace 6 años
config 14b9756dcb '文字居中对齐' hace 6 años
public 6704ac19da '未完成起始点堆成' hace 6 años
scripts 14b9756dcb '文字居中对齐' hace 6 años
src a409836b9c '' hace 6 años
.gitignore 6704ac19da '未完成起始点堆成' hace 6 años
README.md 2c7413eb26 '更新readme' hace 6 años
images.d.ts 6704ac19da '未完成起始点堆成' hace 6 años
package.json 14b9756dcb '文字居中对齐' hace 6 años
tsconfig.json 6704ac19da '未完成起始点堆成' hace 6 años
tsconfig.prod.json 6704ac19da '未完成起始点堆成' hace 6 años
tsconfig.test.json 6704ac19da '未完成起始点堆成' hace 6 años
tslint.json 6704ac19da '未完成起始点堆成' hace 6 años
yarn.lock 49795f029b '新增及修改' hace 6 años

README.md

运行

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>

效果图

效果图