Element Plus 实例详解（六）___Progress 进度条

Element Plus 实例详解（六）___Progress 进度条

本文目录：

一、前言

二、搭建Element Plus试用环境

 1、搭建Vue3项目（基于Vite + Vue）

 2、安装Element Plus

三、Element Plus Progress 进度条功能试用

1、直线进度条

2、进度条内显示百分比标识

3、环形进度条

4、仪表盘形进度条

5、自定义内容

6、自定义进度条的颜色

7、动画进度条

四、官方资料中的各参数说明

五、总结

一、前言

　　Element Plus Progress 进度条，用于展示操作进度，告知用户当前状态和预期。

二、搭建Element Plus试用环境

 1、搭建Vue3项目（基于Vite + Vue）

　　安装时请选择支持Typescript，本实例我安装在（C:\00program\vue\vuelearn\vueviteproject1）目录中，具体方法详见下面文章：

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）https://blog.csdn.net/weixin_69553582/article/details/129630880

 　　安装完成后打开浏览器：http://localhost:5173/  ,能正常显示欢迎页面：

 2、安装Element Plus

  • NPM：npm install element-plus --save

详细参考：

Element Plus 实例详解系列（一）__安装设置https://blog.csdn.net/weixin_69553582/article/details/129701286

三、Element Plus Progress 进度条功能试用

1、直线进度条

  • Progress 组件设置 percentage 属性即可，表示进度条对应的百分比。
  • 该属性必填，并且必须在 0-100 的范围内。
  • 可以通过设置 format 来自定义文字显示的格式。

实现效果：

完整代码：

<template>
    <div class="demo-progress">
        <h3>Progress 进度条</h3>
        <el-progress :percentage="50" :stroke-width="10"/>
        <el-progress :percentage="100" :stroke-width="10" :format="format" />
        <el-progress :percentage="100" :stroke-width="10" status="success" />
        <el-progress :percentage="100" :stroke-width="10" status="warning" />
        <el-progress :percentage="50" :stroke-width="10" status="exception" />
    </div>
</template>

<script lang="ts" setup>
    const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 35px;
        width: 350px;
    }
</style>

2、进度条内显示百分比标识

  • 百分比不占用额外控件，适用于文件上传等场景。
  • Progress 组件可通过 stroke-width 属性更改进度条的高度，
  • 可通过 text-inside 属性来改变进度条内部的文字。

实现效果：

 完整代码：

<template>
    <div class="demo-progress">
        <h3>进度条内显示百分比标识</h3>
        <el-progress :text-inside="true" :stroke-width="28" :percentage="70" />
        <el-progress :text-inside="true"
                     :stroke-width="28"
                     :percentage="100"
                     status="success" />
        <el-progress :text-inside="true"
                     :stroke-width="28"
                     :percentage="80"
                     status="warning" />
        <el-progress :text-inside="true"
                     :stroke-width="28"
                     :percentage="50"
                     status="exception"/>
    </div>
</template>

<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 350px;
        padding:10px;
    }
</style>

3、环形进度条

  • Progress 组件可通过 type 属性来指定使用环形进度条
  • 还可以通过 width 属性来设置其大小。

实现效果：

完整代码：

<template>
    <div class="demo-progress">
        <h3>环形进度条</h3>
        <el-progress type="circle" :percentage="0" :stroke-width="10" />
        <el-progress type="circle" :percentage="35" :stroke-width="10" />
        <el-progress type="circle" :percentage="100" :stroke-width="10" status="success" />
        <el-progress type="circle" :percentage="70" :stroke-width="10" status="warning" />
        <el-progress type="circle" :percentage="50" :stroke-width="10" status="exception" />
    </div>
</template>
<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 450px;
    }

    .demo-progress .el-progress--circle {
        margin-right: 15px;
    }
</style>

4、仪表盘形进度条

  • 可以指定 type 属性到 dashboard 使用控制面板进度栏。

