el-progress进度条，format效果实现

需要实现如下效果图： 

 实现的需求是，取数组对象里面，amount最大的值作为100%，其余按照这个标准进行计算得到显示的进度条百分比

<template>
  <div class="app-container">  
     
    <div class="chart-container">
      <el-row :gutter="14">
         
        <el-col :span="12">
          <div
            v-loading="chartLoading"
            class="chart-wrapper"
            style="margin-bottom: 14px;"
          >
            <h3>近半年重量企业排名</h3>
            <div
              v-if="status3 === 'data'"
              class="rank_div"
            >
              <div
                v-for="(item, index) in leaseSortData"
                :key="index"
                class="rank_box"
              >
                <div
                  class="li_fl"
                  :style="{background: index == 0 ? '#fff1f1' : index == 1 ? '#fff5ee' : index == 2 ? '#fff8e6' : '#f4f4f4', color: index == 0 ? '#ff9292' : index == 1 ? '#ff9950' : index == 2 ? '#f7b500' : '#8b8b8b' }"
                >
                  <div>{{ index+1 }}</div>
                  <div>TOP</div>
                </div>
                <div class="li_fr">
                  <div class="name">
                    {{ item.name }}
                  </div>
                  <el-progress
                    :percentage="item.numPer"
                    :format="(p) => formatProgress(p, item)"
                    :stroke-width="8"
                    :title="item.tipTxt"
                  />
                </div>
              </div>
            </div>
            <emptyData
              :status="status3"
              height="202px"
            />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
  
<script>
import { divide, round } from '@/utils/digit'
import emptyData from '@/components/empty/index.vue' 
import {  fillAmountDeptStatistic } from '@/api/operationAnalysis/hydOper'

export default {
  components: { 
    emptyData
  },
  data() {
    return { 
      status3: 'empty', // 'loading': 正在加载中; 'empty': 数据为空; 'data': 存在数据
      chartLoading: false, 
      leaseSortData: [], // 排名数据  
    }
  },
  created() {  
    this.getFillAmountDeptStatistic() 
  },
  mounted() {
  },
  methods: { 
    formatProgress(percentage, item) {
      // console.log(percentage, item)
      return item.amount + "kg"
    },
    // 近半年 企业排名--bar横
    getFillAmountDeptStatistic() {
      this.status3 = 'loading'
      this.chartLoading = true
      this.leaseSortData = []
      fillAmountDeptStatistic()
        .then(response => {
          let resData = response.rows

          if (resData && resData.length) {
            // 求数组对象某个对象的最大值
            // 初始化最大值为第一个对象的属性值
            let arr = []
            let maxValue = resData[0].amount;
            // 遍历数组，比较每个对象的属性值
            for (let i = 1; i < resData.length; i++) {
              if (resData[i].amount > maxValue) {
                maxValue = resData[i].amount;
              }
            }
            // console.log(maxValue); // 输出: 20

            resData.map(v=>{
              let per = divide(v.amount, maxValue)  // 0.000567
              // console.log(per)
              arr.push({
                maxValue: maxValue,
                name: v.time,
                amount: v.amount,
                // amountInt: Math.round(v.amount),
                numPer: v.amount == maxValue ? 100 : round(per * 100, 2) ,
                tipTxt: v.time + '：' +  v.amount + 'kg'
              })
            })
            this.leaseSortData = arr
            // console.log(this.leaseSortData)
            this.status3 = 'data'
          } else {
            this.status3 = 'empty'
          }
          this.chartLoading = false
        })
        .catch(() => {
          this.chartLoading = false
          this.status3 = 'empty'
        })
    }, 
  },
}
</script>
  
<style lang="scss" rel="stylesheet/scss" scoped>
.app-container {
  background-color: #edf1f5;
  padding: 0; 
  .chart-container {
    height: calc(100vh - 200px);
    // overflow-y: auto;
    // padding: 20px;
    background: #edf1f5;
    border-radius: 4px;
    .el-row {
      height: 100%;
      // margin: 0 !important;
      .el-col {
        height: 100%;
        // padding: 0 !important;
      }
    }
    .chart-wrapper {
      height: calc(50% - 7px); 
      padding: 12px 16px 20px 16px;
      border-radius: 4px;
      // border: 1px solid #e6e6e6;
      background: #FFFFFF;
      h3 {
        margin: 0;
        font-size: 14px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.8);
        line-height: 20px;

        &::before {
          content: '';
          display: inline-block;
          width: 4px;
          height: 14px;
          background: #1F4A81;
          top: 3px;
          position: relative;
          margin-right: 6px;
        }
      }
    }
  }

  .rank_div {
    height: calc(100% - 50px); // 300px;
    max-height: calc(100% - 50px); // 300px;
    overflow: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 10px;
    .rank_box:first-child {
      margin-top: 0;
    }
    .rank_box {
      display: flex;
      margin-top: 27px;
      .li_fl {
        width: 30px;
        // text-align: center;
        font-size: 10px;
        border-radius: 4px;
        margin-right: 10px;
        padding: 2px 4px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
      }
      .li_fr {
        flex: 1;
        .name {
          font-size: 12px;
          margin-bottom: 4px;
        }
      }
    }
  }
}
::v-deep {
  .el-progress-bar{
    padding-right: 0;
    position: relative;
  }
  .el-progress__text {
    position: absolute;
    right:0;
    font-size: 12px !important;
    top: -14px;
  }
}
</style>
  

 digit.js

// 高精度除法

export function divide(...nums) {

  if (nums.length > 2) {

    return iteratorOperation(nums, divide);

  }

  const [num1, num2] = nums;

  const num1Changed = float2Fixed(num1);

  const num2Changed = float2Fixed(num2);

  checkBoundary(num1Changed);

  checkBoundary(num2Changed);

  // 重要，这里必须用strip进行修正

  return times(num1Changed / num2Changed, strip(Math.pow(10, digitLength(num2) - digitLength(num1))));

}

// 四舍五入

export function round(num, ratio) {

  const base = Math.pow(10, ratio);

  let result = divide(Math.round(Math.abs(times(num, base))), base);

  if (num < 0 && result !== 0) {

    result = times(result, -1);

  }

  // 位数不足则补0

  return result;

}