https://github.com/zhanphty/vue-canvas-gauge

vue-canvas-gauge仿支付宝信用分仪表盘
https://github.com/zhanphty/vue-canvas-gauge

canvas credit gauge score vue

Last synced: about 1 month ago
JSON representation

vue-canvas-gauge仿支付宝信用分仪表盘

• Host: GitHub
• URL: https://github.com/zhanphty/vue-canvas-gauge
• Owner: ZhanPhty
• License: mit
• Created: 2018-12-18T10:15:42.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-24T00:58:08.000Z (about 6 years ago)
• Last Synced: 2024-11-16T16:06:49.399Z (about 2 months ago)
• Topics: canvas, credit, gauge, score, vue
• Language: Vue
• Homepage:
• Size: 172 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![截图](https://github.com/ZhanPhty/vue-canvas-gauge/blob/master/screenshot.png)

# vue-canvas-gauge

> vue信用分仪表盘, 仿支付宝芝麻信用分效果

## git

github: [https://github.com/ZhanPhty/vue-canvas-gauge](https://github.com/ZhanPhty/vue-canvas-gauge)

## 安装与基本用法

```

$ npm install vue-canvas-gauge --save

或

$ yarn add vue-canvas-gauge

```

引用方式

```

import vueCanvasGauge from 'vue-canvas-gauge'

```

使用示例

```

  


    


      

    

  


import vueCanvasGauge from 'vue-canvas-gauge'

export default {

  components: {

    vueCanvasGauge

  },

  data () {

    return {

      current: 664

    }

  }

}

```

## Props

**width**

类型:`Number`

默认值: `300`

仪表盘的宽度

```

```

**height**

类型:`Number`

默认值: `300`

仪表盘的高度

```

```

**total**

类型:`Number`

默认值: `900`

信用分总分数，最大值

```

```

**current**

类型:`Number`

默认值: `200`

信用分当前分数，当前显示的分值，不能大于总分数

```

```

**score**

类型:`Number`

默认值: `24`

仪表盘的刻度，越大刻度越密

```

```

**speed**

类型:`Number`

默认值: `8`

仪表盘的动画速度，值越大越快

```

```

**type**

类型:`String`

默认值: `img`

可能值: `['arc', 'link'] `

仪表盘的样式风格，arc -> 圆圈， link -> 线条

```

```

**color**

类型:`String`

默认值: `#fff`

可能值: `['#f40', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, .4)'] `

仪表盘当前刻度颜色，type为`arc`或者`link`生效

```

```

**bg**

类型:`String`

默认值: `rgba(255, 255, 255, .3)`

仪表盘总刻度背景颜色，type为`arc`或者`link`生效

```

```

**image**

类型:`String`

仪表盘刻度样式，type为`img`生效

```

```

## 联系

QQ：461632311

网址：[http//www.uizph.com](http//www.uizph.com)