css画饼图

 

<template slot-scope="scope">

          <div class="pie" :style="{'--p': scope.row.rate}" style="--p:10;--b:10px;--c:#FFAB79;">

            <!--

              --p:这个变量应该包含百分比值作为一个数字(不带%符号)。它应该与内容相同。

              --b:这个变量将定义边框的粗细。

              --c:这个变量将定义主要颜色。

            -->

            <!-- 60% -->

          </div>

          <!-- <el-progress

            type="circle"

            :percentage="scope.row.rate"

            :width="40"

            :show-text="false"

          ></el-progress> -->

        </template>

<style lang="scss" scoped>

  .pie {

   --w:50px;

   width: var(--w);

   aspect-ratio: 1; // aspect-ratio: 1用来确保元素保持方形

   position: relative;

   display: inline-grid;

   place-content: center;

   margin: 5px;

   font-size: 12px;

   font-weight: bold;

   font-family: sans-serif;

 }

 .pie:before {

   content: "";

   position: absolute;

   border-radius: 50%;

   inset: 0;

   background: conic-gradient(var(--c) calc(var(--p)*1%),rgba(28, 157, 255, 1) 0);

  //  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));

  //          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));

 }

</style>

 参考文章:手把手教你使用CSS制作动态饼图(附代码)(点晴免费OA系统(国内永久免费OA协同办公管理软件)最好的官网下载)

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

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

相关文章

深入理解Python装饰器:丰富函数功能的强大工具

导语&#xff1a;装饰器是Python非常强大的功能之一&#xff0c;它们允许程序员修改或增强已有函数或方法的行为&#xff0c;而无需更改其本身的代码&#xff0c;这篇文章&#xff0c;让我们一起来看看&#xff08;我自己这里理解的也不是很透彻&#xff09; ----------更正---…

ansible远程操作主机功能和自动化运维

ansible 两个功能&#xff1a;1、远程操作主机功能 2、自动化运维&#xff08;play 剧本 yaml&#xff09; 简述&#xff1a; 是基于python开发的配置管理和应用部署工具。在自动化运维中&#xff0c;现在是异军突起。 Asible能批量配置&#xff0c;部署&#xff0c;管理上千…

【从零开始学习JAVA集合 | 第一篇】深入解读HashMap源码(含面试题)

目录 目录 前言&#xff1a; HashMap简介&#xff1a; HashMap的常用常量和变量&#xff1a; HashMap的重要考点&#xff1a; HashMap的存储过程&#xff1a; HashMap的扩容过程&#xff1a; HashMap的初始化&#xff1a; 常见面试题&#xff1a; 总结&#xff1a;…

AI摄影绘画与PS优化:重塑数字艺术的未来

文章目录 《AI摄影绘画与PS优化从入门到精通》内容简介作者简介楚天 目录前言/序言 在科技日新月异的今天&#xff0c;人工智能&#xff08;AI&#xff09;已经渗透到我们生活的各个领域&#xff0c;包括艺术创作。AI摄影绘画和Photoshop&#xff08;PS&#xff09;优化是这个领…

