Vue.jsで円グラフを描く

くるりと動く円グラフをVue.jsで作りたい。
# 出来たやつ
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="guchiparasol" data-slug-hash="YBrvOo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Vue.jsで円グラフ">
  <span>See the Pen <a href="https://codepen.io/guchiparasol/pen/YBrvOo/">
  Vue.jsで円グラフ</a> by guchiparasol (<a href="https://codepen.io/guchiparasol">@guchiparasol</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# SVG
```html
<svg viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(-90deg)">
    <circle cx="30" cy="30" r="15" fill="rgba(0,0,0,0)" stroke="#7ebbb8" stroke-width="30" v-bind:stroke-dasharray="formatTime" />
</svg>
```
stroke-dasharrayが`0,100`で無、`100,0`で円、`50,50`で半円になるので、`0,100`→`100,0`へ変化していくようにscriptで設定する。

#script全体
```javascript
let app = new Vue({
            el: '#app',
            data() {
                return {
                    percent_set: 60, // 数値を入力
                    percent_fill: 0,
                    percent_none: 100,
                    timerObj: null,
                }
            },
            mounted() {
                window.addEventListener('load', this.graph);
            },
            methods: {
                graph: function () {
                    let self = this;
                    self.timerObj = setInterval(function () {
                        self.percent_fill++
                        self.percent_none--
                        if ((self.percent_none == 0) || self.percent_fill == self.percent_set) {
                            clearInterval(self.timerObj)
                        }
                    }, 10)
                }
            },
            computed: {
                formatTime: function () {
                    let timeStrings = [this.percent_fill.toString(), this.percent_none.toString()]
                    return timeStrings[0] + ',' + timeStrings[1]
                }
            }
        })
```

## data
```javascript
data() {
    return {
        percent_set: 60, // 数値を入力
        percent_fill: 0,
        percent_none: 100,
        timerObj: null,
    }
},
```

` percent_set`で割合となる数値をセットする

## methods - カウントする
```javascript
methods: {
    graph: function () {
        let self = this;
        self.timerObj = setInterval(function () {
            self.percent_fill++
            self.percent_none--
            if ((self.percent_none == 0) || self.percent_fill == self.percent_set) {
                clearInterval(self.timerObj)
            }
        }, 10)
    }
},
```
`setInterval`で`percent_fill`がカウントアップ、`percent_none`がカウントダウンさせる。円になった場合、またはセットされた値になった場合、`clearInterval`をかける。

## computed - 値をセットする
```javascript
computed: {
    formatTime: function () {
        let timeStrings = [this.percent_fill.toString(), this.percent_none.toString()]
        return timeStrings[0] + ',' + timeStrings[1]
    }
}
```

`v-bind:stroke-dasharray="formatTime"`に算出した値を返す。

## mounted - 呼び出す
```javascript
mounted() {
    window.addEventListener('load', this.graph);
},
```
ページが読み込まれたらgraphの関数を呼び出す。