Vue实现自定义进度条占比功能 Vue自定义进度条功能

编程语言 2024-11-02 19:23

0 阅读

在不使用echarts等第三方插件的情况下，使用Vue实现自定义的进度条占比功能，并且是多数据可选循环的

预览图效果
在这里插入图片描述

首先看一下获取的后端返回的数据结构，其中每一组加起来等于 22 ，也就是说如果你自己算的话也是同理，根据占比的数值除以总和 =的百分比再去渲染对应占比进度条图

在这里插入图片描述

然后就是结构代码

<template>
  <div class="containerMain01">
    <div id="pdfDom">
      <div class="levalB">
        <div class="infosDiv">
          <div
            v-for="(item, key, index)