「Verilog学习笔记」交通灯

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule triffic_light(input rst_n, //异位复位信号&#xff0c;低电平有效input clk, //时钟信号input pass_request,output wire[7:0]clock,output reg…

使用Alpha Vantage API和Python进行金融数据分析

Alpha Vantage通过一套强大且开发者友好的数据API和电子表格&#xff0c;提供实时和历史的金融市场数据。从传统资产类别&#xff08;例如股票、ETF、共同基金&#xff09;到经济指标&#xff0c;从外汇汇率到大宗商品&#xff0c;从基本数据到技术指标&#xff0c;Alpha Vanta…

扫雪铲冰,绿萝护航平安出行

为保护行人出行安全&#xff0c;确保道路干净整洁&#xff0c;绿萝党员志愿者带头行动&#xff0c;号召志愿者积极参与扫雪铲冰。2023年12月16日&#xff0c;绿萝志愿服务队与拱辰集体林场携手在昊天碳中和公园开展了志愿扫雪活动。 行动是最好的融雪剂。大雪过后的道路是最为寒…

自动驾驶TPM技术杂谈 ———— 交通事件分类与编码

文章目录 介绍交通事件分类交通事件分类顺序码交通事故交通灾害交通气象路面状况道路施工活动重大事件其他 介绍 1. 交通事件 —— 由于人、车辆、设施、环境之间的不协调导致正常交通秩序的突发性混乱事件。  2. 交通管制 —— 公安机关交通管理部门根据法律、法规&#xff0…

2.1 数据操作

声明&#xff1a; 注意&#xff01;&#xff01;&#xff01; 本博客仅用于本人学习笔记作用&#xff0c;所有资料来源都来自于李沐大神&#xff0c;博客中图片为沐神书上的图片。如有侵权&#xff0c;请联系本人删除&#xff0c;谢谢。 资料来源&#xff1a;https://zh-v2.d2…

什么是通讯芯片?通讯芯片又分什么种类?

通讯芯片是指在通讯系统中起到连接和传输信号的重要组成部分。根据通讯芯片的功能和应用,可以将其分为以下几类: 1、收发器芯片 2、窄带中频放大器芯片 3、卫星接收器LNB芯片 4、电话机芯片 5、压缩扩展器芯片 以上是通讯芯片的一些分类&#xff0c;随着通讯技术的不断发展…

patchless amsi学习(中)

DR7 DR7被称为“调试控制寄存器”&#xff0c;允许对每个硬件断点进行精细控制。其中&#xff0c;前8位控制是否启用了特定的硬件断点。偶数位&#xff08;0、2、4、6&#xff09;称为L0-L3&#xff0c;在本地启用了断点&#xff0c;这意味着仅在当前任务中检测到断点异常时才…

接口自动化测试实战教程

实现思路 使用excel管理用例用例信息&#xff0c;requests模块发送http请求&#xff0c;实现了记录日志&#xff0c;邮件发送测试报告的功能 目录结构如下&#xff1a; 下面直接上代码&#xff1a; 统筹脚本 # -*- coding:utf-8 -*-import osfrom interface import Interfa…

Android Termux安装MySQL数据库并通过内网穿透实现公网远程访问

文章目录 前言1.安装MariaDB2.安装cpolar内网穿透工具3. 创建安全隧道映射mysql4. 公网远程连接5. 固定远程连接地址 前言 Android作为移动设备&#xff0c;尽管最初并非设计为服务器&#xff0c;但是随着技术的进步我们可以将Android配置为生产力工具&#xff0c;变成一个随身…

【MongoDB】--MongoDB的Sort排序问题

目录 一、问题背景描述1.1、问题背景1.2、问题分析 二、建立索引支持深度翻页查询2.1、调整sort排序的内存限制【不建议】2.2、创建索引2.3、拓展--组合索引什么时候失效 二、聚合查询解决深度翻页查询 一、问题背景描述 1.1、问题背景 现实系统页面翻页到20000页之后&#x…

Improving IP Geolocation with Target-Centric IP Graph (Student Abstract)

ABSTRACT 准确的IP地理定位对于位置感知的应用程序是必不可少的。虽然基于以路由器为中心(router-centric )的IP图的最新进展被认为是前沿的,但一个挑战仍然存在:稀疏IP图的流行(14.24%,少于10个节点,9.73%孤立)限制了图的学习。为了缓解这个问题,我们将目标主机(ta…

【LeetCode刷题笔记(8-2)】【Python】【接雨水】【单调栈】【困难】

文章目录 引言接雨水题目描述提示 解决方案2&#xff1a;【单调栈】结束语 【接雨水】 【LeetCode刷题笔记&#xff08;8-1&#xff09;】【Python】【接雨水】【动态规划】【困难】 引言 编写通过所有测试案例的代码并不简单&#xff0c;通常需要深思熟虑和理性分析。虽然这…

200kw直流电子负载测试

在进行200kw直流电子负载测试时&#xff0c;需要设置合适的负载参数&#xff0c;如电流、电压和功率等&#xff0c;并记录测试结果。在测试过程中&#xff0c;可以通过改变负载参数来模拟不同工作条件下的电子设备的性能。通过对电子设备在不同负载条件下的响应进行测试和分析&…

JupyterHub 如何切换 conda 小环境

JupyterHub 如何切换 conda 小环境 服务器已经部署好 JupyterHub &#xff0c;相关端口请看对应答疑群群公告。在Jupyterhub 中使用 conda 创建的小环境&#xff0c;首先 ssh 登录上服务器或者在 JupyterHub 网页端打开终端 terminal。然后安装 conda &#xff0c;方法请见 Q4&…

【MyBatis Plus】逻辑删除、分页、乐观锁的应用及讲解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《MyBatis-Plus》。&#x1f3af;&#x1f3af; &am…

改进灰狼算法求解:考虑需求响应的风-光柴-储容量优化配置

目录 文章摘要&#xff1a; 亮点&#xff1a; 研究背景&#xff1a; 考虑需求相应的容量配置&#xff1a; 风、光、柴、储微电网模型&#xff1a; 储能配置模型&#xff1a; 改进的灰狼算法&#xff1a; 基于余弦规律变化的收敛因子 引入动态权重策略 运行效果&#…