vue3 实现根据动态数据，显示进度

效果图：

思路：
通过计算背景图的宽度来达到效果（background-size）

代码：
script

    // 接口返回的进度条数据
    let CustomerListCount = ref({})
    // 各类人数概览比例图
    var ChartData  // 各类客户数据
    // 各类人数最大值接近的整十数
    var MaxNumber
    //获取到用于显示各类进度的div的背景图的宽度数据
    var LeadCustomers = ref('')
    var PotentialCustomers = ref('')
    var SurvivingCustomers = ref('')
    var LossWarningCustomers = ref('')
    var LostCustomers = ref('')
    // 获取数据接口
    let APICustomerListCount = () => {
      getCustomerListCount(
        {
          param: JSON.stringify({ id: "1" })
        }
      ).then(res => {
        let data
        if (typeof res == 'string') {
          data = JSON.parse(res)
        } else {
          data = res
        }
        if (data.retCode == '0') {
          CustomerListCount.value = data
          // 将存储人数的数据，统一放进一个数组内
          ChartData = [
            Number(CustomerListCount.value.leadCustCount),
            Number(CustomerListCount.value.potentialCustCount),
            Number(CustomerListCount.value.existCustCount),
            Number(CustomerListCount.value.lossWarnCustCount),
            Number(CustomerListCount.value.lossCustCount)
          ]
          // 计算各类人数比例图的方法
          let MaxValue = () => {
          	// 找出所有
            let MaxChartData = ChartData[0]
            ChartData.forEach(item => {
              if (item > MaxChartData) {
                MaxChartData = item
              }
            });
             
            MaxNumber = Math.ceil(MaxChartData / 10) * 10 + 50
             
            LeadCustomers.value = `${(ChartData[0] / MaxNumber * 100) + '% ' + '100%'}`
            PotentialCustomers.value = `${(ChartData[1] / MaxNumber * 100) + '% ' + '100%'}`
            SurvivingCustomers.value = `${(ChartData[2] / MaxNumber * 100) + '% ' + '100%'}`
            LossWarningCustomers.value = `${(ChartData[3] / MaxNumber * 100) + '% ' + '100%'}`
            LostCustomers.value = `${(ChartData[4] / MaxNumber * 100) + '% ' + '100%'}`
          }
          // 调用计算比例图的方法
          MaxValue()
        }
      }).catch(err => {
        console.log(err, 'ERROR');
      })
    }
    APICustomerListCount()

html

        
          
            
              进度条上的名称
              
                {{ CustomerListCount.leadCustCount }}
                人
              
            
          
          
            
              进度条上的名称
              
                {{ CustomerListCount.potentialCustCount }}
                人
              
            
          
          
            
              进度条上的名称
              
                {{ CustomerListCount.existCustCount }}
                人
              
            
          
          
            
              进度条上的名称
              
                {{ CustomerListCount.lossWarnCustCount }}
                人
              
            
          
          
            
              进度条上的名称
              
                {{ CustomerListCount.lossCustCount }}
                人
              
            
          
        
      

style

根据自己的需求写样式