vue中的环形数据图

最近项目有一个需求,要求画出一个数据环形图

类似于这种,旁边有百分比值,刚开始想到的是使用echars来做,毕竟人家方便,而且快,找了很久没找到符合的模板,只能自己写一个了,当然了,也是收集了很多资料的首先来看一下代码

<template>
  <div class="overall">
    <div class="annulus-box">
      <div class="plan">
        <span>{
   {
    plan }}%</span>
      </div>
      <div class="annulus-bck">
        <div class="annulus-left">
          <!-- :style="`transform: rotate(${plan>50?(plan-50)*3.6:0}deg);`" -->
          <div ref="semicircle-l" class="semicircle"></div>
        </div>
        <div class="annulus-right">
          <!-- :style="`transform: rotate(${plan<50?plan*3.6:180}deg);`" -->
          <div ref="semicircle-r" class="semicircle"></div>
        </div>
      </div>
    </div>
  </div>
</template>

接下来使css部分

<style lang="less" scoped>
.annulus-box {
   
  width: 120px;
  height: 120px;
  //   box-shadow: 0 0 5px #ccc;
  position: relative;
  .plan {
   
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: white;
    position: absolute;
    left: calc(50% - 36px);
    top: calc(50% - 36px);
    z-index: 5;
    box-shadow: 0 0 5px #ccc inset;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 2rem;
    color: #424242;
  }
  //   -webkit-mask: radial-gradient(transparent 50px, white 0px);
  .annulus-bck {
   
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(rgb(0, 255, 213) 50%, rgb(0, 110, 255) 100%)