圆环.png

vue

  1. <template>
  2.   <svg
  3.     xmlns="http://www.w3.org/2000/svg"
  4.     class="svg-content"
  5.     :viewbox="viewbox"
  6.     :width="diameterShow"
  7.     :height="diameterShow"
  8.   >
  9.     <!-- 外部圆圈，固定360度圆圈 -->
  10.     <circle
  11.       :cx="size"
  12.       :cy="size"
  13.       :r="raduisActual"
  14.       :stroke-width="strokeWidthIn"
  15.       :stroke="strokeBgColor"
  16.       fill="none"
  17.     ></circle>
  18.     <!-- 百分比环 -->
  19.     <circle
  20.       v-if="rate"
  21.       :text="text"
  22.       :cx="size"
  23.       :cy="size"
  24.       :r="raduisActual"
  25.       :stroke-width="strokeWidth"
  26.       :stroke="strokeColor"
  27.       fill="none"
  28.       :transform="transform"
  29.       :stroke-dasharray="strokeDasharray"
  30.       stroke-linecap="round"
  31.     ></circle>
  32.     <!-- 中间背景 -->
  33.     <circle :cx="size" :cy="size" :r="raduisActualIn" fill="#3b3743"></circle>
  34.     <!-- 中间文字，根据自己的需求定义了 -->
  35.     <text :x="size" :y="size" fill="#ffffff" :font-size="numTextSize">
  36.       {{ text }}
  37.     </text>
  38.     <!-- 如果中间文字带单位的，根据自己的需求处理了 -->
  39.     <text :x="size" :y="timesY" fill="#ffffff" :font-size="numTypeTextSize">
  40.       次
  41.     </text>
  42.   </svg>
  43. </template>
  44. <script>
  45. export default {
  46.   props: {
  47.     // 圆环外圈的半径，为了好看，最小值半径19
  48.     size: {
  49.       default: 38,
  50.     },
  51.     // 圆环的小宽度
  52.     strokeWidth: {
  53.       default: 5,
  54.     },
  55.     // 圆环的颜色
  56.     strokeColor: {
  57.       default: '#00A1F9',
  58.     },
  59.     strokeBgColor: {
  60.       default: 'rgba(0,161,249,0.6)',
  61.     },
  62.     // 圆环显示的百分比 这边是小数
  63.     rate: {
  64.       default: 0.5,
  65.     },
  66.     // 圆环里面的文字 这里的文字如果跟rate息息相关 可以放到computed计算
  67.     text: {
  68.       default: 50,
  69.     },
  70.     // 圆环里面的文字的fontSize大小
  71.     textSize: {
  72.       default: 20,
  73.     },
  74.   },
  75.   computed: {
  76.     timesY() {
  77.       return this.size * 1.5
  78.     },
  79.     strokeWidthIn() {
  80.       return Math.round(0.6 * this.strokeWidth)
  81.     },
  82.     // 圆半径
  83.     raduisActual() {
  84.       return this.size - this.strokeWidth
  85.     },
  86.     // 内部放文字圆圈半径
  87.     raduisActualIn() {
  88.       return Math.round((this.size - this.strokeWidth) * 0.8)
  89.     },
  90.     // svg的宽高，也就是圆环直径
  91.     diameterShow() {
  92.       return 2 * this.size
  93.     },
  94.     viewbox() {
  95.       return `0 0 ${this.diameterShow} ${this.diameterShow}`
  96.     },
  97.     strokeDasharray() {
  98.       const perimeter = Math.PI * 2 * this.raduisActual
  99.       const showLength = Math.round(this.rate * perimeter - 3)
  100.       return `${showLength} 1000`
  101.     },
  102.     transform() {
  103.       return `matrix(0,-1,1,0,0,${this.diameterShow})`
  104.     },
  105.     numTextSize() {
  106.       return this.textSize
  107.     },
  108.     numTypeTextSize() {
  109.       return this.textSize > 24 ? this.textSize / 2 : 12
  110.     },
  111.   },
  112.   mounted() {},
  113.   beforeDestroy() {},
  114.   methods: {},
  115. }
  116. </script>
  117. <style scoped lang="scss">
  118.   $ui-width: 1224; //设计图的基准宽
  119.   $ui-height: 696; //设计图的基准高
  121.   @function vw($px) {
  122.     @return $px / $ui-width * 100vw;
  123.   }
  125.   @function vh($px) {
  126.     @return $px / $ui-height * 100vh;
  127.   }
  128.   text {
  129.     text-anchor: middle;
  130.   }
  131.   .parent-element-center {
  132.     display: inline-block;
  133.     position: relative;
  134.     width: 100%;
  135.     padding-bottom: 100%;
  136.     vertical-align: middle;
  137.     overflow: hidden;
  138.   }
  139.   .svg-content {
  140.     display: inline-block;
  141.     position: absolute;
  142.     top: 0;
  143.     left: 0;
  144.   }
  145.   .element-center {
  146.     position: absolute;
  147.     left: 50%;
  148.     top: 45%;
  149.     border-radius: 50%;
  150.     transform: translate(-50%, -50%);
  151.     font-size: vw(20);
  152.     background-color: #3b3743;
  153.     color: #ffffff;
  154.   }
  155. </style>