1.效果图
最后出来的效果如上图所示,界面的构建是利用vue实现的,具体代码如下:
2.代码
<!-- -->
<template>
<div>
<div class="time-graph">
<div class="big">70</div>
<div class="medium">20</div>
<div class="small">10</div>
<div class="medium-graph">
<canvas id="medium-graph-canvas" width="292" height="292" />
</div>
<div class="big_canvas">
<canvas id="big-graph-canvas" width="396" height="396" />
</div>
<div class="small_canvas">
<canvas id="small-graph-canvas" width="170" height="170" />
</div>
</div>
</div>
</template>
<script>
export default {
name: '',
components: {
},
data() {
return {
}
},
// 生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
var medium_canvas = document.getElementById('medium-graph-canvas')
this<