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

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

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

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

在这里插入图片描述

然后就是结构代码

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

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

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

相关文章

Linux连接阿里云服务器的一系列命令教程

**-p&#xff1a;**连同文件的属性一起复制过去&#xff0c;而非使用默认属性(备份常用)&#xff1b; **-d&#xff1a;**若来源档为连结档的属性(link file)&#xff0c;则复制连结档属性而非文件本身&#xff1b; **-r&#xff1a;**递归持续复制&#xff0c;用於目录的复制…

SpringBoot教程(十五) | SpringBoot集成RabbitMq(消息丢失、消息重复、消息顺序、消息顺序)

SpringBoot教程&#xff08;十五&#xff09; | SpringBoot集成RabbitMq&#xff08;消息丢失、消息重复、消息顺序、消息顺序&#xff09; RabbitMQ常见问题解决方案问题一&#xff1a;消息丢失的解决方案&#xff08;1&#xff09;生成者丢失消息丢失的情景解决方案1&#xf…

记一次Hiveserver2连接异常的解决-腾讯云-emr

原文阅读&#xff1a;【巨人肩膀社区博客分享】记一次Hiveserver2连接异常的解决-腾讯云-emr 离线任务跑的好好的&#xff0c;忽然有一天失败了&#xff0c;查看海豚上的任务执行日志发现是hiveserver2连接超时了。 查看监控发现了几个问题一个是GC变得频繁&#xff0c;另一个…

【LabVIEW学习篇 - 19】:人机界面交互设计03

文章目录 运行菜单主菜单右键快捷菜单 运行菜单 菜单是人机交互非常重要的一个途径&#xff0c;它的好处是把需要的操作隐藏起来&#xff0c;当用户需要的时候才激活&#xff0c;因此相对于把所有的操作以按钮的形式放在界面上&#xff0c;可以节省很大的空间。 菜单有两种&a…

Learn OpenGL In Qt之着色器

竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生~ 公众号&#xff1a; C学习与探索 | 个人主页&#xff1a; rainInSunny | 个人专栏&#xff1a; Learn OpenGL In Qt 文章目录 写在前面GLSL变量输入输出顶点着色器片段着色器 Uniform更多属性 自己的着色器类 关注公众号&#xff1a;…

TCP通信实现

前言 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一种面向连接的、可靠的、基于流的通信协议。它是互联网协议栈&#xff08;TCP/IP&#xff09;中的核心协议之一&#xff0c;主要用于保证在计算机网络中可靠地传输数据。 TCP通信的基…

Android视频编辑:利用FFmpeg实现高级功能

在移动设备上进行视频编辑的需求日益增长&#xff0c;用户期望能够在智能手机或平板电脑上轻松地编辑视频&#xff0c;以满足社交媒体分享或个人存档的需求。Android平台因其广泛的用户基础和开放的生态系统&#xff0c;成为视频编辑应用的理想选择。FFmpeg&#xff0c;作为一个…

Leetcode面试经典150题-55.跳跃游戏

解法都在代码里&#xff0c;不懂就留言或者私信 class Solution {public boolean canJump(int[] nums) {/**如果就一个位置&#xff0c;你本来就在这&#xff0c;肯定可以跳到*/if(nums.length 1) {return true;}/**这个题的解题思路是遍历数组&#xff0c;如果当前位置不在之…

Golang | Leetcode Golang题解之第393题UTF-8编码验证

题目&#xff1a; 题解&#xff1a; const mask1, mask2 1 << 7, 1<<7 | 1<<6func getBytes(num int) int {if num&mask1 0 {return 1}n : 0for mask : mask1; num&mask ! 0; mask >> 1 {nif n > 4 {return -1}}if n > 2 {return n}r…

AI大模型零基础学习到精通:jieba分词用法及原理

2.jieba分词用法及原理 1.概述 上篇文章分析了自然语言处理&#xff0c;特别是中文处理中&#xff0c;分词的几个主要难点。为了解决这些难点&#xff0c;提出了基于字符串匹配的算法和基于统计的分词算法。针对当前的几种分词引擎&#xff0c;对其分词准确度和速度进行了评估…

实时监控视频接入到AS-VJ900拼接系统中,发现服务器的英伟达GPU 驱动状态不对 导致拼接后实时视频请求失败的问题解决

