<template>
  <div class="chart-container">
    <CChart type="doughnut" :data="chartdata" 
            :options="chartoptions" />
  </div>
</template>

<script>
import { CChart } from '@coreui/vue-chartjs'
export default {
  name: 'PieChart',
  props: ['used', 'colors'],
  components: {
    CChart,
  },
  data: function () {
    return {
      chartoptions: {
        animations: null,
        animation: null,
      },
    };
  },
  computed: {
    chartdata() {
      const data = {
        labels: ['已使用', '空闲'],
        datasets: [
          {
            label: '资源',
            data: [this.used, 100 - this.used],
            backgroundColor: this.colors,
          },
        ]
      };
      return data;
    },
  },
  methods: {
  },
  mounted() {
  },
}
</script>

<style scoped>
.chart-container {
  max-width: 220px;
}
</style>
