52 lines
942 B
Vue
52 lines
942 B
Vue
|
<template>
|
||
|
<div class="container">
|
||
|
<pie :chartdata="data" :options="options"></pie>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import pie from './charjs_donut'
|
||
|
|
||
|
export default {
|
||
|
name: 'postesComparison',
|
||
|
components: {
|
||
|
'pie': pie
|
||
|
},
|
||
|
data () {
|
||
|
return {
|
||
|
data: {
|
||
|
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
||
|
datasets: [
|
||
|
{
|
||
|
label: "Population (millions)",
|
||
|
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
|
||
|
data: [2478,5267,734,784,433]
|
||
|
}
|
||
|
]
|
||
|
},
|
||
|
options: {
|
||
|
responsive: true,
|
||
|
maintainAspectRatio: false,
|
||
|
title: {
|
||
|
display: true,
|
||
|
text: 'Predicted world population (millions) in 2050'
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
computed: {
|
||
|
},
|
||
|
methods: {
|
||
|
}
|
||
|
}
|
||
|
|
||
|
</script>
|
||
|
|
||
|
<style scope>
|
||
|
.container {
|
||
|
position: relative;
|
||
|
height: 40vh;
|
||
|
width: 80vw;
|
||
|
}
|
||
|
</style>
|