目录 一.问题背景 1.1拼接平台简介 1.2问题描述 二.问题解决过程 2.1查看拼接前视频流 2.2查看GPU驱动 2.3重新安装GPU驱动 2.3.1确认驱动版本 2.3.2卸载不正常驱动 2.3.3重新安装驱动 三.问题解决结果 3.1查看解决结果 3.2nvidia-smi的补充 一.问题背景 1.1拼接…

NLP基础及其代码-tokenizer

基础知识 NLP-分词器&#xff1a;SentencePiece【参考Chinese-LLaMA-Alpaca在通用中文语料上训练的20K中文词表并与原版LLaMA模型的32K词表进行合并的代码】_sentencepiece 中文训练-CSDN博客 【OpenLLM 008】大模型基础组件之分词器-万字长文全面解读LLM中的分词算法与分词器…

TCP通信三次握手、四次挥手

前言 前面我说到了&#xff0c;UDP通信的实现&#xff0c;但我们经常说UDP通信不可靠&#xff0c;是因为他只会接收和发送&#xff0c;并不会去验证对方收到没有&#xff0c;那么我们说TCP通信可靠&#xff0c;就是因为他会进行验证接收端是否能够接收和发送&#xff0c;并且只…

使用Python通过字节串或字节数组加载和保存PDF文档

处理PDF文件的可以直接读取和写入文件系统中的PDF文件&#xff0c;然而&#xff0c;通过字节串&#xff08;byte string&#xff09;或字节数组&#xff08;byte array&#xff09;来加载和保存PDF文档在某些情况下更高效。这种方法不仅可以提高数据处理的灵活性&#xff0c;允…

怎么能实现VIN码充电吗?针对一个单一的VIN码,设置不同的服务费这种计费模式

为了实现VIN码充电并针对单一VIN码设置不同的服务费这种计费模式&#xff0c;需深入了解VIN码充电的实现过程及技术细节。VIN码充电是一种基于车辆识别号码&#xff08;VIN&#xff09;进行充电和计费的方法&#xff0c;适用于新能源汽车的充电桩。具体分析如下&#xff1a; V…

网络学习-eNSP配置NAT

NAT实现内网和外网互通 #给路由器接口设置IP地址模拟实验环境 <Huawei>system-view Enter system view, return user view with CtrlZ. [Huawei]undo info-center enable Info: Information center is disabled. [Huawei]interface gigabitethernet 0/0/0 [Huawei-Gigabi…

告别繁琐,IsMyHdOK硬盘测速,即刻享受科技便利

快节奏的生活因科技而精彩纷呈&#xff0c;它赋予我们超越时空的能力&#xff0c;让工作与家庭的天平在忙碌中依然保持平衡——而面对数据爆炸的时代&#xff0c;硬盘作为数据存储与交换的核心部件&#xff0c;其性能直接影响到我们的工作效率和体验。正是在这样的背景下&#…

Python面试常见问题及详细解答:从基础到高级概念全覆盖

创作不易&#xff0c;您的打赏、关注、点赞、收藏和转发是我坚持下去的动力&#xff01; 以下是Python面试中常见的一些问题及其详细答案的整理&#xff1a; 1. Python的可变与不可变对象 问题: 什么是可变对象和不可变对象&#xff1f;举例说明。答案: 可变对象: 可以在原地…

iOS 知识点记录

王巍 博客地址:OneVs Den git地址:onevcat (Wei Wang) GitHub 江湖人称喵神,目前就职于line。喵神的博客涉及方面比较广, 有Obejctive-C, Swift, SwiftUI, Unity等等。博客内容很有深度,非常值得关注。 戴铭 博客地址:戴铭的博客 git地址:ming1016 (戴铭) GitHub 《i…

在Webmin上默认状态无法正常显示 Mariadb V11.02及以上版本

OS: Armbian OS 24.5.0 Bookworm Mariadb V11.02及以上版本 Webmin&#xff1a;V2.202 非常小众的问题&#xff0c;主要是记录一下。 如题 Webmin 默认无法 Mariadb V11.02及以上版本 如果对 /etc/webmin/mysql/config 文件作相应调整就可以再现Mariadb管理界面。 路径文件&am…