实现效果：

完整代码：

<template>
    <div class="demo-progress">
        <h3>仪表盘形进度条</h3>
        <el-progress type="dashboard" :percentage="percentage" :color="colors" :stroke-width="10"/>
        <el-progress type="dashboard" :percentage="percentage2" :color="colors" :stroke-width="10"/>
        <div>
            <el-button-group>
                <el-button :icon="Minus" @click="decrease" />
                <el-button :icon="Plus" @click="increase" />
            </el-button-group>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { onMounted, ref } from 'vue'
    import { Minus, Plus } from '@element-plus/icons-vue'

    const percentage = ref(10)
    const percentage2 = ref(0)

    const colors = [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 },
    ]

    const increase = () => {
        percentage.value += 10
        if (percentage.value > 100) {
            percentage.value = 100
        }
    }
    const decrease = () => {
        percentage.value -= 10
        if (percentage.value < 0) {
            percentage.value = 0
        }
    }
    onMounted(() => {
        setInterval(() => {
            percentage2.value = (percentage2.value % 100) + 10
        }, 400)
    })
</script>
<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 300px;
        padding:10px;
    }

    .demo-progress .el-progress--circle {
        margin-right: 15px;
    }
</style>

5、自定义内容

  • 通过默认插槽添加自定义内容。

实现效果：

完整代码：

<template>
    <div class="demo-progress">
        <h3>自定义内容</h3>
        <el-progress :percentage="80" :stroke-width="10">
            <el-button text>Content</el-button>
        </el-progress>
        <el-progress :text-inside="true"
                     :stroke-width="30"
                     :percentage="50"
                     status="exception">
            <span>Content</span>
        </el-progress>
        <el-progress type="circle" :percentage="100" status="success" :stroke-width="10">
            <el-button type="success" :icon="Check" circle />
        </el-progress>
        <span>通过默认插槽</span>
        <el-progress type="dashboard" :percentage="70" :stroke-width="10">
            <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
                <span class="percentage-label">Progressing</span>
            </template>
        </el-progress>
    </div>
</template>

<script lang="ts" setup>
    import { Check } from '@element-plus/icons-vue'
</script>

<style scoped>
    .percentage-value {
        display: block;
        margin-top: 10px;
        font-size: 28px;
    }

    .percentage-label {
        display: block;
        margin-top: 10px;
        font-size: 12px;
    }

    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 450px;
        padding: 10px;
    }

    .demo-progress .el-progress--circle {
        margin-right: 15px;
    }
</style>

6、自定义进度条的颜色

  • 可以通过 color 属性来设置进度条的颜色。
  • 该属性可以接受十六进制颜色值，函数和数组。

实现效果：

完整代码：

<template>
    <div class="demo-progress" >
        <h3>自定义进度条的颜色</h3>
        <el-progress :percentage="percentage" :stroke-width="20" :color="customColor" />

        <el-progress :percentage="percentage" :stroke-width="20" :color="customColorMethod" />

        <el-progress :percentage="percentage" :stroke-width="20" :color="customColors" />
        <el-progress :percentage="percentage" :stroke-width="20" :color="customColors" />
        <div>
            <el-button-group>
                <el-button :icon="Minus" @click="decrease" />
                <el-button :icon="Plus" @click="increase" />
            </el-button-group>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'
    import { Minus, Plus } from '@element-plus/icons-vue'

    const percentage = ref(45)
    const customColor = ref('#409eff')

    const customColors = [
        { color: '#b6ff00', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 },
    ]

    const customColorMethod = (percentage: number) => {
        if (percentage < 30) {
            return '#909399'
        }
        if (percentage < 70) {
            return '#e6a23c'
        }
        return '#67c23a'
    }
    const increase = () => {
        percentage.value += 10
        if (percentage.value > 100) {
            percentage.value = 100
        }
    }
    const decrease = () => {
        percentage.value -= 10
        if (percentage.value < 0) {
            percentage.value = 0
        }
    }
