el-progress进度条,format效果实现

需要实现如下效果图: 

 实现的需求是,取数组对象里面,amount最大的值作为100%,其余按照这个标准进行计算得到显示的进度条百分比

<template>
  <div class="app-container">  
     
    <div class="chart-container">
      <el-row :gutter="14">
         
        <el-col :span="12">
          <div
            v-loading="chartLoading"
            class="chart-wrapper"
            style="margin-bottom: 14px;"
          >
            <h3>近半年重量企业排名</h3>
            <div
              v-if="status3 === 'data'"
              class="rank_div"
            >
              <div
                v-for="(item, index) in leaseSortData"
                :key="index"
                class="rank_box"
              >
                <div
                  class="li_fl"
                  :style="{background: index == 0 ? '#fff1f1' : index == 1 ? '#fff5ee' : index == 2 ? '#fff8e6' : '#f4f4f4', color: index == 0 ? '#ff9292' : index == 1 ? '#ff9950' : index == 2 ? '#f7b500' : '#8b8b8b' }"
                >
                  <div>{
   { index+1 }}</div>
         

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

睡眠剥夺对记忆巩固的神经生物学影响

近期&#xff0c;《自然》杂志刊载的研究揭示了睡眠不足对记忆相关神经信号的不利影响&#xff0c;强调了即使在后续恢复充分睡眠的情况下&#xff0c;这种损害亦难以完全逆转。 神经元作为大脑的基本功能单位&#xff0c;其活动并非孤立进行&#xff0c;而是通过复杂的网络连接…

Day45

Day45 jQuery动画 显示和隐藏 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script src"js/jquery-1.8.2.js" type"text/javascript" charset"utf-8"></script&…

Webpack: 借助 Babel+TS+ESLint 构建现代 JS 工程环境

概述 Webpack 场景下处理 JavaScript 的三种常用工具&#xff1a;Babel、TypeScript、ESLint 的历史背景、功能以及接入 Webpack 的步骤借助这些工具&#xff0c;我们能构建出更健壮、优雅的 JavaScript 应用 使用 Babel ECMAScript 6.0(简称 ES6) 版本补充了大量提升 JavaSc…

【Linux】进程 | 控制块pcb | task_struct | 创建子进程fork

目录 Ⅰ. 进程的概念&#xff08;Process&#xff09; 1. 什么是进程&#xff1f; 2. 多进程管理 3. 进程控制块&#xff08;PCB&#xff09; task_struct 的结构 Ⅱ. 进程查看与管理 1. 使用指令查看进程 2. /proc 查看进程信息 3. 获取进程 ID 4. 创建子进程 原因…

Vue2-表单与v-model

1.Vue表单使用 表单输入绑定&#xff1a;表单输入绑定 — Vue.js #v-model双向数据绑定new Vue({template: <div>/* 用户修改 , vue-data数据同步修改(内存) */<input v-model"message" placeholder"edit..."><p>message: {{message}}&…

2024年虚拟现实、图像和信号处理国际学术会议(ICVISP 2024,8月2日-4)

2024年虚拟现实、图像和信号处理国际学术会议&#xff08;ICVISP 2024&#xff09;将于2024年8月2-4日在中国厦门召开。ICVISP 2024将围绕“虚拟现实、图像和信号处理”的最新研究领域&#xff0c; 为来自国内外高等院校、科学研究所、企事业单位的专家、教授、学者、工程师等提…

Python 参数类型

一 理解Python中的Parameters & Arguments Parameters&#xff1a;形参 Arguments&#xff1a;实参 二 Python的实参&#xff08;Arguments&#xff09;类型 实参类型总结 位置参数&#xff08;Positional Arguments&#xff09; &#xff1a;函数调用时通过入参的顺序来…

Younger 数据集:人工智能生成神经网络

设计和优化神经网络架构通常需要广泛的专业知识&#xff0c;从手工设计开始&#xff0c;然后进行手动或自动化的精细化改进。这种依赖性成为快速创新的重要障碍。认识到从头开始自动生成神经网络架构的复杂性&#xff0c;本文引入了Younger&#xff0c;这是一个开创性的数据集&…

【Unity】RPG2D龙城纷争(五)关卡编辑器之地图编辑

更新日期&#xff1a;2024年6月25日。 项目源码&#xff1a;本章发布 索引 简介关卡编辑器窗口类&#xff08;LevelEditor&#xff09;一、定义关卡编辑器窗口类二、两种编辑模式三、地块编辑模式1.关卡模板2.打开编辑窗口3.编辑器基本属性4.地块模板5.重新生成地图6.地图刷子7…

