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

news2024/11/25 9:33:36

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

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

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

在这里插入图片描述

然后就是结构代码

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2123691.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

828华为云征文 | 标题:使用华为云X实例部署图数据库Virtuoso并存储6500万条大数据的完整过程与性能测评

前言 在大数据时代&#xff0c;图数据库以其强大的关系处理能力在复杂网络、社交媒体分析、知识图谱等领域得到了广泛应用。而在云计算的蓬勃发展下&#xff0c;使用云服务器进行图数据库的部署与管理变得更加方便高效。本篇文章将详细介绍如何在华为云X实例上部署开源图数据…

C++(2)之Linux多线程服务端编程总结

C之Linux多线程服务端编程读书笔记 Author: Once Day Date: 2023年1月31日/2024年8月23日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: Linux实践…

MySQL-CRUD入门2

文章目录 数据的查询(补充)条件查询关于SQL语句的执行顺序分页查询(LIMIT) 数据的修改数据修改基础知识 数据的查询(补充) 这一节接着写, 包括数据的查询(补充), 数据的更新, 数据的删除 条件查询 其实就是根据给定的一些条件, 然后过滤掉不符合实际情况的记录, 把符合条件的…

Spring Cloud之二 微服务注册

1&#xff1a;Intellij 新建服务 user-service 2&#xff1a;pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"…

知识库管理系统在企业数字化转型中的作用

引言 在数字化转型的浪潮中&#xff0c;企业正以前所未有的速度重塑其业务模式、运营流程和组织架构&#xff0c;以适应快速变化的市场环境和客户需求。这一过程中&#xff0c;知识库管理系统作为信息整合与知识共享的核心平台&#xff0c;发挥着举足轻重的作用&#xff0c;不…

2024/9/9 408“回头看”:b树

B树是什么&#xff1f;有什么作用&#xff1f;B树的插入和删除具体细节是什么&#xff1f;除了B树还有一个是B&#xff0b;树、还是B-树&#xff0c;他们有什么区别&#xff0c;又有什么相同点&#xff1f; b树在王道考研查找这一章&#xff0c;所以他的主要作用就是查找。 在…

基于单片机一种风速测量仪的设计

文章目录 前言资料获取设计介绍功能介绍设计程序具体实现截图参考文献设计获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师&#xff0c;一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设…

WEBSERVER完整体系

为什么还要做 WebServer? ①对于缺乏项目经验的C++新手,网上可找到的详细项目资料有限,多为简单的管理系统、五子棋游戏、工具库或WebServer等。 ②WebServer项目有助于整合面试所需的基础知识,如C/C++语言、操作系统(包括I/O调用和多路复用机制)、计算机网络(处理网络…

NUUO网络视频录像机 css_parser.php 任意文件读取漏洞复现

0x01 产品简介 NUUO网络视频录像机(Network Video Recorder,简称NVR)是NUUO Inc.生产的一种专业视频监控设备,它广泛应用于零售、交通、教育、政府和银行等多个领域。能够同时管理多个IP摄像头,实现视频录制、存储、回放及远程监控等功能。它采用先进的视频处理技术,提供…

生成身临其境的环境模型

清华大学创作的AI软件 aiuni Aiuni.ai是一个基于Unique3D的在线AI图片转3D模型生成建模工具&#xff0c;它的核心功能基于Unique3D&#xff0c;能够从单张图片中生成高效率且高质量的3D模型建模。这项技术的出现&#xff0c;为3D视觉艺术家、游戏开发者以及教育工作者等专业人士…

keil5移植freeRTOS中出现的erro,无法识别_asm

不识别__ASM关键字&#xff0c;并对汇编语法报错。 static portFORCE_INLINE void vPortClearBASEPRIFromISR( void ){__asm{msr basepri, # 0}} 解决办法: 编译器对于汇编和C的混合代码格式做了要求&#xff0c;按照以下方式修改汇编代码&#xff0c;即可编译通过。 static p…

语言课学习系统的设计与实现

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱&#xff0c;出错率高&#xff0c;信息安全…

游戏加速器行业需要办理什么许可证?

我们先来看下&#xff0c;目前做游戏加速器的企业都办理了哪些许可证&#xff1f; 1、流星游戏加速器 流星游戏加速器 流星游戏加速器办理了许可资质 他们办理了IDC、ISP、CDN、VPN、ICP、EDI等增值电信业务经营许可证&#xff0c;办理的还是比较全面的。 2、香肠游戏加速器…

CSS —— 界面布局

flexbox - 弹性盒子布局&#xff08;弹性布局&#xff09; 采用flex布局的元素&#xff0c;称为 Flex 容器&#xff08;flex container&#xff09;&#xff0c;简称"容器" flex-direction 用于设置主轴方向&#xff1b;子元素默认是按照主轴线排列的&#xff0c;所…

Ubuntu中安装Nginx实现靶场的端口转发及其过程中错误的处理

1、安装Nginx需要的配置文件和库&#xff1a; sudo apt-get update sudo apt-get install -y g libpcre3 libpcre3-dev zlib1g zlib1g-dev openssl libssl-dev 2、下载Nginx: wget -c https://nginx.org/download/nginx-1.18.0.tar.gz 3、解压Nginx: tar -zxvf nginx-1.18.0.ta…

群晖SPK套件之NAS公网助手的安装教程

本文将详细介绍神卓互联NAS助手SPK套件的安装步骤&#xff0c;帮助您轻松实现外网访问内网NAS设备。 目录 一、准备工作 二、下载SPK套件 三、安装SPK套件 四、登录套件并配置外网访问 一、准备工作 在开始安装之前&#xff0c;请确保您已满足以下条件&#xff1a; NAS设…

简单说说关于shell中zsh和bash的选择

希望文章能给到你启发和灵感&#xff5e; 如果觉得文章对你有帮助的话&#xff0c;点赞 关注 收藏 支持一下博主吧&#xff5e; 阅读指南 开篇说明一、基础环境说明1.1 硬件环境1.2 软件环境 二、什么是shell、bash、zsh?2.1 bash2.2 zsh 三、选择 Bash 还是 Zsh&#xff1f;…

力扣题/回溯/单词搜索

单词搜索 力扣原题 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格是那…

2024微信个人名片在线生成HTML源码

源码介绍 微信个人名片卡片在线生成&#xff0c;这是一款微信个人名片生成网站源码&#xff0c;无第三方接口&#xff0c;本地直接生成可长期使用。 主要用于生成用户个性化的名片页面&#xff0c;包括头像、姓名、联系方式、个人介绍等信息。 在本地浏览器打开即可,源码是h…

使用VSCode 安装SAP Fiori 开发所需插件

文章目录 1.0 SAP Fiori Tools - Extension Pack2.0 SAPUI5 Extension 1.0 SAP Fiori Tools - Extension Pack 此插件集成了SAP Fiori 的多个插件&#xff0c;安装这个将包含其他Fiori安装插件 SAP Fiori工具-扩展包 SAP Fiori Tools简化了SAP Fiori元素应用程序的开发。包括…