Vue+Canva绘制扇形比列图

 Vue+Canva绘制扇形比列图

<template>
  <div>
    <canvas id="can1" width="400" height="400"></canvas>
  </div>
</template>

<script>
export default {
  name: 'IssueAndDiagnosis',
  mounted() {
    this.draw()
    //绘制函数一定要放在mounted中，在特殊情况下可能出现无法加载的情况，可使用如下方法代替
    // setTimeout(() => {
    //   this.draw()
    // }, 0)
  },
  methods:{
    draw(){
      const can1 = document.getElementById("can1");
      const ctx = can1.getContext("2d");
      const nums = [50, 50];
      const colors = ["#007EFE", "#004A96"];
      let start = 0;
      let end = 0;
      ctx.translate(0,0);
      function pieChart(){
        for (let i = 0; i < nums.length; i ++){
          ctx.beginPath();
          ctx.moveTo(200,300);
          end += nums[i]/50*Math.PI;//终止角度
          ctx.strokeStyle = "white";
          ctx.fillStyle = colors[i];
          ctx.arc(200,300,50,start,end);
          ctx.fill();
          ctx.closePath();
          ctx.stroke();
          start += nums[i]/50*Math.PI;//起始角度
        }
      }
      ctx.rotate(-Math.PI/6);//旋转一定角度更加自然
      pieChart();
    }
  }
}

</script>

<style scoped>

</style>