</script>
<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 350px;
        padding: 10px;
        
    }
</style>

7、动画进度条

  • 使用 intermediate 属性来设置不确定的进度，
  • duration 来控制动画持续时间。

实现效果：

 完整代码：

<template>
    <div class="demo-progress">
        <h3>动画进度条</h3>
        <el-progress :percentage="50" :indeterminate="true" :stroke-width="20"/>
        <el-progress :percentage="100" :format="format" :indeterminate="true" :stroke-width="20"/>
        <el-progress :percentage="100"
                     status="success"
                     :indeterminate="true"
                     :duration="5" :stroke-width="20"/>
        <el-progress :percentage="100"
                     status="warning"
                     :indeterminate="true"
                     :duration="1" :stroke-width="20"/>
        <el-progress :percentage="50" status="exception" :indeterminate="true" :stroke-width="20"/>
    </div>
</template>

<script lang="ts" setup>
    const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>
<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 350px;
    }
</style>

四、官方资料中的各参数说明

Attributes属性

属性名说明类型可选值默认值
percentage百分比，必填number(0-100)0
type进度条类型stringline/
circle/
dashboard		line
stroke-width进度条的宽度number—6
text-inside进度条显示文字内置在进度条内（仅 type 为 'line' 时可用）boolean—false
status进度条当前状态stringsuccess/
exception/
warning		—
indeterminate是否为动画进度条boolean-false
duration控制动画进度条速度number-3
color进度条背景色 进度条背景色 （会覆盖 status 状态颜色）string/
function/
array		—''
width环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）number—126
show-text是否显示进度条文字内容boolean—true
stroke-linecapcircle/dashboard 类型路径两端的形状stringbutt/
round/
square		round
format指定进度条文字内容function(percentage)——

Slots

名称说明
default自定义内容，参数为 { percentage }

五、总结

1

Element Plus 实例详解（一）__安装设置
2Element Plus 实例详解（二）___Button 按钮
3Element Plus 实例详解（三）___Date Picker 日期选择
4Element Plus 实例详解（四）___Border 边框
5Element Plus 实例详解（五）___Scrollbar 滚动条
6Element Plus 实例详解（六）___Progress 进度条
7Element Plus 实例详解（七）___
8Element Plus 实例详解（八）___
9Element Plus 实例详解（九）___
10Element Plus 实例详解（十）___
11Element Plus 实例详解（十一）___
12Element Plus 实例详解（十一）___

         推荐阅读：

31

Element Plus 实例详解（一）___安装设置

30

​​​

Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
29​​​​​​

SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）

28​​​​​​

查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决

27bba02a1c4617422c9fbccbf5325850d9.png​​​​​​

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)

26fea225cb9ec14b60b2d1b797dd8278a2.png​​​​​​

2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特

251f53fb9c6e8b4482813326affe6a82ff.png​​​​​​

2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）

246176c4061c72430eb100750af6fc4d0e.png​​​​​​

HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)

2317b403c4307c4141b8544d02f95ea06c.png​​​​​​

​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码

225d409c8f397a45c986ca2af7b7e725c9.png​​​​​​

【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）

210a4256d5e96d4624bdca36433237080b.png​​​​​​

python爱心源代码集锦（18款）

204d9032c9cdf54f5f9193e45e4532898c.png​​​​​​

巴斯光年python turtle绘图__附源代码

19074cd3c255224c5aa21ff18fdc25053c.png​​​​​​

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）

18daecd7067e7c45abb875fc7a1a469f23.png​​​​​​

​草莓熊python turtle绘图代码（玫瑰花版）附源代码

17fe88b78e78694570bf2d850ce83b1f69.png​​​​​​

立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

16c5feeb25880d49c085b808bf4e041c86.png​​​​​​

皮卡丘python turtle海龟绘图（电力球版）附源代码