基于优化包络相关的Loran-C(罗兰C)信号天地波识别算法及MATLAB仿真代码和实测信号处理

引言 Loran-C接收信号处理中&#xff0c;完成信号的捕获后需要进行信号的跟踪&#xff0c;Loran-C信号的跟踪按照信号处理流程分为天地波识别、周期识别和正向过零点跟踪三个步骤。Loran-C信号通过天波和地波两种方式到达接收点&#xff0c;导致接收到信号为地波和天波的合成信…

YOLOv5改进(八)--引入Soft-NMS非极大值抑制

文章目录 1、前言2、各类NMS代码实现2.1、general.py 3、各类NMS实现3.1、Soft-NMS3.2、GIoU-NMS3.3、DIoU-NMS3.4、CIoU-NMS3.5、EIoU-NMS 4、目标检测系列文章 1、前言 目前yolov5使用的是NMS进行极大值抑制&#xff0c;本篇文章是要将各类NMS添加到yolov5中&#xff0c;同时…

性能优化-布局优化

性能优化-布局优化 屏幕的UI刷新机制 布局的选择 优化控件的使用 原生View的优化 1、屏幕的UI刷新机制 超过16ms会感觉卡顿&#xff0c; 刷新率&#xff08;Refresh Rate&#xff09;&#xff1a;指一秒内刷新屏幕的次数&#xff0c;例如60HZ&#xff1b; 帧率&#xff08;F…

菲律宾媒体PR发稿:谷歌SEO优化.关键词排名.谷歌收录

1. 引言 在菲律宾&#xff0c;媒体行业的发展日新月异&#xff0c;尤其是在线媒体。为了在这个竞争激烈的市场中脱颖而出&#xff0c;各家媒体纷纷寻求谷歌SEO优化、提升关键词排名和增加谷歌收录的方法。本文将围绕菲律宾的几大主要在线媒体&#xff0c;如菲律宾在线日志Jour…

优化系统小工具

一款利用VB6编写的系统优化小工具&#xff0c;系统优化、桌面优化、清理垃圾、查找文件等功能。 下载:https://download.csdn.net/download/ty5858/89432367

WPS复制后转置粘贴

1. WPS复制后转置粘贴 复制-》右键-》顶部第一行-》粘贴行列转置&#xff0c;如下图&#xff1a; 2. Excel office365 本地版 2. Excel office365 在线版

孙子兵法的笔记

系列文章目录 孙子兵法的笔记 三十六计的笔记 文章目录 系列文章目录1、始计第一【原文】【译文】 1、始计第一 用兵始于计谋&#xff0c;善善策出自“庙算”&#xff0c;而精确的“庙算”又来自对各种因素的侦测考察。 孙子在第一章中非常具体地提出了“五事”“七计”的考察标…

缓冲池管理器

开发环境搭建 克隆 git clone https://github.com/cmu-db/bustub.git cd bustub/ 切换分支 git checkout -b branchname v20221128-2022fall 创建docker镜像 docker build . -t bustub_img 创建容器 docker create -it --name bustub_container -v “E:/cmu/bustub”:“/bustu…

自然语言处理课程论文:《Attention is all you need》复现与解读

目录 1.背景介绍 1.1 文献介绍 1.2 研究背景 1.3 知识概述 1.3.1 机器翻译 1.3.2 attention机制与self-attention机制 2.数据来源与处理 2.1 数据集描述 2.2 数据处理 3. 模型架构 ​​​​​​​3.1 Positional Embedding ​​​​​​​3.2 Multi-Head Attention ​​​​​…

[UE虚幻引擎] DTSpeechVoice 文字转语音播放 插件说明

本插件可以在UE中使用蓝图把文本转成语音播放&#xff0c;播放的声音引擎是使用Windows自带的语音引擎&#xff0c;支持Win10&#xff0c;Win11。 系统设置 首先确认电脑是否有语音系统&#xff0c;一般正常安装的电脑都是自带的。 如果要播放多语言的&#xff0c;请自己下载其…

突发!OpenAI停止不支持国家API,7月9日开始执行

6月25日凌晨&#xff0c;有部分开发者收到了OpenAI的信&#xff0c;“根据数据显示&#xff0c;你的组织有来自OpenAl目前不支持的地区的API流量。从7月9日起&#xff0c;将采取额外措施&#xff0c;停止来自不在OpenAI支持的国家、地区名单上的API使用。” 但这位网友表示&am…