饼图响应硬编码数据

Question

<template>
  <div>
    <svg width="100" height="100" class="pie-chart">
      <circle r="25" cx="50" cy="50" style="stroke-dasharray: 94.8, 158"/>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'pie-chart',
  data () {
    return {
      data: [10, 60, 30]
    }
  }
}
</script>

<style>
.pie-chart {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  background: #ddd;
  border-radius: 100%;
  display: block;
}
.pie-chart circle {
  fill: #ddd;
  stroke: #0074d9;
  stroke-width: 50;
}
</style>

我正在尝试实现此饼图，该饼图会根据设置的数据进行更改，但是一旦我在data中设置了值，我是否应该在html中使用数据以便图表进行相应更改？或者我应该怎么做才能实现这一目标？预先谢谢你