1538266b5036414624875447abd5311e4d.png​​​​​​

【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)

1403ed644f9b1d411ba41c59e0a5bdcc61.png​​​​​​

草莓熊python turtle绘图（风车版）附源代码

1309e08f86f127431cbfdfe395aa2f8bc9.png​​​​​​

用代码过中秋，python海龟月饼你要不要尝一口？

1240e8b4631e2b486bab2a4ebb5bc9f410.png​​​​​​

《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念

11938bc5a8bb454a41bfe0d4185da845dc.jpeg​​​​​​

用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）

100f09e73712d149ff90f0048a096596c6.png​​​​​​

Python函数方法实例详解全集(更新中...)

993d65dbd09604c4a8ed2c01df0eebc38.png​​​​​​

matplotlib 自带绘图样式效果展示速查（28种，全）

8aa17177aec9b4e5eb19b5d9675302de8.png​​​​​​

手机屏幕坏了____怎么把里面的资料导出（18种方法）

71750390dd9da4b39938a23ab447c6fb6.jpeg​​​​​​

2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状

6dc8796ddccbf4aec98ac5d3e09001348.jpeg​​​​​​

Python中Print()函数的用法___实例详解(全，例多）

51ab685d264ed4ae5b510dc7fbd0d1e55.jpeg​​​​​​

色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)

480007dbf51944725bf9cf4cfc75c5a13.png​​​​​​

Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）

3c6374d75c29942f2aa577ce9c5c2e12b.png​​​​​​

Tomcat 启动闪退问题解决集（八大类详细）

25218ac5338014f389c21bdf1bfa1c599.png​​​​​​

Tomcat端口配置（详细）

1fffa2098008b4dc68c00a172f67c538d.png​​​​​​

tomcat11、tomcat10 安装配置（Windows环境）（详细图文）

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

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

相关文章

【数据结构】栈和队列

【数据结构】栈和队列

&#x1f680;write in front&#x1f680; &#x1f4dc;所属专栏&#xff1a;初阶数据结构 &#x1f6f0;️博客主页&#xff1a;睿睿的博客主页 &#x1f6f0;️代码仓库&#xff1a;&#x1f389;VS2022_C语言仓库 &#x1f3a1;您的点赞、关注、收藏、评论&#xff0c;是对…
阅读更多...
血细胞智能检测与计数软件（Python+YOLOv5深度学习模型+清新界面版）

血细胞智能检测与计数软件（Python+YOLOv5深度学习模型+清新界面版）

摘要&#xff1a;血细胞智能检测与计数软件应用深度学习技术智能检测血细胞图像中红细胞、镰状细胞等不同形态细胞并可视化计数&#xff0c;以辅助医学细胞检测。本文详细介绍血细胞智能检测与计数软件&#xff0c;在介绍算法原理的同时&#xff0c;给出Python的实现代码以及Py…
阅读更多...
HTTP协议详解（上）

HTTP协议详解（上）

目录 前言&#xff1a; 认识URL HTTP协议方法 通过Fiddler抓包 GET和POST之间典型区别 header详解 HTTP响应状态码 常见状态码解释 状态码分类 HTTP协议报文格式 小结&#xff1a; 前言&#xff1a; HTTP协议属于应用层协议&#xff0c;称为超文本传输协议&#xff…
阅读更多...
C++中的string类【详细分析及模拟实现】

C++中的string类【详细分析及模拟实现】

string类 目录string类一、stirng的介绍及使用1.为什么学习string类&#xff1f;2.标准库中的string类2.1 引入&#xff1a;编码2.2 basic_string3.string类的使用3.1 构造函数3.2 遍历string方式1&#xff1a;for循环方式2&#xff1a;范围for4.迭代器4.1 正向迭代器4.2反向迭…
阅读更多...
STM-32：按键控制LED灯 程序详解

STM-32：按键控制LED灯 程序详解

