【圆形容器实现进度条功能的图表组件】

蹩脚

已于 2022-10-24 13:41:21 修改

阅读量96

点赞数

分类专栏：前端文章标签： css vue.js less 1024程序员节

于 2022-10-24 13:38:50 首次发布

本文链接：https://blog.csdn.net/weixin_39984859/article/details/127490795

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

圆形容器实现进度条功能的图表

组件内容
- 注意

组件内容

组件详情

<template>
  <div class="Garden_div" :style="{'height': getaddPx(radius)+'px'}">
    <div class="Garden" :style="{'background-position-y': '-'+getPx(percentage)+'px','height': radius+'px','width': radius+'px'}">
      <div class="Garden_msg">
        <div><span>{{titleval}}</span></div>
        <div class="percentage"><span>{{percentage}}</span><span>%</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default{
  name:'Garden',
  props:{
    titleval:String,
    percentage:Number,
    radius:Number,
  },
  methods: {
    getaddPx(e){
      console.log(e)
      return Number(e)+Number(20);
    },
    getPx(e){
      console.log(e)
      console.log(this.radius)
      return (e*this.radius)/100;
    },
    accMul(arg1,arg2)
    {
        var m=0,s1=arg1.toString(),s2=arg2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
    },
  },
}
</script>
<style lang="less" scoped>
.Garden_div {
  // height: 260px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .Garden {
    height: 240px;
    width: 240px;
    background-color: #1890FF;
    border:#1890FF 2px solid;
    border-radius: 1000px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-image: url('../../../assets/img/Picture1.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 110% 110%;
    .Garden_msg{
      .percentage{
        text-align: center;
        margin-top: 15px;
        >span:nth-child(1){
          font-size: 22px;
        }
        >span:nth-child(2){
          font-size: 14px;
        }
      }
    }
  }
}
</style>