react仪表盘

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

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>

效果图

效果图