目录一、基本原理二、接线图三、程序思路3.1库函数3.2程序代码注&#xff1a;一、基本原理 左边是STM322里电路每一个端口均可以配置的电路部分&#xff0c;右边部分是外接设备 电路图。 配置为 上拉输入模式的意思就是&#xff0c;VDD开关闭合&#xff0c;VSS开关断开。 浮空…
阅读更多...
互联网数据挖掘与分析讲解

互联网数据挖掘与分析讲解

一、定义 数据挖掘&#xff08;英语&#xff1a;Data mining&#xff09;&#xff0c;又译为资料探勘、数据采矿。它是数据库知识发现&#xff08;英语&#xff1a;Knowledge-Discovery in Databases&#xff0c;简称&#xff1a;KDD)中的一个步骤。数据挖掘一般是指从大量的数…
阅读更多...
多线程(四)：线程安全

多线程(四)：线程安全

在开始讲解线程安全之前我们先来回顾一下我们学了那些东西了&#xff1a; 1. 线程和进程的认识 2. Thread 类的基本用法 3. 简单认识线程状态 4. 初见线程安全 上一章结束时看了一眼线程安全问题&#xff0c;本章将针对这个重点讲解。 一个代码在单线程中能够安全执行&am…
阅读更多...
204. 计数质数 （埃式筛法详解）——【Leetcode每日一题】

204. 计数质数 （埃式筛法详解）——【Leetcode每日一题】

素数最朴素判断思路&#xff1a;&#xff08;一般会超时&#xff09; 对正整数 n&#xff0c;如果用 2 到 n\sqrt{n}n​ 之间的所有整数去除&#xff0c;均无法整除&#xff0c;则 n 为素数又称为质数。 为什么到n\sqrt{n}n​ 就可以了&#xff0c;因为因数如果存在一定是成对…
阅读更多...
【三】一起算法---栈：STL stack、手写栈、单调栈

【三】一起算法---栈：STL stack、手写栈、单调栈

纸上得来终觉浅&#xff0c;绝知此事要躬行。大家好&#xff01;我是霜淮子&#xff0c;欢迎订阅我的专栏《算法系列》。 学习经典算法和经典代码&#xff0c;建立算法思维&#xff1b;大量编码让代码成为我们大脑的一部分。 ⭐️已更系列 1、基础数据结构 1.1、链表➡传送门 1…
阅读更多...
使用Node.js+Koa 从零开始写个人博客系统——后端部分（一）

使用Node.js+Koa 从零开始写个人博客系统——后端部分（一）

使用Node.jsKoa 从零开始写个人博客系统系列 提示&#xff1a;在此文章中你可以学习到的内容如下&#xff1a; 1 如何使用Koa快速搭建项目 2 对Koa的核心组件Koa-Route的简单使用 3 3层架构思想 4 nodejs的ORM框架——sequelize的使用 5 sequelize-auto的使用 6 简单的增删查改…
阅读更多...
【蓝桥杯嵌入式】第十三届蓝桥杯嵌入式国赛客观题以及详细题解

【蓝桥杯嵌入式】第十三届蓝桥杯嵌入式国赛客观题以及详细题解

题1 概念题。 USRAT&#xff1a;异步串口通信&#xff0c;常用于数据传输&#xff1b;SW-DP&#xff1a;SWD 的全称应该是 The Serial Wire Debug Port (SW-DP),也就是串行调试端口&#xff0c;是 >ARM 目前支持的两种调试端口之一&#xff1b;JTAG-DP&#xff1a;另一个调试…
阅读更多...
git基本用法教程（fork软件+git命令）

git基本用法教程（fork软件+git命令）

git基本用法教程1. git commit2. git branch3. git checkout4. git merge5. git rebase6. 在提交树中移动7. 撤销变更8. 整理提交记录9. 提交的技巧10. git clone11. git push12. git pull13. git fetch14. git flow15. git stash16. fork的使用当然除了环境和demo的运行和改写…
阅读更多...
chartgpt 告诉我的，loss 函数的各种知识

