doughnut.vue 595 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <script>
  2. import { Doughnut } from 'vue-chartjs'
  3. var doughnutOptions = {
  4. cutoutPercentage: 85,
  5. legend: {
  6. display: false
  7. },
  8. tooltips: {
  9. enabled: false,
  10. displayColors: false
  11. },
  12. responsive: false
  13. }
  14. export default {
  15. extends: Doughnut,
  16. props: ['chartData'],
  17. data () {
  18. return {
  19. data: this.chartData
  20. }
  21. },
  22. watch: {
  23. chartData (newval) {
  24. this.data = newval
  25. this.setChartData()
  26. }
  27. },
  28. mounted () {
  29. this.setChartData()
  30. },
  31. methods: {
  32. setChartData () {
  33. this.renderChart(this.data, doughnutOptions)
  34. }
  35. }
  36. }
  37. </script>