Vue.js Vuejs-Chartjs-将甜甜圈图表转换为量规-旋转

我是vue.js的新手，非常感谢您的帮助和建议

我正在使用Chartjs，我想旋转我的饼图，使它看起来像一个仪表。我不确定我的javascript哪里出了问题，而且我在控制台中没有收到任何错误-有人能告诉我吗

我不确定我是否在正确的位置放置了“选项”

chartjs.html

<div class="wrapper">
  <div class="chart_header">chartjs guage</div>
  <vue-chartsguagejs></vue-chartsguagejs>
</div>

这是目前我的道格努特图表，我正试图将其作为一个齿轮旋转

---

我发现用这种格式重新构造代码产生了巨大的不同：

import { Doughnut } from 'vue-chartjs'

export default {
  extends: Doughnut,
  data () {
    return {
      datacollection: {
        labels: ["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
        datasets: [
          {
            label: 'GitHub Commits',
            backgroundColor: ['rgb(226,126,64)', 'rgb(232,226,202)', 'rgb(226,210,172)', 'rgb(223,189,139)', 'rgb(223,162,103)','rgb(226,126,64)'],
            borderWidth: 0,
            hoverBorderWidth: 0,
            data: [10, 10, 10, 10, 10],
          }
        ]
      },
      options: {
        rotation: -1.0 * Math.PI,
        circumference: Math.PI,
      }

    }
  },
  mounted () {
    this.renderChart(this.datacollection, this.options, {responsive: true, maintainAspectRatio: false})
  }
}

import { Doughnut } from 'vue-chartjs'

export default {
  extends: Doughnut,
  data () {
    return {
      datacollection: {
        labels: ["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
        datasets: [
          {
            label: 'GitHub Commits',
            backgroundColor: ['rgb(226,126,64)', 'rgb(232,226,202)', 'rgb(226,210,172)', 'rgb(223,189,139)', 'rgb(223,162,103)','rgb(226,126,64)'],
            borderWidth: 0,
            hoverBorderWidth: 0,
            data: [10, 10, 10, 10, 10],
          }
        ]
      },
      options: {
        rotation: -1.0 * Math.PI,
        circumference: Math.PI,
      }

    }
  },
  mounted () {
    this.renderChart(this.datacollection, this.options, {responsive: true, maintainAspectRatio: false})
  }
}