chartgpt 告诉我的，loss 函数的各种知识

一、libtorch中常见的损失函数及其使用场景的总结1. CrossEntropyLoss:CrossEntropyLoss&#xff08;交叉熵损失&#xff09;主要用于分类任务。它适用于多分类问题&#xff0c;其中每个样本只属于一个类别&#xff08;互斥&#xff09;。该损失函数将预测概率与真实标签的one-…
阅读更多...
应届生投腾讯，被面试官问了8个和 ThreadLocal 相关的问题。

应届生投腾讯，被面试官问了8个和 ThreadLocal 相关的问题。

问&#xff1a;谈一谈ThreadLocal的结构。 ThreadLocal内部维护了一个ThreadLocalMap静态内部类&#xff0c;ThreadLocalMap中又维护了一个Entry静态内部类&#xff0c;和Entry数组。 Entry类继承弱引用类WeakReference&#xff0c;Entry类有一个有参构造函数&#xff0c;参数…
阅读更多...
【数据结构】用队列实现栈

【数据结构】用队列实现栈

&#x1f4af;&#x1f4af;&#x1f4af; 本篇总结利用队列如何实现栈的相关操作&#xff0c;不难观察&#xff0c;栈和队列是可以相互转化的&#xff0c;需要好好总结它们的特性&#xff0c;构造出一个恰当的结构来实现即可&#xff0c;所以本篇难点不在代码思维&#xff0c;…
阅读更多...
大数据应用——Hadoop运行模式（伪分布式运行）

大数据应用——Hadoop运行模式（伪分布式运行）

4.2 伪分布式运行模式4.2.1 启动HDFS并运行MapReduce程序1. 分析 &#xff08;1&#xff09;配置集群&#xff08;2&#xff09;启动、测试集群增、删、查没有改&#xff08;多台机子麻烦&#xff09;&#xff08;3&#xff09;执行WordCount案例2. 执行步骤&#xff08;1&…
阅读更多...
前端vue实现导出pdf文件报告组件

前端vue实现导出pdf文件报告组件

大屏项目有一个需求&#xff0c;需要对展示的内容进行文件导出&#xff0c;但是目前后台没有相关的逻辑&#xff0c;所以只能前端硬上&#xff0c;在参考了其他许多的逻辑之后&#xff0c;目前我自己这边做了一套比较笨的组件&#xff0c;通过拼接标签这种方法来实现对你想需要…
阅读更多...
队列-我的基础算法刷题之路（六）

队列-我的基础算法刷题之路（六）

本篇博客旨在整理记录自已对队列的一些总结&#xff0c;以及刷题的解题思路&#xff0c;同时希望可给小伙伴一些帮助。本人也是算法小白&#xff0c;水平有限&#xff0c;如果文章中有什么错误之处&#xff0c;希望小伙伴们可以在评论区指出来&#xff0c;共勉 &#x1f4aa;。…
阅读更多...
seaborn从入门到精通03-绘图功能实现02-分类绘图Categorical plots

seaborn从入门到精通03-绘图功能实现02-分类绘图Categorical plots

seaborn从入门到精通03-绘图功能实现02-分类绘图Categorical plots总结参考关系-分布-分类分类绘图-Visualizing categorical data图形级接口catplot--figure-level interface导入库与查看tips和diamonds 数据分类散点图参考分布散点图stripplot分布密度散点图-swarmplot&#…
阅读更多...
进程与线程

进程与线程

文章目录进程与线程进程什么是进程进程的组成程序段数据段程序控制块例子线程什么是线程线程的组成线程描述信息程序计数器栈内存例子进程与线程的区别进程与线程 进程 什么是进程 ​ 什么是进程呢&#xff1f;简单来说&#xff0c;进程是程序的一次启动执行。什么是 程序呢…
阅读更多...
最新文章

Copyright @ 2022~2023