vue-pie-chart
Demo.
2.9 kB gziped, no external dependencies.
Install
npm i vue-pie-chart
Usage
Register component:
const PieChart = // or import .vue-file, if you have vue-loader // register globallyVue // or register in your Vue instance components: 'pie-chart': PieChart
Then use it in template, here shown with default attributes:
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
git clone https://github.com/arve0/vue-pie-chartcd vue-pie-chart# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build
For detailed explanation on how things work, consult the docs for vue-loader.
License
MIT