Pie chart
npm install @tygr/vue-pie-chart
A simple no-nonsense pie chart optimized for VueJS
!demo
yarn add -D @tygr/vue-pie-chart
`
`js
import PieChart from '@tygr/vue-pie-chart'export default {
components: {
PieChart,
}
}
`$3
`html
`* Charset attribute required
Usage
`html
`
`js
export default {
data: () => ({
plot: [
{
value: 10,
color: 'blue',
label: 'Blue amount',
id: 1
},
{
value: 45,
color: 'green',
label: 'Green amount',
id: 2
},
{
value: 30,
color: 'purple',
label: 'Purple amount',
id: 3
}
]
})
}
``| event | payload | description |
| ----- | ------- | ------------------------------------ |
| click | any | Emits the id of a datum when clicked |
| prop | type | default | description |
| ---------------- | ------ | ------- | --------------------- |
| plot | array | [] | The plot data to show |
| background-color | string | 'grey' | The background color |
| color | string | 'white' | Text and border color |
| prop | type | description |
| ----- | ------ | ----------------------------------------- |
| value | number | percentage out of 100 |
| color | string | background color for the circle segment |
| label | string | label for the segment |
| id | any | Identifier to be used for the click event |