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(247 / 10) * 10 + 50
			 *	          = Math.ceil(24.7) * 10 + 50
			 *	          = 28*10+50
			 *	          = 330
			*/ 
            MaxNumber = Math.ceil(MaxChartData / 10) * 10 + 50
            /*
			 * 用人数/MaxNumber *100得到的数值（背景图宽度占比），为div的背景图宽度重新赋值
			 * 计算过程示例：
			 * PotentialCustomers.value = `${(247 / 330 * 100) + '% ' + '100%'}`
			 *                          = `${(0.74848…*100) + '% ' + '100%'}`
			 *                          = `${(74.848…) + '% ' + '100%'}`
			 *                          = `74.847…%  100%`
			*/ 
            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

<div id="IndexChart">
        <div class="ChartData">
          <div class="LeadCustomers">
            <div :style="{ backgroundSize: LeadCustomers }" @click="clickChartData(1)">
              进度条上的名称
              <span>
                {{ CustomerListCount.leadCustCount }}
                <span>人</span>
              </span>
            </div>
          </div>
          <div class="PotentialCustomers">
            <div :style="{ backgroundSize: PotentialCustomers }" @click="clickChartData(2)">
              进度条上的名称
              <span>
                {{ CustomerListCount.potentialCustCount }}
                <span>人</span>
              </span>
            </div>
          </div>
          <div class="SurvivingCustomers">
            <div :style="{ backgroundSize: SurvivingCustomers }" @click="clickChartData(3)">
              进度条上的名称
              <span>
                {{ CustomerListCount.existCustCount }}
                <span>人</span>
              </span>
            </div>
          </div>
          <div class="LossWarningCustomers">
            <div :style="{ backgroundSize: LossWarningCustomers }" @click="clickChartData(5)">
              进度条上的名称
              <span>
                {{ CustomerListCount.lossWarnCustCount }}
                <span>人</span>
              </span>
            </div>
          </div>
          <div class="LostCustomers">
            <div :style="{ backgroundSize: LostCustomers }" @click="clickChartData(4)">
              进度条上的名称
              <span>
                {{ CustomerListCount.lossCustCount }}
                <span>人</span>
              </span>
            </div>
          </div>
        </div>
      </div>

style

根据自己的需求写样式