nenodias/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript">
        const app = new Vue({
            template:`
                <div>
                    <canvas ref="canvas" width="120px" height="120px">
                    </canvas>
                </div>
            `,
            data(){
                return {
                    c: null,
                    dados:[
                        { color: '#C5DDFF', percent: 60},
                        { color: '#24FF76', percent: 5},
                        { color: '#FBFF6F', percent: 10}
                    ],
                    value: 0,
                };
            },
            mounted(){
                this.$nextTick(() => this.init());
            },
            methods:{
                init(){
                    const ctx = this.ctx;
                    window.ctx = ctx;
                    ctx.clearRect(0, 0, 120, 120);
                    ctx.fillText('Hello', 0, 0);
                    this.c = ctx;

                    ctx.strokeStyle = '#000';
                    ctx.lineWidth = 7;
                    this.initArc();
                    ctx.lineWidth = 5;
                    ctx.strokeStyle = '#FF5B56';
                    this.initArc();
                    let before = 0;
                    this.dados.forEach(i => {
                        this.drawArc(i.color, before, before + i.percent);
                        before += i.percent;
                    });
                    this.drawArrow();
                },
                initArc(){
                    const ctx = this.c;
                    const end = (Math.PI * 2) * (64 / 100);
                    ctx.save();
                    ctx.beginPath();
                    ctx.translate(55, 55);
                    ctx.rotate((Math.PI / 180) * 155);
                    ctx.arc(0, 0, 50, Math.PI * 0, end);
                    ctx.stroke();
                    ctx.restore();
                },
                drawArc(color, before, percent){
                    const ctx = this.c;
                    ctx.lineWidth = 5;
                    const max = (Math.PI * 2) * (64 / 100);
                    ctx.save();
                    ctx.beginPath();
                    ctx.strokeStyle = color;
                    ctx.translate(55, 55);
                    ctx.rotate((Math.PI / 180) * 155);
                    const beforePosition = max * (before/100);
                    const next = max * (percent/100);
                    ctx.arc(0, 0, 50, next, beforePosition, true    );
                    ctx.stroke();
                    ctx.restore();
                },
                drawArrow(){
                    ctx.save();
                    ctx.beginPath();
                    ctx.translate(55, 55);
                    ctx.rotate((Math.PI / 180) * this.value);
                    ctx.strokeStyle = '#000';
                    ctx.lineWidth = 3;
                    ctx.moveTo(0, 15);
                    ctx.lineTo(0, -30);
                    ctx.stroke();
                    ctx.restore();
                }
            },
            computed:{
                ctx(){
                    return this.$refs.canvas.getContext('2d');
                }
            },
            watch:{
                value:function(newVal, old){
                    this.init();
                }
            }
        }).$mount('#app');
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Canvas</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
	<div id="app"></div>
	<script type="text/javascript">
	const app = new Vue({
	template:`
	<div>
	<canvas ref="canvas" width="120px" height="120px">
	</canvas>
	</div>
	`,
	data(){
	return {
	c: null,
	dados:[
	{ color: '#C5DDFF', percent: 60},
	{ color: '#24FF76', percent: 5},
	{ color: '#FBFF6F', percent: 10}
	],
	value: 0,
	};
	},
	mounted(){
	this.$nextTick(() => this.init());
	},
	methods:{
	init(){
	const ctx = this.ctx;
	window.ctx = ctx;
	ctx.clearRect(0, 0, 120, 120);
	ctx.fillText('Hello', 0, 0);
	this.c = ctx;

	ctx.strokeStyle = '#000';
	ctx.lineWidth = 7;
	this.initArc();
	ctx.lineWidth = 5;
	ctx.strokeStyle = '#FF5B56';
	this.initArc();
	let before = 0;
	this.dados.forEach(i => {
	this.drawArc(i.color, before, before + i.percent);
	before += i.percent;
	});
	this.drawArrow();
	},
	initArc(){
	const ctx = this.c;
	const end = (Math.PI * 2) * (64 / 100);
	ctx.save();
	ctx.beginPath();
	ctx.translate(55, 55);
	ctx.rotate((Math.PI / 180) * 155);
	ctx.arc(0, 0, 50, Math.PI * 0, end);
	ctx.stroke();
	ctx.restore();
	},
	drawArc(color, before, percent){
	const ctx = this.c;
	ctx.lineWidth = 5;
	const max = (Math.PI * 2) * (64 / 100);
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = color;
	ctx.translate(55, 55);
	ctx.rotate((Math.PI / 180) * 155);
	const beforePosition = max * (before/100);
	const next = max * (percent/100);
	ctx.arc(0, 0, 50, next, beforePosition, true );
	ctx.stroke();
	ctx.restore();
	},
	drawArrow(){
	ctx.save();
	ctx.beginPath();
	ctx.translate(55, 55);
	ctx.rotate((Math.PI / 180) * this.value);
	ctx.strokeStyle = '#000';
	ctx.lineWidth = 3;
	ctx.moveTo(0, 15);
	ctx.lineTo(0, -30);
	ctx.stroke();
	ctx.restore();
	}
	},
	computed:{
	ctx(){
	return this.$refs.canvas.getContext('2d');
	}
	},
	watch:{
	value:function(newVal, old){
	this.init();
	}
	}
	}).$mount('#app');
	</script>
	</body>
	</html>