https://github.com/arve0/vue-pie-chart
Vue pie chart component
https://github.com/arve0/vue-pie-chart
Last synced: 3 months ago
JSON representation
Vue pie chart component
- Host: GitHub
- URL: https://github.com/arve0/vue-pie-chart
- Owner: arve0
- Created: 2017-10-15T17:41:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-11-12T19:13:27.000Z (over 1 year ago)
- Last Synced: 2025-01-12T08:24:44.982Z (4 months ago)
- Language: JavaScript
- Homepage: https://arve0.github.io/vue-pie-chart/
- Size: 595 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-pie-chart
```html
```
[Demo](https://arve0.github.io/vue-pie-chart/).
2.9 kB gziped, no external dependencies.
## Install
```sh
npm i vue-pie-chart
```
## Usage
Register component:
```js
const PieChart = require('vue-pie-chart')
// or import .vue-file, if you have vue-loader
import PieChart from 'vue-pie-chart/src/PieChart.vue'
// register globally
Vue.component('pie-chart', PieChart)
// or register in your Vue instance
new Vue({
components: {
'pie-chart': PieChart
}
})
```
Then use it in template, here shown with default attributes:
```html
```
### Attributes
#### `ratio: number`
Size of pie chart. `1` is a cirle, `0.5` is a half circle. Pie will rotate clock-wise if positive, and counter-clock-wise if negative. Wraps when absolute value is above 1.
#### `percent: number`
Size of pie chart. `100` is a cirle, `50` is a half circle. Pie will rotate clock-wise if positive, and counter-clock-wise if negative. Wraps when absolute value is above 100. If both percent and ratio is given, ratio is used.
#### `stroke-width: number`
Size of bar. Should be above 0 and below 10. 10 will completely fill the pie to the center.
#### `label: string`
Text inside pie chart. Defaults to percent if not given.
#### `label-small: string`
Small label below main label. Defaults to empty string if not given.
#### `color: string`
Color of pie chart.
#### `opacity: number`
Opacity of pie chart. `0` is transparent, `1` is opaque.
## Dev Setup
``` sh
git clone https://github.com/arve0/vue-pie-chart
cd vue-pie-chart
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
## License
MIT